Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Build your own Dashboard

Avatar for Bert Timmermans Bert Timmermans
December 16, 2015
Programming
0
280

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
840
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
AWS CDKの推しポイントN選
Avatar for アキキー akihisaikeda
1
240
Rediscover the Console - SymfonyCon Amsterdam 2025
Avatar for Robin Chalas chalasr
2
160
手が足りない！兼業データエンジニアに必要だったアーキテクチャと立ち回り
Avatar for zinkosuke zinkosuke
0
700
TUIライブラリつくってみた / i-just-make-TUI-library
Avatar for kazto kazto
1
380
Flutter On-device AI로 완성하는 오프라인 앱, 박제창 @DevFest INCHEON 2025
Avatar for JaiChangPark itsmedreamwalker
1
110
これならできる！個人開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
110
Github Copilotのチャット履歴ビューワーを作りました～WPF、dotnet10もあるよ～ #clrh111
Avatar for KatsuYuzu katsuyuzu
0
110
生成AIを利用するだけでなく、投資できる組織へ
Avatar for pospome pospome
2
330
これだけで丸わかり！LangChain v1.0 アップデートまとめ
Avatar for os1ma os1ma
6
1.8k
Cell-Based Architecture
Avatar for Luram Archanjo larchanjo
0
120
宅宅自以為的浪漫：跟 AI 一起為自己辦的研討會寫一個售票系統
Avatar for 高見龍 eddie
0
500
Building AI Agents with TypeScript #TSKaigiHokuriku
Avatar for izumin5210 izumin5210
6
1.3k

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.2k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

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 (