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

Build your own Dashboard

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Bert Timmermans Bert Timmermans
December 16, 2015
Programming
0
290

Build your own Dashboard

Avatar for Bert Timmermans

Bert Timmermans

December 16, 2015
Tweet

More Decks by Bert Timmermans

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

Other Decks in Programming

See All in Programming
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
610
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
130
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
380
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
330
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
500
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
140
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
780
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
780
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
590
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
740

Featured

See All Featured
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
130
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.3k
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
120
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
250
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
130
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.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 (