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

Loop through Json data by ID and add to Stacked Area Chart

Thread ID:





127272 Nov 7,2016 08:38 PM UTC Nov 8,2016 11:44 AM UTC ASP.NET Web Forms 1
Tags: Chart
William Vickers
Asked On November 7, 2016 08:38 PM UTC

@using Syncfusion.JavaScript
@using Syncfusion.MVC.EJ
@using Syncfusion.JavaScript.DataVisualization
@using Syncfusion.JavaScript.DataVisualization.Models

@section ControlsSection{
         .PrimaryXAxis(pr => pr.AxisLine(ax => ax.Visible(false)).MajorGridLines(mr => mr.Visible(false))
        .MajorTickLines(mt => mt.Visible(false)).Title(tl => tl.Text("Day"))
        .Range(ra => ra.Min(new DateTime(2016, 1, 1)).Max(new DateTime(2016, 12, 31)).Interval(1)))
        .PrimaryYAxis(pr => pr.Title(tl => tl.Text("Value per Day")).LabelFormat("$ {value}")
        .Range(ra => ra.Min(0).Max(20000).Interval(1000)))
        .Series(ser =>
            foreach (int InvestmentID in data)
        .Title(title => title.Text("Fund Values"))
        .Size(sz => sz.Height("600"))
        .Legend(lg => { lg.Visible(true); }))
<script type="text/javascript">
   function getJsonData(sender) {
            type: "POST",
            url: "Home/GetChartData",
            async: false,
            success: function (data) {
                data.forEach(function (InvestmentID) {
                    sender.model.series[0].dataSource = data;
                    sender.model.series[0].xName = "DateCreated";
                    sender.model.series[0].yName = "ValuePerDay";


Dharanidharan Dharmasivam [Syncfusion]
Replied On November 8, 2016 11:44 AM UTC

Hi William, 
Thanks for your update. 
We have prepared sample with respect to your requirement. In the sample we have passed json data to chart with ID property. For every id, there is separate json data, which can be binded to the series. Depends on the id length, number of series are rendered. Kindly follow the code snippet below, 
Code Snippet: 

public ActionResult chart() 
            Random y = new Random(); 
            List<Data> value = new List<Data>(); 
            //Data created for series  
            for (int i = 0; i < 12; i++) 
                value.Add(new Data(new DateTime(2016, i+1, 01), y.Next(1000, 2000))); 
            List<JsonData> json = new List<JsonData>(); 
           //Binding dataSource with ID  
            for (int j = 0; j < 10; j++) 
                json.Add(new JsonData(j, value)); 
            return Json(json); 
public class JsonData 
        public double Id { get; set; } 
        public List<Data> data {get; set;} 
        public JsonData(double Id, List<Data> data) 
            this.Id = Id; 
            this.data = data; 
//Class for x and y values 
public class Data 
        public Data(DateTime xval, int yval) 
            this.xvalue = xval; 
            this.yvalue = yval; 
        public DateTime xvalue { get; set; } 
        public int yvalue { get; set; } 
//Binding data to chart in load event using AJAX  
function getJsonData(sender) { 
            type: "POST", 
            url: '@Url.Action("chart","Home")', 
            async: false, 
            success: function (jsondata) { 
                for (var i = 0; i < jsondata.length; i++) { 
                    if (i == jsondata [i].Id) { 
                        sender.model.series[i].dataSource = jsondata [i].data; 
                        sender.model.series[i].xName = "xvalue"; 
                        sender.model.series[i].yName = "yvalue"; 


For your reference we have attached the sample. Kinldy find the sample from below location, 


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

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