Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Build your own Dashboard
Search
Bert Timmermans
December 16, 2015
Programming
0
270
Build your own Dashboard
Bert Timmermans
December 16, 2015
Tweet
Share
More Decks by Bert Timmermans
See All by Bert Timmermans
Your own Minecraft, thanks to three.js!
berttimmermans
1
710
Gotta code them all, a Pokémon and HTML5 love story!
berttimmermans
3
430
Mobile UX - The Basics
berttimmermans
11
780
Other Decks in Programming
See All in Programming
WebDriver BiDiとは何なのか
yotahada3
1
140
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
ARA Ansible for the teams
kksat
0
150
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Domain-Driven Transformation
hschwentner
2
1.9k
Formの複雑さに立ち向かう
bmthd
1
720
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
GitHub's CSS Performance
jonrohan
1030
460k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Docker and Python
trallard
44
3.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
BBQ
matthewcrist
86
9.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Unsuck your backbone
ammeep
669
57k
Transcript
Build Your Own Dashboard Bert Timmermans (
Bert Timmermans Application Designer @BERTTIMMERMANS
Build Your Own Dashboard Bert Timmermans (
Track customer relationships The goal
None
None
NPS % Promotors - = % Detractors
Dashboard Design r
None
Dashboard HTML & CSS
1 2 3 4 5 8 6 7
1 2 3 4 5 8 6 7
<div class='dashboard layout-one‘> <ul class='widgets'> <li> <div class='widget'></div> </li> <li>
<div class='widget'></div> </li> ... </ul> </div> Basic structure
.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
Widget styling Creative use of <ul>
Widget styling Creative use of <ul>
Widget styling Highcharts http://www.highcharts.com
Widget styling D3.js http://d3js.org
Dashboard Javascript (
None
Handeling the data Dashboard Ý Server
Handeling the data Dashboard Ý Server Request data
Handeling the data Dashboard Ý Server Return data
Handeling the data Dashboard Ý Server
Handeling the data Dashboard Ý Server |
Demo Time
Build Your Own Dashboard Bert Timmermans (