Synchronized Cursor in multiple Charts

[Jakob Brunner]

Hi,

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

[Dharanidharan Dharmasivam]

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. 

 

1^st Chart 

$("#container").ejChart({ 

          //Other chart configurations 

 

          Enabled crosshair   

          crosshair: {visible: true, type: 'trackball',line: {color: "black"}}, 

          Events                              

          chartMouseMove: moveTrackball,  

          chartMouseLeave: discardTrackball 

   }); 

 

2^nd chart 

$("#container2").ejChart( 

              chart configurations 

}); 

 

Add the required number of charts  

 

 

Method to show crosshair 

function moveTrackball(args) { 

        var x = args.data.location.x, y = args.data.location.y; 

        var chart1_ID = "container", 

        chart2_ID = "container2", chart3_ID = "container3", chart4_ID = "container4", 

        Getting instance of chart 

        targertChart = $("#" + chart1_ID).ejChart("instance"); 

        targertChart.mousemoveX = x, targertChart.mousemoveY = y; 

         Shown the crosshair 

        targertChart.chartTrackball(targertChart, { x: x, y: y }); 

 

         Similarly, crosshair can be displayed for all other charts   

    } 

 

 

Method to remove crosshair 

 

function discardTrackball() { 

        $("#container_svg_CrosshairGroup").remove(); 

      //… 

} 

 

 

Screenshot: 

 

 

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

 

Thanks, 

Dharani. 

[Jakob Brunner]

Hi, 

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

[Dharanidharan Dharmasivam]

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. 

[Jakob Brunner]

Thank you very much, this is exactly what i need and it works perfectly. 
I have one additional short question, is it possible to set zoomPosition and zoomFactor without redrawing the whole chart? 

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

best regards,
Jakob

[Kalaimathi Chellaiah]

Hi Jakob, 

 

Query: is it possible to set zoomPosition and zoomFactor without redrawing the whole chart?  

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. 

Code Snippet: 

//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 

  

[Jakob Brunner]

Hi 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

[Dharanidharan Dharmasivam]

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.  

 

Code Snippet: 

var chart_ID_1 = "container",  

       chart_ID_2 = "container2";  

  

$("#"+chart_ID_1).ejChart({  

            Other chart configurations  

         load: "chartload",         

});  

  

Same for other charts  

 

load event for chart 

function chartload(args){ 

        args.model.primaryXAxis.zoomFactor = 1000/args.model.series[0].points.length; 

        args.model.primaryXAxis.zoomPosition = 0; 

 } 

 

Here we have shown only 1000 points in the view port out of 200000 data. This can be changed based on your scenario. 

 

Screenshot:  

 

 

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

 

Regards, 

Dharani. 

[Jakob Brunner]

Hi,

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?

[Dharanidharan Dharmasivam]

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: 

//first chart mouse move event 

function move(args) { 

                var chartObj = $("#container2").ejChart("instance"); 

                var chartObj1 = $("#container").ejChart("instance"); 

                if (!chartObj.oPreviousCoords && chartObj1.doPan) { 

                chartObj.oPreviousCoords = chartObj1.oPreviousCoords; 

                } 

//Assign the first chart pan in the second chart 

                chartObj.doPan = chartObj1.doPan; 

                var evt =  {target : document.getElementById("container2"), pageX : args.data.pageX, pageY : args.data.pageY, type :'mousemove'}; 

                if (chartObj1.doPan) { 

                  chartObj.chartMouseMove(evt);             

                } 

                } 

//first chart loaded event 

    function loaded(args) { 

                args.model.zoomed = true; 

                var chartObj = $("#container").ejChart("instance"); 

                chartObj.panning = true; 

                 

    } 

//second chart loaded event 

                function loaded1(args) { 

                args.model.zoomed = true; 

    var chartObj = $("#container2").ejChart("instance"); 

                chartObj.panning = true;  

    } 

 

 

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.