Automatically updating y axis on dynamic charts

• April 13, 2020 at 4:12 am #28907
  
  nonprohacker

  I have a dynamic chart that has y values greater than 10,000. But, the y axis starts at 0 so my data looks like a linear line. I want the y axis to automatically update to be +50 and -50 based on the new y value that is generated. I tried setting a max and min y value, but if the data goes outside that range, you can’t see the data. I also tried the zoom and view port, but there is a new y value every second and I want the x axis to be able to update automatically and not start at 0, so I can properly see my data.

  April 13, 2020 at 7:31 pm #28919
  
  Manoj Mohan

  @nonprohacker,

  axisY range gets updated according to the latest dataPoint y value and it seems to be working fine.

  Can you kindly create and share a JSFiddle reproducing the issue you are facing so that we can understand your scenario better and help you out?

  —-
  Manoj Mohan
  Team CanvasJS

  April 14, 2020 at 3:53 am #28929
  
  nonprohacker

  I tried making a jsfiddle, but it wasnt working. Basically, my problem is that I am trying to make a graph that doesn’t go below 0. But, If It gets into values of 4000, then the y axis only shows whats from 0 up to wherever it is. Is there a way to make it so that when the y values are around a high number, like 4000, the y axis will update so that it isn’t static at 0. Here is a jsfiddle that I modified that demonstrates this. (check 2nd chart) https://jsfiddle.net/q945bvej/2/ I want it to be automatically zoomed in closer to where the data is so you can see every little change, but I don’t know how to do that.

  • This reply was modified 4 years, 7 months ago by nonprohacker.
  April 14, 2020 at 3:59 am #28931
  
  nonprohacker

  here is an example of what happens (see chart 2)https://jsfiddle.net/q945bvej/2/ I need it so that the y value can’t go below 0. But I also need it so that if the y value is a large number, that the chart will automatically zoom in so you can see the changes better than just a linear line. Is there some way to modify the y axis to a range between each newly generated data point? So, if the y value generated is 10,000 then the y axis range would be from 9000 to 11000. Then, if the next point is 5,000 the y axis range would automatically zoom to 4,000 and 6,000. I feel as if I am not explaining this well.

  • This reply was modified 4 years, 7 months ago by nonprohacker.
  • This reply was modified 4 years, 7 months ago by nonprohacker.
  April 15, 2020 at 5:51 pm #28954
  
  Manoj Mohan

  @nonprohacker,

  When the variation of y-values are too small, it’s difficult to visualize the variation of values. To overcome this, includeZero property can be used which sets axis range such that the difference becomes prominently visible.

  Setting includeZero to false should work fine in your case. Please take a look at this updated JSFiddle.

  —-
  Manoj Mohan
  Team CanvasJS

  April 16, 2020 at 10:35 am #28967
  
  nonprohacker

  Thank you so much for your help! This was the exact thing I needed. Thank you!