JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/canvasjs/1.4.1/canvas.min.js"></script>
<div id="chart"></div>

JavaScript

var json = [{
    "t": "t3",
        "y": 6.8,
        "x": "2004-07-05"
}, {
    "t": "t4",
        "y": 29,
        "x": "2004-07-05"
}, {
    "t": "tsh",
        "y": 0.01,
        "x": "2004-07-05"
}, {
    "t": "thyroglobulin level",
        "y": 0.5,
        "x": "2004-07-05"
}, {
    "t": "t3",
        "y": 5.2,
        "x": "2005-06-15"
}, {
    "t": "t4",
        "y": 30,
        "x": "2005-06-15"
}, {
    "t": "tsh",
        "y": 0.02,
        "x": "2005-06-15"
}, {
    "t": "thyroglobulin level",
        "y": 0.5,
        "x": "2005-06-15"
}];

$(document).ready(function () {
    var dataPoints = json.map(function (p) {
        p.x = new Date(p.x);
        return p;
    });

    var chart = new CanvasJS.Chart('chart', { //Pass chart options
        title: {
            text: "Blood Test Results"
        },
        axisX: {
            valueFormatString: "DD-MM-YYYY",
            labelAngle: -45
        },
        data: [{
            type: "line", //change it to column, spline, line, pie, etc

            dataPoints: dataPoints
        }]
    });
    chart.render();
});