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

dynamic Series in chart area

Thread ID:





119286 Jun 2,2015 12:29 AM UTC Jun 4,2015 05:12 AM UTC ASP.NET MVC 3
Tags: Chart
Carlos Sousa
Asked On June 2, 2015 12:29 AM UTC

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.

Vinothkumar Arumugam [Syncfusion]
Replied On 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.


Carlos Sousa
Replied On June 3, 2015 03:54 PM UTC

Hello Vinothkumar,

thanks for your, incredible and fast support

it's ok :)

Vinothkumar Arumugam [Syncfusion]
Replied On 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.


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

or the page will be automatically redirected to 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