Chartjs-How to create a multiline graph with differents labels

by

1👍

✅

Yes, this is possible by using the time axis. You’ll need to remodel your data to fit the required input format; an example of this is in the snippet below using forEach.

It’s important to note that Chart.js requires Moment.js for datetime handling. Make sure to include Moment.js before Chart.js, or use the Chart.js bundled build.

let j = {
    "site1": [{
        "datetime": "2019-01-09 14:43:58",
        "price": "649.99"
      },
      {
        "datetime": "2019-01-09 14:44:17",
        "price": "649.99"
      },
      {
        "datetime": "2019-01-09 15:02:59",
        "price": "649.99"
      },
      {
        "datetime": "2019-01-09 15:05:43",
        "price": "649.99"
      },
      {
        "datetime": "2019-01-09 15:08:52",
        "price": "649.99"
      },
      {
        "datetime": "2019-01-09 15:16:51",
        "price": "649.99"
      }
    ],
    "site2": [{
        "datetime": "2019-01-09 15:03:05",
        "price": "0"
      },
      {
        "datetime": "2019-01-09 15:05:52",
        "price": "804.91"
      },
      {
        "datetime": "2019-01-09 15:09:00",
        "price": "804.91"
      },
      {
        "datetime": "2019-01-09 15:16:58",
        "price": "804.91"
      }
    ]
  },
  k = Object.keys(j),
  datasets = [];

// remodel the data so it can be provided direct to Chart.js
k.forEach(function(val) {
  let d = {
    label: val,
    data: []
  };

  j[val].forEach(function(val2) {
    d.data.push({
      x: val2.datetime,
      y: val2.price
    });
  });

  datasets.push(d);
});

// create the chart.
new Chart(document.getElementById('canvas'), {
  type: 'line',
  data: {
    datasets: datasets
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="canvas"></canvas>

1👍

This can be achieved using Chart.js + Moment.js when you’re plotting a chart against time.

See this below code or fiddle -> http://jsfiddle.net/goz3jehy/4/

var config = {
  type: 'line',
  data: {
    datasets: [{
        label: "site1",
        backgroundColor: 'red',
        borderColor: 'pink',
        fill: false,
        data: [{
            x: '2019-01-09 14:43:58',
            y: 649.99
          },
          {
            x: '2019-01-09 14:44:17',
            y: 649.99
          },
          {
            x: "2019-01-09 15:02:59",
            y: 649.99
          },
          {
            x: "2019-01-09 15:05:43",
            y: 649.99
          },
          {
            x: "2019-01-09 15:08:52",
            y: 649.99
          },
          {
            x: "2019-01-09 15:16:51",
            y: 700
          }
        ],
      },
      {
        label: "site2",
        backgroundColor: 'orange',
        borderColor: 'yellow',
        fill: false,
        data: [{
            x: "2019-01-09 15:03:05",
            y: 0
          },
          {
            x: "2019-01-09 15:05:52",
            y: 804.91
          },
          {
            x: "2019-01-09 15:09:00",
            y: 804.91
          },
          {
            x: "2019-01-09 15:16:58",
            y: 804.91
          }
        ],
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {          
        }
      }],
    },
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

Leave a comment