1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Loop through Json data by ID and add to Stacked Area Chart

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

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

@section ControlsSection{
    <div>
        @(Html.EJ().Chart("container")
         .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)
            {
                sr.Name(data.InvestmentName).Type(SeriesType.StackingArea).Add();
            }
        })
        .IsResponsive(true)
        .Load("getJsonData")
        .Title(title => title.Text("Fund Values"))
        .Size(sz => sz.Height("600"))
        .Legend(lg => { lg.Visible(true); }))
    </div>
}
<script type="text/javascript">
   function getJsonData(sender) {
       $.ajax({
            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";
                });
            },
        });
   }

</script>


1 Reply
DD Dharanidharan Dharmasivam Syncfusion Team 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: 
ASP.NET MVC: 

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) { 
        $.ajax({ 
            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"; 
                    } 
                } 
            }, 
        }); 
    } 

Screenshot: 
 


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


Loader.
Up arrow icon