Chart/Column

[Laura Jordan]

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]

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(1^st 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. 

http://www.syncfusion.com/downloads/support/forum/128997/ze/mvcSample40333897  

 

Thanks, 

Dharani.