ChartJS Bubble Chart

Multiple Line Chart

by AdvanTiSS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

CSS

canvas { background-color : #eee;
}

JavaScript

var totalUsers = 13


var rawData = {
    "Message": "",
    "Status": 0,
    "Data": {
      "totalUsers": 25,
      "jobName": "Job1",
      "items":[
        {
          "track": 1,
          "sequenceNumber": 100100,
          "groupSequenceNumber": 100,
          "operationName": "Operation T1 G100 S100",
          "totalerrors": 21,
          "users": 5
        },
        {
          "track": 1,
          "sequenceNumber": 100110,
          "groupSequenceNumber": 100,
          "operationName": "Operation T1 G100 S110",
          "totalerrors": 33,
          "users": 10
        },
        {
          "track": 1,
          "sequenceNumber": 100120,
          "groupSequenceNumber": 100,
          "operationName": "Operation T1 G100 S120",
          "totalerrors": 32,
          "users": 8
        },
        {
          "track": 1,
          "sequenceNumber": 100130,
          "groupSequenceNumber": 100,
          "operationName": "Operation T1 G100 S130",
          "totalerrors": 21,
          "users": 5
        },
        {
          "track": 1,
          "sequenceNumber": 100140,
          "groupSequenceNumber": 100,
          "operationName": "Operation T1 G100 S140",
          "totalerrors": 41,
          "users": 20
        },
        {
          "track": 1,
          "sequenceNumber": 110100,
          "groupSequenceNumber": 110,
          "operationName": "Operation T1 G110 S100",
          "totalerrors": 47,
          "users": 19
        },
        {
          "track": 1,
          "sequenceNumber": 110110,
          "groupSequenceNumber": 110,
          "operationName": "Operation T1 G110 S110",
          "totalerrors": 45,
          "users": 10
        },
        {
          "track": 1,
          "sequenceNumber": 110120,
          "groupSequenceNumber": 110,
          "operationName": "Operation T1 G110 S120",
          "totalerrors": 15,
          "users": 8
        },
        {
          "track": 1,
          "sequenceNumber": 110130,
         ...