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
0
280

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
820
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
スタートアップを支える技術戦略と組織づくり
Avatar for pospome pospome
8
9.3k
[堅牢.py #1] テストを書かない研究者に送る、最初にテストを書く実験コード入門 / Let's start your ML project by writing tests
Avatar for Shunsuke KITADA shunk031
11
5.3k
All(?) About Point Sets
Avatar for hole hole
0
200
目的で駆動する、AI時代のアーキテクチャ設計 / purpose-driven-architecture
Avatar for MinoDriven minodriven
9
3.1k
高単価案件で働くための心構え
Avatar for Katsuma Narisawa nullnull
0
150
r2-image-worker
Avatar for Yusuke Wada yusukebe
1
170
Evolving NEWT’s TypeScript Backend for the AI-Driven Era
Avatar for Rodrigo Ramirez xpromx
0
150
CSC509 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
物流DXを支える“意味”の設計：セマンティックレイヤーとAIで挑むデータ基盤/登壇資料（飯塚 大地）
Avatar for Hacobu hacobu
PRO
0
110
AI駆動開発ライフサイクル(AI-DLC)のホワイトペーパーを解説
Avatar for Yasutomo Hariu swxhariu5
0
1.2k
Flutterアプリ運用の現場で役立った監視Tips 5選
Avatar for Takuma Osada ostk0069
1
500
PyCon mini 東海 2025「個人ではじめるマルチAIエージェント入門 〜LangChain × LangGraphでアイデアを形にするステップ〜」
Avatar for komo_fr komofr
3
1.1k

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k

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 (