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
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
[Fin-JAWS 第38回 ～re:Invent 2024 金融re:Cap～]FaultInjectionServiceアップデート＠pre:Invent2024
shintaro_fukatsu
0
400
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
sappoRo.R #12 初心者セッション
kosugitti
0
230

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Agile that works and the tools we love
rasmusluckow
328
21k
Optimizing for Happiness
mojombo
376
70k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How STYLIGHT went responsive
nonsquared
98
5.3k

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 (