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

Build your own Dashboard

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Bert Timmermans Bert Timmermans
December 16, 2015
Programming
290
0

Build your own Dashboard

Avatar for Bert Timmermans

Bert Timmermans

December 16, 2015

More Decks by Bert Timmermans

See All by Bert Timmermans
Your own Minecraft, 
thanks to three.js!
Avatar for Bert Timmermans berttimmermans
1
880
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
Java 21/25 Virtual Threads 소개
Avatar for Sunghyouk Bae (Debop) debop
0
350
AI時代のPhpStorm最新事情 #phpcon_odawara
Avatar for yusuke yusuke
0
160
Claude Codeをカスタムして自分だけのClaude Codeを作ろう
Avatar for Terisuke terisuke
0
120
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
Avatar for shin1x1 shin1x1
0
370
3分でわかるatama plusのQA/about atama plus QA
Avatar for atama plus atamaplus
0
150
AI-DLC Deep Dive
Avatar for yuukiyo yuukiyo
7
1.4k
Nuxt Server Components
Avatar for wattanx wattanx
0
270
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
Avatar for Rodrigo Serradura serradura
0
310
一度始めたらやめられない開発効率向上術 / Findy あなたのdotfilesを教えて！
Avatar for Takashi Kokubun k0kubun
4
2.9k
Offline should be the norm: building local-first apps with CRDTs & Kotlin Multiplatform
Avatar for Renaud MATHIEU renaudmathieu
0
200
ハンズオンで学ぶクラウドネイティブ
Avatar for Tatsuki Minami tatsukiminami
0
120
AWS re：Invent 2025の少し振り返り ＋ DevOps AgentとBacklogを連携させてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
3
160

Featured

See All Featured
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
97
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
520
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
6
550
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
150
Side Projects
Avatar for Sacha Greif sachag
455
43k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
260
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k

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 (