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.

dynamic Series in chart area

Thread ID:

Created:

Updated:

Platform:

Replies:

119286 Jun 1,2015 08:29 PM Jun 4,2015 01:12 AM ASP.NET MVC 3
loading
Tags: Chart
Carlos Sousa
Asked On June 1, 2015 08:29 PM

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 [Syncfusion]
Replied On June 2, 2015 09:33 AM

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.

 


Carlos Sousa
Replied On June 3, 2015 11:54 AM

Hello Vinothkumar,

thanks for your, incredible and fast support

it's ok :)


Vinothkumar Arumugam [Syncfusion]
Replied On June 4, 2015 01:12 AM

Hi Carlos,

Thanks for the update.

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


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.

;