Build your own Dashboard

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
7. NPS % Promotors - = % Detractors
8. Dashboard Design r
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 (
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 (