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
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.2k
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
630
最近のVS Codeで気になるニュース 2025/01
74th
1
240
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
1
3.4k
[Fin-JAWS 第38回 ～re:Invent 2024 金融re:Cap～]FaultInjectionServiceアップデート＠pre:Invent2024
shintaro_fukatsu
0
380
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
790
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
390
ErdMap: Thinking about a map for Rails applications
makicamel
1
1.2k
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
240
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
120
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた （プロトタイプ）　/ Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
2.6k

Featured

See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Designing for humans not robots
tammielis
250
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
Being A Developer After 40
akosma
89
590k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Unsuck your backbone
ammeep
669
57k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
The Cult of Friendly URLs
andyhume
78
6.2k

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 (