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.

Drill Down chart using model data binding

Thread ID:

Created:

Updated:

Platform:

Replies:

117026 Jul 22,2014 07:00 AM Jul 29,2014 06:11 AM JavaScript 3
loading
Tags: ejChart
Rakhesh Rao
Asked On July 22, 2014 07:00 AM

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 [Syncfusion]
Replied On July 23, 2014 04:50 AM

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
Replied On July 25, 2014 03:41 AM

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 06:11 AM

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


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.

;