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.
Unfortunately, activation email could not send to your email. Please try again.

Chart/Column

Thread ID:

Created:

Updated:

Platform:

Replies:

128997 Feb 20,2017 04:54 PM Feb 21,2017 07:14 AM ASP.NET MVC 1
loading
Tags: Chart
Laura Jordan
Asked On February 20, 2017 04:54 PM

Hi,

I am using the Chart/Column control and I want to open a detail view when the user clicks each bar, can you help me with that? I also need to format the Y axis as currency format, there is any way to do this?

Really appreciate the support,

Thanks.

Dharanidharan Dharmasivam [Syncfusion]
Replied On February 21, 2017 07:14 AM

Hi Laura, 

Thanks for using Syncfusion product. 

Query #1: I want to open a detail view when the user clicks each bar 
Response: Your requirement can be achieved as work around by using PointRegionClick event. This event will be triggered, when clicked on point in the series and you can set the chart model, point index, series index, x value and y value of the clicked point. We have displayed this in the alert box. 

 
And also we have performed drilldown action while clicking on the point. On drilldown chart with new data points will be show. Find the code snippet below. 
 
@(Html.EJ().Chart("container") 
//... 
.PointRegionClick("onclick") 
) 
 
function onclick(sender) { 
var seriesIndex = sender.data.region.SeriesIndex; 
        var pointIndex = sender.data.region.Region.PointIndex; 
        alert("xValue: " + sender.model._visibleSeries[seriesIndex]._visiblePoints[pointIndex].x + "\n" + 
                   "yValue: " + sender.model._visibleSeries[seriesIndex]._visiblePoints[pointIndex].y+ "\n" + 
                    "seriesIndex: " + sender.data.region.SeriesIndex + "\n" + "pointIndex: " +  
                     sender.data.region.Region.PointIndex) 
        document.getElementById("text").innerHTML = sender.model._visibleSeries[0]._visiblePoints[pointIndex].x; 
        if (sender.model.series[0].name == "Market") 
            $("#container").ejChart("option", { "drilldown": pieSeries(pointIndex) }); 
        document.getElementById("symbol").style.visibility = "visible";    } 
 
function pieSeries(index) { 
        if (index == 0) { 
            return { 
                title: { text: 'Automobile Sales in the SUV segment' }, 
                series: [{ 
                    points: [{ x: "Toyota", y: 8 }, { x: "Ford", y: 12 }, 
                             { x: "GM", y: 17}, { x: "Renault", y: 6}, 
                             { x: "Fiat", y: 3}, { x: "Hyundai", y: 16 }, 
                             { x: "Honda", y: 8 }, { x: "Maruthi", y: 10 }, 
                             { x: "BMW", y: 20 } 
                    ], 
                    name: 'SUV-Sale', labelPosition: 'outside', enableAnimation: true, 
                    marker: { 
                        dataLabel: { visible: true, connectorLine: { height: 40 }, font: { size: '12px', color: "#707070" } } 
                    } 
                }], 
                legend: { visible: false } 
            }; 
        } 
         //.. 
    } 

After Drilldown(1st bar): 

 

To return back to the original chart, click on the Sales by Category as mentioned in the above screenshot(Red coclored rectangle). 

Query #2:  I also need to format the Y axis as currency format 
Response: Your requirement can be achieved by using any of the below methods. 
 
Method 1: 
By using LabelFormat property in the primaryYAxis, you can achieve this. When c is specified, the number will be displayed in currency format based on the culture. By default, it will be displayed in dollar currency format, since the default culture is en-us. Find the code snippet below. 
 
ASP.NET MVC: 

@(Html.EJ().Chart("container") 
.PrimaryYAxis(pr=>pr.LabelFormat("c")) 
//... 
) 


Screenshot for labelFormat(“c”): 
 
Method 2:  
You can also achieve your requirement by using regular expression to perform string operations. Find the below code snippet. 

@(Html.EJ().Chart("container") 
axesLabelRendering: "axesLabels" 
//... 
) 
function axesLabels(sender) { 
                  if (sender.data.axis.orientation == "vertical") { 
                      var text = sender.data.label.Text.toString(); 
                      sender.data.label.Text = "£" + text.replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
                  } 
              } 


We have attached the sample, for your reference which can be downloaded from below link. 
 
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.

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.

;