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

Build your own Dashboard

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
890
Gotta code them all, a Pokémon and HTML5 love story!
Avatar for Bert Timmermans berttimmermans
3
460
Mobile UX - The Basics
Avatar for Bert Timmermans berttimmermans
11
790

Other Decks in Programming

See All in Programming
ユニットテストの先へ：テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
Avatar for SHIMANE, Yoshikazu shimashima35
0
280
AIエージェントの隔離技術の徹底比較
Avatar for kawayu kawayu
0
440
ふつうのFeature Flag実践入門
Avatar for irof irof
7
3.3k
Spec-Driven Development with AI-Agents: From High-Level Requirements to Working Software
Avatar for Anton Arhipov antonarhipov
2
380
自動レビューエンジンの実装と運用 ~レビューのない世界へ~
Avatar for Kanato kurukuru1999
2
280
3Dシーンの圧縮
Avatar for Fadis fadis
1
460
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
Avatar for nrs nrslib
6
740
TSKaigi 2026 TypeScriptバックエンドのオブザーバビリティ戦略 — Datadog × NestJSの実践
Avatar for Taisei Yamamoto taiseiyamamotoan
1
210
AIとRubyの静的型付け
Avatar for ukin0k0 ukin0k0
0
410
CSC307 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
Migrations : C'est une question d'hygiène !
Avatar for Vincent Amstoutz vinceamstoutz
0
2.4k
初めてのRubyKaigiはこう見えた
Avatar for asano jellyfish700
0
300

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.1k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
590
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
240
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
300
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
850
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
8k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
200

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 (