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

dynamic Series in chart area

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 =>
                    }).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 =>
        .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


thank for help.

3 Replies

VA Vinothkumar Arumugam Syncfusion Team June 2, 2015 01:33 PM UTC

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

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) {


                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";







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

Sample Link:

Please let us know if you have any concern
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.
Vinothkumar Arumugam.

Live Chat Icon For mobile
Up arrow icon