Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Build your own Dashboard

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
910
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
MIZARU@SPAJAM2026 第二回予選
Avatar for drama 1901drama
0
110
[GoCon2026] When Goroutines Are Not Enough: Runtime Locality in High-Throughput Go
Avatar for Takeru Hayasaka takehaya
6
2k
変化を抱擁するドキュメントの作り方 - ビジネスルール駆動開発がもたらす、コードとの新しい関係
Avatar for ioki ioki
2
150
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
Avatar for 村上優稀 musan
3
280
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
270
PHPプロジェクトの結合バランスを可視化する #php_night
Avatar for Takuma Kajikawa kajitack
0
240
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
Avatar for reimaru reimaru
1
250
Swift愛好会と私（ウホーイ） / Swift Fan Club and Uhooi
Avatar for uhooi uhooi
0
150
Family mrubyの進捗
Avatar for Katsuhiko Kageyama kishima
1
110
XP祭りでしか伝わらないフリップネタ #xpjug
Avatar for bayashi murabayashi
0
140
AI駆動開発にグラフDBを重ねてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
780
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
220

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Done Done
Avatar for chrislema chrislema
186
16k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
How to make the Groovebox
Avatar for あそなす asonas
2
2.4k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.7k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
190
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
280
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
780
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k

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 (