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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

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

@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>


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

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. 


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.

;