Open link page when user click on each bar

[Muhammad Mirza Kamaludin]

Hello,

I am using the Chart/Column control and I want the user to have access to a new page linked when they click on each bar.

Can you help me with this provided code.

 

@(Html.EJS().Chart("graph_bar").Height("258").Width("743").Series(sr =>

                        {     

  sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Marker(ViewBag.Marker).XName("x").YName("yValue2").DataSource(ViewBag.dataSource).Name("Red").Width(2).Add();

  sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Marker(ViewBag.Marker).XName("x").YName("yValue1").DataSource(ViewBag.dataSource).Name("Yellow").Width(2).Add();

sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Marker(ViewBag.Marker).XName("x").YName("yValue").DataSource(ViewBag.dataSource).Name("Green").Width(2).Add();

                        }

                        ).LegendSettings(legend => legend.Width("104%")

                        ).PrimaryYAxis(px => px.Minimum(0).Maximum(50).Interval(10).LabelStyle(ViewBag.Style).LineStyle(ViewBag.Line).MajorTickLines(ViewBag.Line).MajorGridLines(ViewBag.line).LineStyle(ViewBag.lineStyle)

                        ).PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(ViewBag.line).MinorGridLines(ViewBag.minorGridLines)

                        ).LegendSettings(legend => legend.Alignment(Syncfusion.EJ2.Charts.Alignment.Center)

                        ).Tooltip(tt => tt.Enable(true)).ChartArea(area => area.Border(ViewBag.ChartBorder)).Title("Statistic by Mode (BL Manifest)").Load("load").Render()

                    )

[Dharanidharan Dharmasivam]

Hi Muhammad, 

 

Greetings from Syncfusion. 

 

We have analyzed the requirement. This can be achieved using the PointClick event. This event will be triggered once clicked on the bar, so using this event we can navigate to required link. We have created a sample in which when we have navigated to our Syncfusion sites. This can be changed based on your scenario. Find the code snippet below to achieve this. 

 

[ChartFeatures.cshtml] 

 

@(Html.EJS().Chart("graph_bar").PointClick("Navigate") 

  Other configuratins 

) 

 

function Navigate(args) { 

        here based on the series index, we have navigated to different sites 

        if (args.seriesIndex === 0) { 

            window.open("https://www.syncfusion.com/", '_blank'); 

        }  

       //... 

    } 

 

 

 

Sample for reference can be found below. 

http://www.syncfusion.com/downloads/support/forum/141669/ze/chartSample-895725748  

 

Thanks. 

Dharani. 

[Muhammad Mirza Kamaludin]

Hi Dharanidharan, 

Thank you for help. Amazing and wonderful solution you provide there. Appropriate it much. :)

[Dharanidharan Dharmasivam]

Hi Muhammad,  

 

Most welcome. We are always happy in assisting you. Kindly get in touch with us, if you would require further assistance. 

 

Thanks, 

Dharani. 

[Sean McGuiggan]

I need a similar solution but in asp.net web page. Can we identify particular item clicked from example in the attached solution we have difference colors in y-axis, red, yellow and green. We can identify these in server side event

[Durga Gopalakrishnan]

Hi Sean, 

As of now, we don’t have support to trigger the OnClientPointRegionClick event in server side. Please let us know if you have any concerns. 

Regards, 

Durga G