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

Drill Down chart using model data binding

Thread ID:





117026 Jul 22,2014 11:00 AM UTC Jul 29,2014 10:11 AM UTC JavaScript 3
Tags: ejChart
Rakhesh Rao
Asked On July 22, 2014 11:00 AM UTC

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.

Akbar Basha K M [Syncfusion]
Replied On 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

Rakhesh Rao
Replied On 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

Anandaraj T [Syncfusion]
Replied On 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.




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