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. Image for the cookie policy date
close icon

Drill Down chart using model data binding

Can you send me Sample example on drill chart using model data binding, i mean bind the data from the controller to cshtml through json data .
send me sample using visual studio mvc sample.

3 Replies

AB Akbar Basha K M Syncfusion Team July 23, 2014 08:50 AM UTC

Hi Rakhesh,

Thanks for using Syncfusion Products.

We have prepared a sample based on your requirement for drilldown chart using JSON data and you can find the sample below in the attachment.

Please let us know if this helps.


Akbar Basha KM

Attachment: MvcApplication2_665bab39.zip

RR Rakhesh Rao July 25, 2014 07:41 AM UTC

Hi Akbar,

in the example which you had given drill-down functions are fixed but in my case it varies. actually i want to fetch the data from the database and prepare the data for all main chart and drill chart in the controller class and return that to view . is it possible to do like this , if yes can you send me the example for this .
like below 
you can find below sample snippet for high charts where they are preparing data in controller instead of java script file.
 Highcharts chart1 = new Highcharts("chart1")
                .InitChart(new Chart { PlotShadow = false, PlotBackgroundColor = null, PlotBorderWidth = null })
                .SetTitle(new Title { Text = "Customer Product Share" })
                .SetTooltip(new Tooltip { PointFormat = "{series.name}: <b>{point.percentage}%</b>" })
                .SetPlotOptions(new PlotOptions
                    Pie = new PlotOptionsPie
                        AllowPointSelect = true,
                        Cursor = Cursors.Pointer,
                        DataLabels = new PlotOptionsPieDataLabels
                            Enabled = true,
                            Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
                        ShowInLegend = true,
                        Size = new PercentageOrPixel(72, true)
                .SetSeries(new Series
                    Type = ChartTypes.Pie,
                    Name = "Customer Product Share",
                    Data = new Data(breakup)
steps:1)fetch the data 2) prepare the data for charts and send it as json data.

thanks in advance.

Attachment: Index_6034e6c1.zip

AT Anandaraj T Syncfusion Team July 29, 2014 10:11 AM UTC

Hi Rakhesh,

Thanks for the update.

We have created a simple sample to bind data from controller to Chart with drill down feature. The sample can be downloaded from the following link.


Please refer the following code snippet to achieve this.



        //Action method for populating chart data

        public ActionResult GetData()


            List<ChartData> result = new List<ChartData>();

            Random r = new Random();

            for (int i = 0; i < 3; i++)           

                result.Add(new ChartData() { XName = i, YName = r.Next(40, 60) });           

            return Json(result, JsonRequestBehavior.AllowGet);



    //Class for storing chart data in list

    public class ChartData


        //A property for X-value of chart series

        public double XName

        { get; set; }


        //A property for Y-value of chart series

        public double YName

        { get; set; }







                            //binding data from controller to chart series

                            .DataSource(service=>service.URL(Url.Action("GetData", "ChartData"))).Add())




                   .Title(t1=>t1.Text("Average Sales Comparison")))


For more information about data binding and drill down, please refer our online documentation in the following link.

Remote Databinding: http://help.syncfusion.com/ug/js/documents/remotedata.htm

Drilldown:   http://help.syncfusion.com/ug/js/documents/drilldown.htm

Our online sample for databinding and drill down can be found in the following link:

Databinding:  http://mvc.syncfusion.com/demos/web/Chart/RemoteData

Drilldown:  http://mvc.syncfusion.com/demos/web/Chart/DrillDown

 Please let us know if you have any concern.



Live Chat Icon For mobile
Up arrow icon