<!-- required files -->
<script src="../assets/plugins/chart.js/dist/chart.umd.js"></script>

<!-- html -->
<canvas id="line-chart"></canvas>

<!-- script -->
<script>
  Chart.defaults.color = 'rgba('+ app.color.componentColorRgb + ', .65)';
  Chart.defaults.font.family = app.font.family;
  Chart.defaults.font.weight = 500;
  Chart.defaults.scale.grid.color = 'rgba('+ app.color.componentColorRgb + ', .15)';
  Chart.defaults.scale.ticks.backdropColor = 'rgba('+ app.color.componentColorRgb + ', 0)';

  var randomScalingFactor = function() { 
    return Math.round(Math.random()*100)
  };

  var ctx = document.getElementById('line-chart').getContext('2d');
  var lineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'Dataset 1',
        borderColor: app.color.blue,
        pointBackgroundColor: app.color.componentBg,
        pointRadius: 4,
        borderWidth: 2,
        backgroundColor: 'rgba('+ app.color.blueRgb + ', .3)',
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
      }, {
        label: 'Dataset 2',
        borderColor: 'rgba('+ app.color.componentColorRgb + ', .75)',
        pointBackgroundColor: app.color.componentBg,
        pointRadius: 4,
        borderWidth: 2,
        backgroundColor: 'rgba('+ app.color.componentColorRgb + ', .5)',
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
      }]
    }
  });
</script>