CanvasJS HTML5 JavaScript Charts

CanvasJS helps you create chart in the most simple and efficient way possible

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;">
</div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

JavaScript

window.onload = function() {

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title: {
      text: "Sensordaten"
    },
    axisX: {
      title: "Zeitstempel"
    },
    axisY: [{
        title: "Luftfeuchte rel",
        titleFontColor: "#4F81BC",
        lineColor: "#4F81BC",
        labelFontColor: "#4F81BC",
        tickColor: "#4F81BC",
        includeZero: false
      },
      {
        title: "Temperatur",
        lineColor: "#369EAD",
        tickColor: "#369EAD",
        labelFontColor: "#369EAD",
        titleFontColor: "#369EAD",
        includeZero: false
      }
    ],
    axisY2: {
      title: "Luftfeuchte abs",
      titleFontColor: "#C0504E",
      lineColor: "#C0504E",
      labelFontColor: "#C0504E",
      tickColor: "#C0504E",
      includeZero: false
    },
    legend: {
      cursor: "pointer",
      dockInsidePlotArea: true,
      itemclick: toggleDataSeries
    },
    data: [{
        type: "spline",
        name: "Luftfeuchte",
        color: "#369EAD",
        showInLegend: true,
        axisYIndex: 0,
        dataPoints: [{
          x: "03.03.19",
          y: "97.8"
        }, {
          "x": "03.03.19",
          "y": 97.5
        }, {
          "x": "03.03.19",
          "y": 97.3
        }, {
          "x": "03.03.19",
          "y": 97.1
        }, {
          "x": "03.03.19",
          "y": 96.7
        }, {
          "x": "03.03.19",
          "y": 95.8
        }, {
          "x": "03.03.19",
          "y": 93.8
        }, {
          "x": "03.03.19",
          "y": 89.1
        }, {
          "x": "03.03.19",
          "y": 66.5
        }, {
          "x": "03.03.19",
          "y": 52.9
        }, {
          "x": "03.03.19",
          "y": 56.7
        }, {
          "x": "03.03.19",
          "y": 64.1
        }, {
          "x": "03.03.19",
          "y": 75.7
        }, {
          "x": "03.03.19",
          "y": 86.6
        }, {
          "x": "03.03.19",
          "y": 93.5
       ...