Draggable chart and accessing endpoints

• August 13, 2020 at 9:00 pm #30630
  
  gigfinance

  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!

  August 14, 2020 at 8:53 pm #30642
  
  Shashi Ranjan

  @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

  August 14, 2020 at 9:00 pm #30643
  
  gigfinance

  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,

  August 17, 2020 at 6:55 pm #30676
  
  Shashi Ranjan

  @gigfinance,

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

  —
  Shashi Ranjan
  Team CanvasJS

  August 24, 2020 at 11:54 pm #30807
  
  gigfinance

  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.

  August 26, 2020 at 7:16 pm #30827
  
  Shashi Ranjan

  @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

  August 26, 2020 at 8:56 pm #30832
  
  gigfinance

  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

  August 31, 2020 at 7:12 pm #30875
  
  Shashi Ranjan

  @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

  September 3, 2020 at 10:51 am #30924
  
  gigfinance

  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!

  September 8, 2020 at 6:53 pm #30971
  
  Shashi Ranjan

  @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