dynamic Series in chart area

[Carlos Sousa]

Hello, i need help to convert sample demo chart/area in dynamic series.

 @(Html.EJ().Chart("container").ChartArea(cr => cr.Border(ab => ab.Color("transparent")))
        .PrimaryXAxis(ax => ax.MajorGridLines(mr => mr.Visible(false)).MajorTickLines(mt => mt.Visible(false))
        .Title(tl => tl.Text("Year")).Range(ra => ra.Max(2000).Min(1900).Interval(10)))
        .PrimaryYAxis(pr => pr.AxisLine(ax => ax.Visible(false)).MajorTickLines(mt => mt.Visible(false))
        .Title(tl => tl.Text("Sales Amount in Millions")).Range(ra => ra.Max(5).Min(2).Interval(0.5)))
        .Series(sr =>
            {
                sr.Points(pt =>
                    {
                        pt.X("1900").Y(4).Add();
                        pt.X("1920").Y(3.0).Add();
                        pt.X("1940").Y(3.8).Add();
                        pt.X("1960").Y(3.4).Add();
                        pt.X("1980").Y(3.2).Add();
                        pt.X("2000").Y(3.9).Add();
                    }).Name("Product A").Type(SeriesType.Area).EnableAnimation(true)
                      .Border(s1B => s1B.Color("transparent")).Opacity(0.5).Fill("#69D2E7").Add();

I've read several articles but not sucess, exemple: http://help.syncfusion.com/web

    @(Html.EJ().Chart("container").ChartArea(cr => cr.Border(ab => ab.Color("transparent")))                              

        .Series(sr =>

        {      

            sr.Name("ProductName").Type(SeriesType.Area).EnableAnimation(true)

        .Tooltip(tt => tt.Visible(true))

        //    .Border(s1B => s1B.Color("transparent")).Opacity(0.5).Fill("#69D2E7")  //need generate auto and name labels product x, y ...z

        .DataSource((System.Collections.IEnumerable)ViewBag.datasource)

        .XName("ProductName")

        .YName("Value")

        //.XAxisName("ProductName")

        .YAxisName("Value").Add();

        })

thank for help.

Carlos

[Vinothkumar Arumugam]

Hi Carlos,
Thanks for using Syncfusion products.
We have analyzed your query. To dynamically change any values in chart you need to call the redraw() method after the change in chart values.
You can achieve your requirements by applying following code snippet.
Code Snippet [MVC]: HomeController.cs

·         Create Chart data model as follows

      public class seriesWithDataPoints

     {    

      private string seriesName;

      public string SeriesName{get { return seriesName;}set { seriesName = value; }}

      private ArrayList dataPoints;

      public ArrayList DataPoints{get { return dataPoints;}set { dataPoints = value; }}

      private string BColor;

      public string bColor { get { return BColor; } set { BColor=value;} }

      private double Opacity;

      public double opacity { get { return Opacity;} set{Opacity=value;} }

      private string Fill;
      public string fill { get { return Fill; } set { Fill = value; } }
    }

·         Create data point lists   and add it to the ViewBag

            var Data1 = GetData1();

            var Data2 = GetData1();

     var Data3 = GetData1();

              ArrayList dataList1 = new ArrayList();

dataList.Add(new seriesWithDataPoints("Product X",   DataSource1,"transparent",0.5,"#69D2E7"));

…… 

ViewBag.dataSource = dataList1;

·         Bind  ViewBag data Source to Index.cshtml View page

  var series= (System.Collections.IEnumerable)ViewBag.datasource;

  You can get following result of the attached sample
Screenshot:


You can also change different data source for chart series  ,below code shows that how to bind   the ViewBag dataSource to chart by Ajax POST method

      function chnageDataSource(sender) {

            $.ajax({

                type: "POST",

                url: "Home/Getjsondata",

                async: false,

                success: function (data) {

                    //Binding data to chart

                    for (var i = 0; i < data.length; i++) {

                        var chartObj = $("#chart").ejChart("instance");

                        chartObj.model.series[i].dataSource = data[i].DataPoints;

                        chartObj.model.series[i].border.color = data[i].bColor;

                        chartObj.model.series[i].opacity = data[i].opacity;

                        chartObj.model.series[i].fill = data[i].fill;

                        chartObj.model.series[i].name = data[i].SeriesName;

                        chartObj.model.series[i].type = "area";

                    }

                    chartObj.redraw();

                },

            });

        }

Screenshot:

We have prepared a sample and you can download it from below sample link.

Sample Link:
DataModel119286


Please let us know if you have any concern
Thanks,
Vinothkumar Arumugam.

 

---

CS Carlos Sousa June 3, 2015 03:54 PM UTC

Hello Vinothkumar,

thanks for your, incredible and fast support

it's ok :)

---

VA Vinothkumar Arumugam Syncfusion Team June 4, 2015 05:12 AM UTC

Hi Carlos,

Thanks for the update.

Please let us know if you have any further query on this.
Thanks,
Vinothkumar Arumugam.

[Carlos Sousa]

Hello Vinothkumar,

thanks for your, incredible and fast support

it's ok :)

[Vinothkumar Arumugam]

Hi Carlos,

Thanks for the update.

Please let us know if you have any further query on this.
Thanks,
Vinothkumar Arumugam.