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

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
800
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
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
Avatar for yuhi yuhisatoxxx
3
920
ポスターセッション: 「まっすぐ行って、右！」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
Avatar for komo_fr komofr
0
950
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
330
SpecKitでどこまでできる？ コストはどれくらい？
Avatar for Tech Leverages leveragestech
0
520
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
Avatar for kinocoboy kinocoboy2
4
670
Django Ninja による API 開発効率化とリプレースの実践
Avatar for Kashun Yoshida kashewnuts
0
930
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
Avatar for nrs nrslib
3
370
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
iOSエンジニア向けの英語学習アプリを作る！
Avatar for yukawashouhei yukawashouhei
0
180
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
Avatar for masato hommaru mbook
0
780
Catch Up: Go Style Guide Update
Avatar for ANDPAD inc andpad
0
170
CSC509 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
430

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.9k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
45
2.5k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
237
140k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k

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 (