Open menu when user click on each bar

Question

Hello,

I am using the Chart/Column control and I want the user to have access to a menu when they click on each bar, where the user can see details relative to that bar, change to different type of series, hide and show each bar individual. My main problem here is select each bar individual and open a menu after left click on it. I would appreciate if you could help me with this.

Thank you for your attention!

Dharanidharan Dharmasivam · Answer

Hi João, 

Thanks for using our products. 

We have analyzed your query. Your requirement can be achieved as workaround using PointRegionClick event. In this event we can able to get the point on which we have clicked and by using menu component we have achieved your requirement. Find the code snippet to below to achieve this scenario. 
 




ASP.NET MVC: 

@(Html.EJ().Chart("container") 
     //... 
     .PointRegionClick("chartPointClick") 
) 
 
function chartPointClick(sender) { 
        //Create div element dynamically 
        var menu = document.createElement("div"); 
        menu.id = "shipDetails"; 
       
    //Data Source for menu component 
     var data = [ 
                      //... 
                     ]; 
 
  $("#shipDetails").ejMenu({ 
        //... 
  }) 
} 


Screenshot: 
  

Sample for reference can be find from below link. 
http://www.syncfusion.com/downloads/support/forum/135094/ze/chartSample-1181001397  
 
Kindly revert us, if you have any concerns.  

Thanks, 
Dharani.

João · Answer

That is just what i was looking for.Thank you for the support Dharani!

João · Answer

I have been trying to replicate what you did with "Point Visibility" and apply it to the series but i haven't succeed.

else if (args.text == "Hide Serie") {

chart.model.preRender = function (arg) {

arg.model.series[seriesIndex].visible = false;

}

I am trying to add the plot of linear regression and mean, to the option menu. I know that the linear regression i can accomplish with trendlines.

I want also to be able to plot objectives(line), in order to be able to compare with the mean.

Thank you for all the help,

João.

Dharanidharan Dharmasivam · Answer

Hi João, 
 
Thanks for the update. 
 
We have analyzed your query. Find the response for your queries below. 
 




Query 

Response 


I have been trying to replicate what you did with "Point Visibility" and apply it to the series but i haven't succeed. 

From the provided code snippet, we found that you have specified visible property as false to hide the series. But to hide the series, you need to specify the series.visibility as hidden. Find the code snippet below to achieve this scenario. 





ASP.NET MVC: 

else if (args.text == "Series Visibility") { 
       chart.model.series[seriesIndex].visibility = chart.model.series[seriesIndex].visibility ==           
                                     "visible" ? "hidden" : "visible"; 
} 


Here we have toggled the visibility of the series. You can change this with respect to your requirement. 



I am trying to add the plot of linear regression and mean, to the option menu. I know that the linear regression i can accomplish with trendlines. 

We have added trendline to the chart and added the menu for toggling the trendline visibility. Find the code snippet below to achieve this requirement. 





ASP.NET MVC: 

else if (args.text == "Trendline Visibility") { 
         chart.model.series[seriesIndex].trendlines[0].visibility =       
                      chart.model.series[seriesIndex].trendlines[0].visibility == "visible" ? "hidden" : "visible"; 
} 


You can change this scenario with respect to your requirement. For more information in trendlines, kindly follow the link below. 
https://help.syncfusion.com/aspnetmvc/chart/trendlines  



I want also to be able to plot objectives(line), in order to be able to compare with the mean. 

We have added mean values in the menu and by selecting the mean value, a line will be drawn for the selected mean value over the chart. Find the code snippet to achieve this requirement. 






else if (args.text == "4" || args.text == "10" || args.text == "14") { 
               chart.model.primaryYAxis.stripLine = [] 
               chart.model.primaryYAxis.stripLine.push({ start: parseInt(args.text), end: parseInt(args.text)      
                               + 0.1, visible: true, borderWidth: 0, color: "#13ad05" }); 
} 


Screenshot before adding line for mean value: 
  

Screenshot after adding line for mean value: 
  

Sample for reference can be find from below link. 
http://www.syncfusion.com/downloads/support/forum/135094/ze/chartSample1072578194  
 
If this is not your exact requirement, kindly revert us with more information on your requirement or with some screenshots for your requirement. This will be helpful in further analysis and provide you the solution sooner. 



Thanks, 
Dharani.

João · Answer

Thank you again Dharani!It worked out, but i want to know if is possible to show a tooltip relative to the stripline, where i can see the start value?

Dharanidharan Dharmasivam · Answer

Hi João,  
 
Thanks for the update. 
 
We have analyzed your query. We have prepared a sample in which  we have displayed tooltip for the line drawn for the mean value. We have achieve this scenario using the ChartMouseMove event. Kindly find the code snippet to achieve this requirement. 
 




ASP.NET MVC: 

@(Html.EJ().Chart("container") 
        //... 
        .ChartMouseMove("chartMouseMoved") 
              
 ) 
 
   function chartMouseMoved(sender) { 
        var meanTooltip = document.getElementById("meanTool"); 
        //... 
        if (sender.data.id == this._id + "_svg_StriplineOver" || sender.data.id == this._id + "_svg_StriplineOver_striplineRect_1_0") { 
            var ser = [], series = sender.model.series[0]; 
            
            //Get the closest point using getNearestPoint method 
            var nearPoint = getNearestPoint(ser, series, sender.data.location.x, sender.data.location.y); 
             
            //Specify the required text to display in tooltip 
            meanTooltip.innerText = nearPoint.point[0].x + " : " + sender.model.primaryYAxis.stripLine[0].start; 
 
           //Specify the location for tooltip and required CSS styles 
            $("#meanTool").css({ 
                'top': sender.data.location.y + sender.model.m_AreaBounds.Y, 
                'left': sender.data.location.x + sender.model.m_AreaBounds.X, 
                //... 
            }) 
        } 
    } 
 


Here in the chartMouseMove event, we can able get the location of mouse pointer, current target element. with these information we have achieved your scenario. 

Screenshot: 
  

Sample for reference can be find from below link. 
http://www.syncfusion.com/downloads/support/forum/135094/ze/chartMenu-560637448  
 
If this is not your exact requirement, kindly revert us with more information on the query “start value?” or with some screenshots of your exact requirement. This will helpful in further analysis and provide you the solution sooner. 

Thanks, 
Dharani.