AngularJS Chart using Chart.js

by Florian Gropp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>AngularJS Chart using Chart.js</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="ng-chartjs-dadshboard-Dateien/dummy.js"></script>

    <link rel="stylesheet" type="text/css" href="ng-chartjs-dadshboard-Dateien/result-light.css">

      <script type="text/javascript" src="ng-chartjs-dadshboard-Dateien/Chart.js"></script>
  <style type="text/css">
    
  </style>
  <!-- TODO: Missing CoffeeScript 2 -->

<iframe class="chartjs-hidden-iframe" style="width: 100%; display: block; border: 0 none; height: 0; margin: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></iframe>
  <canvas id="chart" style="width: 1008px; height: 504px;" width="1008" height="604"></canvas>

JavaScript

window.onload=function(){
      
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    "labels": [
      "01.12.2015",
      "02.12.2015",
      "03.12.2015",
      "04.12.2015",
      "30.12.2015"
    ],
    "datasets": [{
      "label": "Impressions",
      "fill": true,
      "borderColor": "#C80000",
      yAxisID: "y-axis-0",
      "data": [
        4301,
        4447,
        5593,
        5748,
        5984
      ]
    }, {
      "label": "Sales",
      "fill": true,
      "borderColor": "#00B203",
      yAxisID: "y-axis-1",
      "data": [
        672,
        658,
        918,
        1298,
        1037
      ]
    }, {
      "label": "Revenue",
      "fill": true,
      "borderColor": "#0000C8",
      yAxisID: "y-axis-2",
      "data": [
        6270,
        7060,
        7450,
        9700,
        7850
      ]
    }, {
      "label": "Affili-Conversion",
      "fill": true,
      "borderColor": "#C8A300",
      yAxisID: "y-axis-3",
      "data": [
        16.62,
        14.80,
        16.41,
        22.58,
        17.33
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        position: "bottom",
        ticks: {
          fontColor: "#000",
        },
        scaleLabel: {
          display: true,
          labelString: "ACTUAL MONTH",
          fontColor: "#000",
          fontSize: 16
        }
      }],
      yAxes: [{
        position: "left",
        "id": "y-axis-0",
        ticks: {
          beginAtZero: true,
          fontColor: "#C80000",
        },
        scaleLabel: {
          display: true,
          labelString: "Impressions",
          fontColor: "#C80000",
          fontSize: 16,
        }
      }, {
        position: "left",
        "id": "y-axis-1",
        ticks: {
          beginAtZero: true,
          fontColor: "#00B203"
        },
        scaleLabel: {
          display: true,
          labelString: "Sales",
          fontColor: "#00B203",
    ...