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

Build your own Dashboard

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Bert Timmermans Bert Timmermans
December 16, 2015
Programming
0
290

Build your own Dashboard

Avatar for Bert Timmermans

Bert Timmermans

December 16, 2015
Tweet

More Decks by Bert Timmermans

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

Other Decks in Programming

See All in Programming
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
290
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
0
250
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
140
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.9k
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
21
7.3k
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
5
470
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
160
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
240

Featured

See All Featured
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
130
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
240
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
370
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
120
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k

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 (