Drill Down chart using model data binding

[Rakhesh Rao]

Hi,

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]

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.

Regards,

Akbar Basha KM

Attachment: MvcApplication2_665bab39.zip

[Rakhesh Rao]

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]

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.

ControllerDataBinding.zip

Please refer the following code snippet to achieve this.

<code>

[CS]

        //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; }

    }

[CSHTML]

        @(Html.EJ().Chart("chart1").Series(

                            ser=>ser.Name("Market").Marker(m=>m.Visible(false).DataLabel(dt=>dt.Visible(true)))

                            .Type(SeriesType.Pie).XName("XName").YName("YName").Query("ej.Query()")

                           

                            //binding data from controller to chart series

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

                   .PointRegionClick("onclick")

                   .Legend(leg=>leg.Visible(false))

                   .Size(sz=>sz.Width("600px").Height("600px"))

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

</code>

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.

 Regards,

Anand