We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Synchronized Cursor in multiple Charts

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


9 Replies

DD Dharanidharan Dharmasivam Syncfusion Team November 15, 2018 06:36 AM UTC

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. 
 
1st Chart 
$("#container").ejChart({ 
          //Other chart configurations 
 
          Enabled crosshair   
          crosshair: {visible: true, type: 'trackball',line: {color: "black"}}, 
          Events                              
          chartMouseMove: moveTrackball,  
          chartMouseLeave: discardTrackball 
   }); 
 
2nd 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: 
 
 
 
Thanks, 
Dharani. 



JB Jakob Brunner November 15, 2018 09:26 AM UTC

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


DD Dharanidharan Dharmasivam Syncfusion Team November 16, 2018 10:22 AM UTC

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. 
 
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: 
 
 
 
Hope this helps. 
 
Thanks, 
Dharani. 



JB Jakob Brunner November 19, 2018 08:15 AM UTC

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


KC Kalaimathi Chellaiah Syncfusion Team November 19, 2018 12:40 PM UTC

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} 
 
 
 

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

Regards, 
Kalai 
  



JB Jakob Brunner November 19, 2018 01:11 PM UTC

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


DD Dharanidharan Dharmasivam Syncfusion Team November 20, 2018 08:56 AM UTC

Hi Jakob,  
  
Thanks for your update. 
 
Queryis 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:  
 
 
 
Regards, 
Dharani. 



JB Jakob Brunner November 20, 2018 09:06 AM UTC

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?


DD Dharanidharan Dharmasivam Syncfusion Team November 21, 2018 01:09 PM UTC

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.  
 
 
 
Regards, 
Dharani. 


Loader.
Live Chat Icon For mobile
Up arrow icon