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

Build your own Dashboard

Bert Timmermans
December 16, 2015
Programming
0
270

Build your own Dashboard

Bert Timmermans

December 16, 2015
Tweet

More Decks by Bert Timmermans

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

Other Decks in Programming

See All in Programming
WebDriver BiDiとは何なのか
yotahada3
1
140
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
ARA Ansible for the teams
kksat
0
150
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Domain-Driven Transformation
hschwentner
2
1.9k
Formの複雑さに立ち向かう
bmthd
1
720
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
最近のVS Codeで気になるニュース 2025/01
74th
1
250

Featured

See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
GitHub's CSS Performance
jonrohan
1030
460k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Docker and Python
trallard
44
3.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
BBQ
matthewcrist
86
9.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Unsuck your backbone
ammeep
669
57k

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 (