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.

Data binding on load from Json using Ajax

Thread ID:

Created:

Updated:

Platform:

Replies:

127243 Nov 4,2016 12:34 PM Nov 8,2016 06:50 AM ASP.NET MVC 3
loading
Tags: Chart
William Vickers
Asked On November 4, 2016 12:34 PM

How do I assign chartObj variables from my Json data variables?

@using Syncfusion.JavaScript.DataVisualization

@Scripts.Render("~/Scripts/Index/Index.js")

<div>
    @(Html.EJ().Chart("chart")
        .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)))//.LabelFormat("0.00 $"))
        //.CommonSeriesOptions(cr => cr.Type(SeriesType.StackingArea).EnableAnimation(true))
        .Series(sr =>
        {
            
        })
        .IsResponsive(true)
        .Load("getJsonData")
        .Title(title => title.Text("Fund Values"))
        .Size(sz => sz.Height("600"))
        .Legend(lg => { lg.Visible(true); })
    )
</div>



Dharanidharan Dharmasivam [Syncfusion]
Replied On November 7, 2016 07:29 AM

Hi William, 

Thanks for using Syncfusion product. 

We have prepared sample with respect to your requirement. Kindly find the code snippet for assigning chartObj variables from Json data . 
 
Code Snippet: 
ASP.NET MVC: 

      //JSON Data 
      public ActionResult chart() 
        { 
            List<data> data1 = new List<Controllers.data>(); 
            data1.Add(new data(new DateTime(2016, 01, 01), 1500)); 
            data1.Add(new data(new DateTime(2016, 02, 01), 2000)); 
            data1.Add(new data(new DateTime(2016, 03, 01), 5400)); 
            data1.Add(new data(new DateTime(2016, 04, 01), 6000)); 
            data1.Add(new data(new DateTime(2016, 05, 01), 4500)); 
            data1.Add(new data(new DateTime(2016, 06, 01), 8500)); 
            data1.Add(new data(new DateTime(2016, 07, 01), 9000)); 
            data1.Add(new data(new DateTime(2016, 08, 01), 11000)); 
            data1.Add(new data(new DateTime(2016, 09, 01), 14500)); 
            data1.Add(new data(new DateTime(2016, 10, 01), 16000)); 
 
            return Json(data1); 
        } 
 
        @(Html.EJ().Chart("container") 
            //... 
            .Load("getJsonData") 
            //... 
        ) 
 
       //Binding data to chart in load event using AJAX 
       function getJsonData(sender) { 
         $.ajax({ 
            type: "POST", 
            url: '@Url.Action("chart","Home")', 
            async: false, 
            success: function (data) { 
                sender.model.series[0].dataSource = data; 
                sender.model.series[0].xName = "xvalue"; 
                sender.model.series[0].yName = "yvalue" 
            }, 
         }); 
      } 


Screenshot: 
 

For your reference we have attached the sample. Kindly find the sample from below location. 
  
If this is not your scenario, kindly revert us by giving more description on your requirement. 

Thanks, 
Dharani. 
  
  


Preethi Nesakkan Gnanadurai [Syncfusion]
Replied On November 7, 2016 11:30 PM

From: Vickers, Bill [mailto:Bill.Vickers@intuitionable.com]
Sent: Monday, November 7, 2016 10:08 AM
To: Syncfusion Support <support@syncfusion.com>
Subject: RE: Syncfusion support community forum 127243, Data binding on load from Json using Ajax, has been updated.
 

Do I need to make a data class with xvalue and yvalue properties.  I need a stacked area chart to work similar to your example with 10 different series. I have a stored procedure bringing in data to an IEnumerable class.   
 
public ActionResult GetChartData1() 
        { 
            var vlist = AccessManager.ListTotalValuePerDay(); 
            var vRAndNFunds = vlist.Where(x => x.ID.Contains(1, 2, 4, 5, 7, 8, 10, 11, 13, 14)); 
                 
            return Json(vRAndNFunds, JsonRequestBehavior.AllowGet); 


Dharanidharan Dharmasivam [Syncfusion]
Replied On November 8, 2016 06:50 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.

;