1. <ins id="syEa"></ins>
    2. Profile
    3. Inbox 7
    4. Settings
    5. Log Out
    6. 开心宝贝h

      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!


      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.


      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.