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
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
900
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
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.2k
Honoでのサプライチェーン侵害対策 〜 3つのライブラリに学ぶ
Avatar for Yusuke Wada yusukebe
6
1.2k
ユニットテストの先へ：テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
Avatar for SHIMANE, Yoshikazu shimashima35
0
400
dRuby over BLE
Avatar for makicamel makicamel
2
340
AIとASP.NET Coreで雑Webアプリを作った話
Avatar for Mayuki Sawatari mayuki
0
640
「エンジニアインターン、どうやって取った？」準備のリアルを語るLT会 Progate BAR
Avatar for akio akiomatic
0
130
フロントエンドとバックエンドで「1文字」を揃えよう
Avatar for てきめん tekimen youkidearitai
PRO
0
700
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
Avatar for snhryt snhryt
0
160
JavaDoc 再入門
Avatar for nagise nagise
1
350
Agentic UI
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
140
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
Avatar for Hajime Kato hjmkth
1
270

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
410
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
860
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
130
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
71
40k

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 (