[Chartjs]-Price history with chart js

by

1👍

✅

See http://www.chartjs.org/docs/latest/axes/cartesian/time.html for setting time scale on xAxes, then you have to convert your date field to a real date object:

  xAxes: [{
    type: 'time',
    distribution: 'linear',
    ticks: {
      source: 'labels'
    },
    time: {
    unit: 'month',
    unitStepSize: 1,
    displayFormats: {
       'month': 'MMM'
      }
    }
  }

Check this jsfiddle showing an example of time serie rendered as a line: https://jsfiddle.net/beaver71/9f9a2z88/

0👍

You have 2 separate your data array into 2 different arrays. One of dates (say dates_array) and another of price (say price_array). Then you just have to create new chart.

var chart = new Chart(element, {
    type: 'line',
    data: {
      labels: dates_array,
      datasets: [{
        label: '# price',
        data: price_array
      }]
    }
  });

Here, element is the element in which chart will be shown. labels will be assigned the date array and data will be assigned price array. You can check this jsfiddle https://jsfiddle.net/j7gta8yn/

Leave a comment