Graph with constant x axis and changing y axis

[JohnSnowTheDeveloper]

Is there a way determine a constant range for the X axis, and the values will be changed by the Zoom ?

For example – if I have 5000 points overall from year 2000 to 2017, and the range is 50, it will show me 5000/50 points “together” as 1 line. and if i’m at zoom level of 3000 points in the X axis, it will show me 3000/50 points “together”, and if the zoom level is very large, and I see only <50 points in the X axis, it will show me 50/50 = 1 points “together” – it’s the basic “resolution” like I have now – sorted by single days…

Currently i’m using this graph with zoomable option:
https://canvasjs.com/javascript-charts/multi-series-line-chart/

it’s great, but to implement what I want, I need to react to event of zooming on some X – range, and change the Data to present accordingly accumulated in range. How can I do it ?

• This topic was modified 7 years ago by JohnSnowTheDeveloper.

[Suyash Singh]

@johnsnowthedeveloper,

Based on selected range, you can filter the dataPoints, update it and render the chart. Please have a look at this jsfiddle.

___
Suyash Singh
Team CanvasJS

[JohnSnowTheDeveloper]

It looks good i’ll check it out. I also ment to accumulate the number so the bars will be fewer on full view, by i’ll try to do it using the range functionality available in the example. thanks.

[JohnSnowTheDeveloper]

How can I access the range? If I console log it it shows me that the range is undefined

console.log(e.axisX.viewportMaximum)
console.log(e.axisX.viewportMinimum)

The output is undefined

Ok I managed to figure it out, your example is not full. But thanks!

• This reply was modified 7 years ago by JohnSnowTheDeveloper.
• This reply was modified 7 years ago by JohnSnowTheDeveloper.

[Suyash Singh]

@johnsnowthedeveloper,

You can use the event parameter of rangeChanging() to access viewportMinimum and viewportMaximum. You can access axis as an array (e.axisX[0]), sorry for the inconvenience caused & we have updated jsfiddle for the same.

___
Suyash Singh
Team CanvasJS

[JohnSnowTheDeveloper]

Thank you

• This reply was modified 7 years ago by JohnSnowTheDeveloper.

[JohnSnowTheDeveloper]

How can I find my maximum Y value in the zoomed rate?

[Suyash Singh]

@johnsnowthedeveloper,

Please have a look at this jsfiddle.

___
Suyash Singh
Team CanvasJS