Reporting Dash Board

Reporting Dashboard is an illustration of an interactive dashboard to show some kind of data in grid view along with its chart representation.

The technology stacks used for this PoC are:

Bootstrap 3

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
HighChart

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.
DataTable

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

Features of Reporting Dash Board

It's an Interactive Dashboard with same data shown in grid and in Charts.
Tool-tips appear when user mouse over on various components of charts.
Clicking on Pie-Chart will update the grid and Column Chart.
Grid has features for sorting, Filtering using Search Box, Pagination, and User can control number of records shown.
The whole dashboard is responsive. i.e. auto adaptive based on device and its resolution.
Which mean that this dashboard will work efficiently on desktops, laptops, tablets and on Mobile devices.

ScreenShots of The application