Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE HTML>
<html>
    <head>
        
    </head>
    <body>
        <div id="chartContainer" style="height: 370px; width: 50%;"></div>
        <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
        <script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    </body>
</html>

JSON:
[{"label":"2018-07-25 17:50:07","y":38},{"label":"2018-07-25 18:00:07","y":37},{"label":"2018-07-25 18:10:07","y":36},{"label":"2018-07-25 18:20:07","y":36},{"label":"2018-07-25 18:30:07","y":36},{"label":"2018-07-25 18:40:07","y":36},{"label":"2018-07-25 18:41:11","y":34},{"label":"2018-07-25 18:50:07","y":33},{"label":"2018-07-25 19:00:07","y":33}]

JavaScript

function mysqlTimeStampToDate(timestamp) {
                //function parses mysql datetime string and returns javascript Date object
                //input has to be in this format: 2007-06-05 15:26:02
                var regex = /^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;
                var parts = timestamp.replace(regex, "$1 $2 $3 $4 $5 $6").split(' ');
                return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]);
            }
            window.onload = function () {

                var dataPoints = [];

                var options = {
                    animationEnabled: true,
                    theme: "light2",
                    title: {
                        text: "Temperatur"
                    },
                    axisX: {
                        valueFormatString: "HH:mm",
                    },
                    axisY: {
                        title: "Grad",
                        titleFontSize: 24,
                        includeZero: false
                    },
                    data: [{
                        type: "spline",
                        xValueFormatString: "Temperatur",
                        dataPoints: dataPoints
                    }]
                };

                function addData(data) {
                    for (var i = 0; i < data.length; i++) {
                        dataPoints.push({
                            x: mysqlTimeStampToDate(data[i].label),
                            y: data[i].y
                        });
                    }
                    $("#chartContainer").CanvasJSChart(options);

                }
                $.getJSON("temperatur.php", addData);

            }