Project Description

Working in a consulting capacity, we re-imagined and mocked-up a functional dashboard for business-data visualization. Client asked that the dashboard be interactive and presented in dark, muted backgrounds, with eye-catching color contrasts setting apart the distinct data series.

Drawing on products and services offered by our client’s company, we created a functional dashboard — based on dummy data for illustrative purposes — with four distinct chart visualizations.

dv-screenshot

These four visualizations include a line chart with tooltips that display the values of each series at specific points in the plot, as well as a vertical bar chart that breaks down weekly sales and lets the user “drill down” each product category to see which specific products were actually sold.

In addition to these visualizations, the dashboard features a pie chart depicting YTD market-share by database platform, and it also features a horizontal bar chart for YTD revenue by service with tooltips displaying the percentage of total sales for a specific data series.

All visualizations were made using the ZingChart JavaScript library, which leverages HTML5 to render the charts and their elements with HTML5 Canvas, or as scalable vector graphics — SVG (a widely-adopted standard for producing high-resolution graphics and visualizations on the web).

To see the dashboard as it would be viewed and manipulated by end-users, click on the screenshot depicted above.

(NB: Considering that this dashboard was meant not as a finished product, but rather to illustrate a specific dashboard design approach — namely, one that would be comfortable for database admins to look at on wide-screens all day — we did not make the sample dashboard responsive, though this would be the obvious next step. Accordingly, the live dashboard is best viewed at full-size on a small laptop or a larger screen.)

Back to Top