Home Forums Chart Support Draggable chart and accessing endpoints

Draggable chart and accessing endpoints

Viewing 10 posts - 1 through 10 (of 10 total)
  • #30630

    Hi CanvasJS team, running into a problem with standing up multiple draggable charts side by side, and how to access the new dragged endPoint as a global variable.

    I’ve taken a previously written draggable chart jsfiddle, and slightly modified it to meet my use case. But any mouse move seems to only affect chart 2, and not chart 1. Can you suggest revisions or help on the code below?
    https://jsfiddle.net/3ytp0aez/23/

    And for accessing the new dragged endpoint, could I access it with something like “window.endpoint = chart.options.data[0].dataPoints[0].y” to make it endpoint a global variable accessible by other applications?

    Thank you!

    #30642

    @gigfinance,

    It seems like you are overriding the variable of the first chart with the second chart because of which when you try to update the dataPoints of the first chart, the changes are getting reflected in second chart instead of first. Therefore while using multiple charts on a page, we suggest using a different variable for each chart so that the individual chart-options can act independently. Please take a look at this updated JSFiddle for the same.


    Shashi Ranjan
    Team CanvasJS

    #30643

    Thanks Shashi for clarifying, so looks like I just needed to duplicate the jquery function for each chart1 + 2 to utilize the mouseup/mousedown interactions.

    $(“#chartContainer2 > .canvasjs-chart-container”).on({

    Do you have any suggestions on how to making the endpoints of the dragged elements into a global variable that I can use in a separate calculation? For example, I drag chart1.dataPoint y to 10, and use that 10 to calculate a balance (say fn(10)) that is displayed in a different canvasJS chart.

    Thanks,

    #30676

    @gigfinance,

    Please take a look at this article for more information on using local and global variables.


    Shashi Ranjan
    Team CanvasJS

    #30807

    Thanks Shashi and team, I’ve been able to modify and make changes based on your suggestions. They’re very helpful.

    I did run into an issue with the draggable chart. Is there a limit to the value for draggable points? In the previous examples I had set it to y-min to be -100, but my use case actually has a range of minimum of up to -57,000, and want to make increments on 100 instead of 1. See the updated JSFiddle where I’m having trouble making the chart draggable.

    Thanks in advance, and apologies if these are silly questions.

    #30827

    @gigfinance,

    Please take a look at this JSFiddle which shows an example of increasing or decreasing the dataPoint value(while dragging) based on the nearest interval.


    Shashi Ranjan
    Team CanvasJS

    #30832

    Thanks Shashi for writing and showing that new function getNearestValue.

    My expected behavior is to move in intervals of 100, and in the range of 100 – 60,000. But the current behavior moves in 10 up to 100, then 20 up 200, then 100 up to 1000, then 1000 up to 10000. So it’s not a fixed interval of 100 throughout. I’m also unable to redrag the bar after it passes a certain mark e.g. 1000.

    Could you take a look again to see what changes need to be made or if there’s a known limitation to the draggable chart past a certain yvalue?

    Thanks!
    Kyle

    #30875

    @gigfinance,

    The JSFiddle shared above shows you how to round off the dataPoint value based on the nearest interval. You can use similar apporach to round it to nearest 100s or 1000s as you drag. Please refer this Stack Overflow thread for more information on rounding a value to nearest 100s.


    Shashi Ranjan
    Team CanvasJS

    #30924

    Hi Shashi, thank you for providing an updated information on the rounding. I’ve been able to implement it but am still having trouble with the limit. As described before: I’m unable to redrag the bar after it passes a certain mark e.g. 1000.

    Could you take a look again to see what changes need to be made or if there’s a known limitation to the draggable chart past a certain yValue?

    Thanks!

    #30971

    @gigfinance,

    Can you kindly create updated JSFiddle reproducing your current use-case so that we look into the updated code, understand the scenario better, and help you resolve?


    Shashi Ranjan
    Team CanvasJS

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

You must be logged in to reply to this topic.