Home forums Using CanvasJS Graph with constant x axis and changing y axis

This topic contains 7 replies, has 2 voices, and was last updated by  Suyash Singh 1 week, 6 days ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17453

    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 ?

    #17465

    Suyash Singh
    Moderator

    @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

    #17480

    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.

    #17482

    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!

    #17502

    Suyash Singh
    Moderator

    @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

    #17507

    Thank you

    #17510

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

    #17515

    Suyash Singh
    Moderator

    @johnsnowthedeveloper,

    Please have a look at this jsfiddle.

    ___
    Suyash Singh
    Team CanvasJS

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.