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
790
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 sunnyone sunnyone
3
300
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
Avatar for Taito Tanaka taitotnk
0
870
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
Avatar for cc4966 cc4966
2
270
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
Avatar for teamLab teamlab
PRO
2
170
Testing Trophyは叫ばない
Avatar for toms toms74209200
0
890
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
Avatar for Tomoki Kobayashi temoki
0
350
Ruby Parser progress report 2025
Avatar for yui-knk yui_knk
1
460
テストコードはもう書かない：JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
Avatar for makun makun
0
540
AI時代のUIはどこへ行く？
Avatar for Yusuke Wada yusukebe
18
9.1k
ProxyによるWindow間RPC機構の構築
Avatar for syumai syumai
3
1.2k
Zendeskのチケットを Amazon Bedrockで 解析した
Avatar for ryokosuge ryokosuge
3
320
How Android Uses Data Structures Behind The Scenes
Avatar for HyunWoo Lee l2hyunwoo
0
480

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
930
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
330
21k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
620
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
580
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
3
60
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.8k

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 (