Why is my line graph going backwards in chartjs?

Sovereign

I am attempting to graph like numbers on posts and when they were posted. For some reason it goes crazy if points are close. Any ideas why?

I have been playing a little bit with the step sizes as well as the x axis' dynamic stretching, but to no avail.

var myLine2 = new Chart(ctx2, {
  type: 'line',
  data: {
    //labels: '{{ labels | tojson }}',
    datasets: [{
      label: 'My Line',
      data: data,
      lineTension: 0
    }]
  },
  options: {
    //spanGaps: true,
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          //unit: 'day',
          tooltipFormat: 'lll',
        }
      }]
    }
  }
});

Here is what it looks like: https://ibb.co/Fgq6M8M (I don't have enough reputation to upload images)

I expect the line to connect to the closest point to the right, but it actually darts around the chart. Any thought?

My data set can be found here: https://hastebin.com/wukeburiga.css

snwflk

Chart.js draws your data points in the order they are specified. The drawing of a single data point is not independent from the other data points. Instead, a line is drawn from point to point, in the order specified in the dataset.

An excerpt from your provided dataset shows that the x axis is not in ascending order.

44: {x: Wed May 22 2019 06:50:37 GMT+1000 (Australian Eastern Standard Time), y: "58"}
45: {x: Sun Jun 09 2019 15:43:57 GMT+1000 (Australian Eastern Standard Time), y: "48"}
46: {x: Sun Jun 09 2019 16:44:17 GMT+1000 (Australian Eastern Standard Time), y: "80"}
47: {x: Wed May 22 2019 09:20:12 GMT+1000 (Australian Eastern Standard Time), y: "59"}
48: {x: Mon Jun 10 2019 06:12:26 GMT+1000 (Australian Eastern Standard Time), y: "9"}

To fix this, make sure the data points are ordered before they are passed to Chart.js.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related