Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build your own Dashboard

Bert Timmermans
December 16, 2015
Programming
0
270

Build your own Dashboard

Bert Timmermans

December 16, 2015
Tweet

More Decks by Bert Timmermans

See All by Bert Timmermans
Your own Minecraft, 
thanks to three.js!
berttimmermans
1
700
Gotta code them all, a Pokémon and HTML5 love story!
berttimmermans
3
430
Mobile UX - The Basics
berttimmermans
11
780

Other Decks in Programming

See All in Programming
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
240
iOS開発におけるCopilot For XcodeとCode Completion / copilot for xcode
fuyan777
1
110
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
610
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
350
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
2
130
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
200
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
130
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
570
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
990
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
960
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
840
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
130

Featured

See All Featured
We Have a Design System, Now What?
morganepeng
51
7.3k
A better future with KSS
kneath
238
17k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Six Lessons from altMBA
skipperchong
27
3.5k
A Philosophy of Restraint
colly
203
16k
Optimizing for Happiness
mojombo
376
70k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k

Transcript

  1. Build Your Own Dashboard Bert Timmermans (

  2. Bert Timmermans Application Designer @BERTTIMMERMANS

  3. Build Your Own Dashboard Bert Timmermans (

  4. Track customer relationships The goal

  5. None
  6. None

  7. NPS % Promotors - = % Detractors

  8. Dashboard Design r

  9. None

  10. Dashboard HTML & CSS

  11. 1 2 3 4 5 8 6 7

  12. 1 2 3 4 5 8 6 7

  13. <div class='dashboard layout-one‘> <ul class='widgets'> <li> <div class='widget'></div> </li> <li>

    <div class='widget'></div> </li> ... </ul> </div> Basic structure

  14. .layout-one { li:nth-child(1) { left: 1.5vw; top: 2.5vh; width: 73vw;

    height: 39vh; } li:nth-child(2) { left: 1.5vw; top: 2.5vh; width: 73vw; height: 39vh; } ... } Positioning of the widgets

  15. Widget styling Creative use of <ul>

  16. Widget styling Creative use of <ul>

  17. Widget styling Highcharts http://www.highcharts.com

  18. Widget styling D3.js http://d3js.org

  19. Dashboard Javascript (

  20. None

  21. Handeling the data Dashboard Ý Server

  22. Handeling the data Dashboard Ý Server Request data

  23. Handeling the data Dashboard Ý Server Return data

  24. Handeling the data Dashboard Ý Server

  25. Handeling the data Dashboard Ý Server |

  26. Demo Time

  27. Build Your Own Dashboard Bert Timmermans (