JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<svg id="visualisation"></svg>

CSS

body { font: 12px Arial;}

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

JavaScript

//JSON data for graph
        var data = [
        {

            "date": "2015-04-01T00:00:00",
            "Logon": "1535.000000",
            "ServerExport": "704.000000",
            "Processor": "15.268909",
            "AdminLogon": "1731.000000"
        },
        {

            "date": "2015-04-01T00:10:00",
            "Logon": "1995.000000",
            "ServerExport": "630.000000",
            "Processor": "15.585726",
            "AdminLogon": "1951.000000"
        },
        {

            "date": "2015-04-01T00:20:00",
            "Logon": "1946.500000",
            "ServerExport": "653.500000",
            "Processor": "10.585794",
            "AdminLogon": "1903.500000"
        },
        {

            "date": "2015-04-01T00:30:00",
            "Logon": "1851.500000",
            "ServerExport": "650.500000",
            "Processor": "5.999048",
            "AdminLogon": "1830.000000"
        },
        {

            "date": "2015-04-01T00:40:00",
            "Logon": "1732.500000",
            "ServerExport": "685.000000",
            "Processor": "10.097523",
            "AdminLogon": "1864.000000"
        },
        {

            "date": "2015-04-01T00:50:00",
            "Logon": "1622.000000",
            "ServerExport": "664.500000",
            "Processor": "7.387592",
            "AdminLogon": "1757.000000"
        },
        {

            "date": "2015-04-01T01:00:00",
            "Logon": "995.000000",
            "ServerExport": "508.500000",
            "Processor": "8.683075",
            "AdminLogon": "1438.000000"
        },
        {

            "date": "2015-04-01T01:10:00",
            "Logon": "1416.666666",
            "ServerExport": "723.000000",
            "Processor": "12.205153",
            "AdminLogon": "1721.500000"
        },
        {

            "date": "2015-04-01T01:20:00",
            "Logon": "1245.500000",
            "ServerExport": "631.500000",
            "Processor": "14.483815",
           ...