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
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
sappoRo.R #12 初心者セッション
kosugitti
0
230
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Agile that works and the tools we love
rasmusluckow
328
21k
Optimizing for Happiness
mojombo
376
70k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How STYLIGHT went responsive
nonsquared
98
5.3k
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 (