Charts

Charts

Javascript dependency

Charts use ChartJS plugin /bower_components/chart.js/dist/Chart.js
Documentation for ChartJS: http://www.chartjs.org/docs/

Custom charts requires app/scripts/modules/customCharts.js and app/scripts/main.js.

Files

app/scripts/modules/customCharts.js
app/scripts/main.js

Line chart

You have to add canvas with custom id to html.

Javascript dependency

You need to add JSON input with your custom chart parameters to charts variable within function customCharts() {}. You need to set object property "id" to "bar-chart-1" and "type" to "line". E.g.: "type":"line".

Example:code
Code:
html:

  <canvas id="line-chart-1" />


javascript:

  <script>
    function customCharts() {
      charts = [
                  {"id":"line-chart-1","data":[83175,52390,25988,64863,67136,73910,94013,71655,28892,105722,49594,56082],"barColor":"#00b2e3","xLabels":["January","February","March","April","May","Juny","July","August","September","October","November","December"],"type":"line"}
              ];
    }
  </script>

Bar chart

You have to add canvas with custom id to html.

Javascript dependency

You need to add JSON input with your custom chart parameters to charts variable within function customCharts() {}. You need to set object property "type" to "bar". E.g.: "type":"bar".

Example:code
Code:
html:

  <canvas id="bar-chart-1" />


javascript:

  <script>
    function customCharts() {
      charts = [
                  {"id":"bar-chart-1","data":[83175,52390,25988,64863,67136,73910,94013,71655,28892,105722,49594,56082],"barColor":"#00b2e3","xLabels":["January","February","March","April","May","Juny","July","August","September","October","November","December"],"type":"bar"}
              ];
    }
  </script>