Sticky line marker in ejChart?

Question

Is it possible to have the chart line marker sticky once clicked? ie. have the line stay put after clicking on the chart?Alternatively, can I draw the line myself if I know where to put it?

Dharanidharan Dharmasivam · Answer

Hi Pete, 

Thanks for using Syncfusion products. 

We have analyzed your query. Find the response for your queries below. 





Query 

Response 


Is it possible to have the chart line marker sticky once clicked? ie. have the line stay put after clicking on the chart? 

Yes, your requirement can be achieved as workaround using chartClick event. Kindly find the code snippet below to achieve this requirement.  





JS: 

    $("#container").ejChart({ 
             //... 
             chartClick:'chartRegionClick' 
    }); 

    function chartRegionClick(sender){ 
              var bounds = sender.model.m_AreaBounds, 
                     svgElement = document.getElementById('container_svg'), 
              //... 
              var lineElement = createLine(x1, x2, y1, y2); 
              svgElement.appendChild(lineElement); 
              chartEle.appendChild(svgElement); 
   } 
               
   function createLine(x1, x2, y1, y2){ 
              var lineEle = document.createElementNS('http://www.w3.org/2000/svg', 'line'); 
              lineEle.setAttribute('x1', x1); 
              //... 
              return lineEle 
    } 

Screenshot: 
  

Sample for reference can be find from below link. 
http://jsplayground.syncfusion.com/qnhcu0lk  



Alternatively, can I draw the line myself if I know where to put it? 

Yes, you can able to draw a line in chart  if you know the position as like above workaround. 

Kindly revert us, if you have any concerns. 

Thanks, 
Dharani.

Pete Reeves · Answer

That's awesome, thanks for the reply.One tiny extra question here, we have a crosshair/trackball line which snaps to the tick points. Is there a way of extracting the pre-calculated location of that line so I can draw it again? I can probably figure out my own calc, but I know it must already be in the object somewhere.Thanks again,Pete.

Dharanidharan Dharmasivam · Answer

Hi Pete, 

Thanks for the update. 

We have analyzed your query. We have achieved your requirement as a workaround using mouseMoveEvent to get the nearest point location. Kindly find the code snippet to achieve this requirement. 





JS: 

$("#container").ejChart({ 
          //… 
         chartMouseMove:'mouseMove', 
} 

function mouseMove(sender) { 
              var ser = [], series = sender.model.series[0]; 
                
                //Get the closest point location using getNearestPoint method, so that you can draw a line  
              var nearPoint = getNearestPoint(ser, series, sender.data.location.x, sender.data.location.y); 
 
              alert("X location: " + nearPoint.point[0].location.X + "
Y Location: " +  
                      nearPoint.point[0].location.Y); 
} 


Here using the chart mouse move event, we have obtained the location of nearest point and displayed an alert box with the locations. You can change this with respect to your requirement. 

Sample for reference can be find from below link. 
http://jsplayground.syncfusion.com/vbzmp2by  

If this is not your exact scenario, kindly revert us with more information on your query. 

Thanks, 
Dharani.