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
月間100万人のサービス刷新で、 技術選定をHonoに振り切った話
Avatar for bara yutobara
2
2.2k
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
1
2.2k
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
Avatar for kinopee kinopeee
21
21k
Vue Fes Japan 2026 タイムテーブル徹底解説
Avatar for 448jp | OKI Yoshiya 448jp
1
630
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
Avatar for Yu Sugawara yusuga
1
580
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
340
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
340
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
110
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
Avatar for mpyw mpyw
0
480
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
450
速習iPhone Duo対応
Avatar for 野瀬田　裕樹 yuukiw00w
2
960
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
490

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.7k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
699
190k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
2
400
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
490
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
510

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 (