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
Tool Catalog Agent for Bedrock AgentCore Gateway
Avatar for matsukada licux
6
2.1k
機能追加とリーダー業務の類似性
Avatar for Rinchoku rinchoku
2
1.1k
Swift Updates - Learn Languages 2025
Avatar for Yuta Koshizawa koher
2
460
詳解！defer panic recover のしくみ / Understanding defer, panic, and recover
Avatar for convto convto
0
230
Laravel Boost 超入門
Avatar for Arlo fire_arlo
2
210
CSC305 Summer Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
140
print("Hello, World")
Avatar for 高見龍 eddie
1
510
Kiroで始めるAI-DLC
Avatar for kaonash kaonash
2
570
CloudflareのChat Agent Starter Kitで簡単！AIチャットボット構築
Avatar for syumai syumai
2
450
AI Coding Agentのセキュリティリスク：PRの自己承認とメルカリの対策
Avatar for さうす s3h
0
160
ProxyによるWindow間RPC機構の構築
Avatar for syumai syumai
3
1.1k
Improving my own Ruby thereafter
Avatar for monochrome sisshiki1969
1
160

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
840
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k

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 (