Charts Display Your Data

There are two options for charts: Flot charts and morris.js. Choose which one best suits your needs, and make sure to master the documentation to get the most out of these charts!

Flot Charts

Line Graph Example with Tooltips

Pie Chart Example with Tooltips

Multiple Axes Line Graph Example with Tooltips and Raw Data

Moving Line Chart

Bar Graph with Tooltips

Additional Flot Chart Information

Full documentation for Flot can be found at http://www.flotcharts.org/. Flot has a lot of different options available, and they have a bunch of plugins as well that allow you to do neat things. Here we are using the tooltip plugin, the resize plugin, and the pie chart plugin, but there are many more to choose from. The documentation is a bit more advanced and requires a good deal of JavaScript knowledge in order to make the charts work for you.

NOTE: The charts are responsive, and the Flot charts are redrawn when the window resizes. The only one that needs a page refresh on a window resize is the pie chart. If you find a way to fix this, please let me know.

morris.js Charts

Area Line Graph Example with Tooltips

Donut Chart Example

Line Graph Example with Tooltips

Bar Graph Example

Additional morris.js Information

Full documentation for morris.js charts can be found at http://www.oesmith.co.uk/morris.js/. The chart options for morris.js are line & area charts, bar charts, and donut charts. The documentation is pretty straight forward, and you will want to look at it in order to get the most out of the charts.

NOTE: The charts are responsive, but they are drawn when the window loads. If you change the window size, for instance resizing your brownser window, you will need to refresh the page to redraw the chart responsively. According to morris.js, automatically redrawing charts on window resizing is being worked into their next big update.