Chart.js: [Image included] Make line not take up whole graph.

[benspring]

So I want my graph to display but not over the while graph.
Every 2 seconds more data is being added dynamically to the graph.

https://i.gyazo.com/b88e4d7b3392f60415b50a1fd852f1c8.png

In the image above, I want it to increase at each step. So the line isn't spread out over the whole graph. And everytime I add data it slightly gets closer and closer until when it reaches the edge it then increase. Here is a gif of what I mean too:

https://i.gyazo.com/d35879f20a291d18e70f3d0dfaaed130.gif

So its increasing steadily like so.

[panzarino]

You can create labels that extend past your last point, and it will appear blank where there are no points. By utilizing the .update() method, you can add datapoints. Example of adding a random point every second: http://codepen.io/zachpanz88/pen/JbbaPX?editors=0010#0.

[benspring]

Ah brilliant, thank you very much. This brings me onto a few more questions.

How can I remove labels using a system such as that? How would I remove the last 5 labels if the lable data length is over 20?

On the chartjs documentation I didn't see things such as "myChart.data.datasets[0].data.length", where can I view all of this?

Thank you again!

[etimberg]

@benspring when update() is called you can change anything about the data object.

You could do

if (myChart.data.labels.length > 20) {
  myChart.data.labels.splice(-5, 5);
}
myChart.update();

[benspring]

@etimberg Sorry what does: myChart.data.labels.splice(-5, 5); do?

Is there some documentation I am missing??

Thank you!

[panzarino]

@bendspring Splice is a built-in function of JS that works on arrays. There is information about .update in the prototype methods part of the docs. In addition, myChart.data is the data object that you passed when creating the chart, and it can be dynamically updated just as you would change data when creating a chart.

[benspring]

Thank you very much all! Really helped.

[benspring]

Right, I removed lots of questions as I solved them.

How can I make it so that if the scale passes 20, it displays it 1,5,15,20, instead of before 20 when its 1,2,3,4,5,6,7,8.... As when it gets above 20 and more data is being added it looks really squished.

To clarify, the x axis before 20 is 1,2,3,4,5,6..19,20 and when the graph eventually gets to 20, the scale changes to 1,5,15,20 etc... So its not as squished if that makes sense.

And I am using the code @zachpanz88 provided in his first reply.

Thank you.

[panzarino]

@benspring You can change the labels to 1, 5, 15, 20 and take the values that previously corresponded to those labels. Here is an example: http://codepen.io/zachpanz88/pen/VmmGOd?editors=0010#0. I have edited the example to increase fairly linearly (with some variation) so the end result of only 4 points is still accurate.

[benspring]

@zachpanz88 Thank you very much. I really appreciate all of your help.