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
280
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
780
Gotta code them all, a Pokémon and HTML5 love story!
berttimmermans
3
450
Mobile UX - The Basics
berttimmermans
11
780
Other Decks in Programming
See All in Programming
AIともっと楽するE2Eテスト
myohei
7
2.9k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
150
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
150
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
990
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
300
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
Porting a visionOS App to Android XR
akkeylab
0
640
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
500
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
370
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Thoughts on Productivity
jonyablonski
69
4.7k
How to Ace a Technical Interview
jacobian
278
23k
Scaling GitHub
holman
460
140k
Docker and Python
trallard
44
3.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Embracing the Ebb and Flow
colly
86
4.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Raft: Consensus for Rubyists
vanstee
140
7k
Bash Introduction
62gerente
613
210k
Facilitating Awesome Meetings
lara
54
6.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
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 (