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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Open link page when user click on each bar

Thread ID:

Created:

Updated:

Platform:

Replies:

141669 Dec 27,2018 03:55 AM UTC Jan 2,2019 09:49 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Chart
Muhammad Mirza Kamaludin
Asked On December 27, 2018 03:55 AM UTC

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 [Syncfusion]
Replied On December 31, 2018 07:31 AM UTC

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. 
 
Thanks. 
Dharani. 


Muhammad Mirza Kamaludin
Replied On January 2, 2019 07:48 AM UTC

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

Dharanidharan Dharmasivam [Syncfusion]
Replied On January 2, 2019 09:49 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;