Synchronized Cursor in multiple Charts

we basically have up to 32 charts on our page vertically aligned and need to place a cursor that is synchronized between all those charts. 

Using an additional series on a separate Y-Axis as cursor ist not an option as long as a total refresh of all charts is needed to update this series, as it slows down performance way to much. Will there be a feature to add placeable fixed cursors in charts in the future? For now we also could settle using the trackball cursor if there is a way to synchronize it between charts in real time and lag free.

     multiple vertically aligned charts, where we need a placeable and fixed cursor synchronized on all charts

best regards
Jakob

Hi Jakob, 

 

Greetings from Syncfusion. 

 

We have analyzed your query your requirement can be achieved using the crosshair feature with chartMouseMove and chartMouseLeave events. Using the chartMouseMove event we can show the crosshair for all the charts and using the chartMouseLeave events we have removed the crosshair. We have used four charts and you need to trigger the above events in all charts. You can change this with respect to your scenario. Find the code snippet below to achieve this requirement. 

 

 

Screenshot: 

 

 

Sample: https://jsplayground.syncfusion.com/o5hhseyb  

 

Thanks, 

Dharani. 

first of all thank you very much for this answer and the provided code, it works well with the amount of datapoints you used, however, in our application we have up to 500.000 datapoints in one chart. Is it possible to use the crosshair with trackball when having huge amounts of datapoints like we do? I tried the trackball feature with only one chart and 100.000 datapoints and it is not working smoothly. 

Looking forward to your reply and thank you again for the provided answer
Best regards,
Jakob

Hi Jakob, 

 

We have analyzed your query. Now we have achieved the requirement using the stripline feature of the axis. Initially we have rendered the stripline and we have moved that using the chartMouseMove event. We have two charts and used 200000 points for each chart. For more information on stripline, kindly find the help document from below. 

https://help.syncfusion.com/js/chart/striplines  

 

Find the code snippet to achieve this requirement. 

 

var chart_ID_1 = "container",         chart_ID_2 = "container2";    $("#"+chart_ID_1).ejChart({              primaryXAxis:{                    Initialized stripline                    stripLine:[{start:5000, end:4500, width: 2, borderColor: "red",visible: true}]              },               Other chart configurations               chartMouseMove: "moveStripLine",          });    Same for other charts    Method to move stripline  function moveStripLine(args) {        var verticalLine = $("#"+chart_ID_1+"_svg_StriplineOver_striplineRect_0_0")[0],            verticalLine2 = $("#"+chart_ID_2+"_svg_StriplineOver_striplineRect_0_0")[0];         verticalLine.setAttribute("x",args.data.location.x.toString());         verticalLine2.setAttribute("x",args.data.location.x.toString());      }

 

 

Screenshot: 

 

 

Sample: https://jsplayground.syncfusion.com/jab310qh  

 

Hope this helps. 

 

Thanks, 

Dharani. 

Im looking forward to your answers and thank you again, for your help so far, it is highly appreciated.

best regards,
Jakob

We have analyzed your query and we can able to achieve this requirement by setting zoomFactor and zoomPosition in axis. zoomFactor and zoomPosition values resides between 0 to 1. Chart provides scrollbar support to view the other portions of chart area which is not shown in the view port when zoomed, by setting true to enableScrollbar option in zooming. 

//Zoomfactor and zomm position  primaryXAxis:{  zoomFactor: 0.3, zoomPosition: 0.4, ..  }    //enable zoomed scrollbar  zooming:{enableScrollbar: true}

 

Sample: https://jsplayground.syncfusion.com/i0rfstys 

Kindly revert us, if you need more information about chart. 

Regards, 

Kalai 

  

thank you very much for your fast answer, this is not exactly what i need, i need to set zoomFactor and zoomPosition "in realtime"´. In the given example i would need to have both charts zoomLevel and zoomPosition synchronized, if that is possible.

Best regards,
Jakob

Hi Jakob,  

  

Thanks for your update. 

 

Query: is it possible to set zoomPosition and zoomFactor in real time?   

 

We have analyzed your query and we can achieve this requirement by setting zoomFactor and zoomPosition for axis through load event dynamically. Load event triggers before chart renders and the argument contains the points. We can set axis zoom factor value based on this data point length in load event. If we set zoom position value as zero, then the scrollbar will be placed at the start axis. Based on your scenario you can change zoom factor and zoom position in real time. Chart provides scrollbar support to view the other portions of chart area which is not shown in the view port when zoomed or when the zoom factor and position varies, by setting true to enableScrollbar option in zooming.  

this still is not exactly what i need, i need to set zoomFactor and Position, after the chart is initialized. As an Example, if i set the zoomPosition via the scrollbar in one chart, i want to set it in the other chart as well. And i would prefer not to use the scrollbar but the panning with mouse feature.

Thank you for you patience and your concern, best regards
Jakob

P.S is it just my setup or is the scrollbar not working properly, as it gets stuck sometime and is not movable on drag?

Hi Jakob,  

  

 

Thanks for your update. 

 

Query 1: Synchronized panning in two charts 

 

We have analyzed your requirement with provided information. We have created sample for, if we pan the first chart, then the panning is applied in second chart using loaded and chartMouseMove event. We can enable panning without using toolbar items. In loaded event, initially get the chart instances then set panning and zoomed values to true. Then we have initialized chartMouseMove event in the first chart, using this event we can pan the second chart.  

 

Code Snippet: 

 

 

Query 2: Is able to set zoom factor and zoom position after initialized the chart? 

 

We are not aware of your exact requirement to set zoom factor and zoom position after initialized chart. Kindly provide the more information, this will be much helpful in further analysis and provide you the solution sooner.  

 

Sample: https://jsplayground.syncfusion.com/x31gtaou 

 

 

Regards, 

Dharani.