bind chart with JSON fromajex request

[Saurabh GoelMember]

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static String GetChartSourse()
{
//List lstObj = new List();

String strResult = String.Empty;
List lstObj = new List();
try
{
TestC objC = new TestC();

objC.Day = “Monday”;
objC.Running = 30;
objC.Swimming = 0;
objC.Cycling = 25;
objC.Goal = 40;
lstObj.Add(objC);

objC = new TestC();
objC.Day = “Tuesday”;
objC.Running = 25;
objC.Swimming = 0;
objC.Cycling = 36;
objC.Goal = 95;
lstObj.Add(objC);

objC = new TestC();
objC.Day = “Wedneshday”;
objC.Running = 36;
objC.Swimming = 25;
objC.Cycling = 16;
objC.Goal = 24;
lstObj.Add(objC);

objC = new TestC();
objC.Day = “Thursday”;
objC.Running = 35;
objC.Swimming = 26;
objC.Cycling = 12;
objC.Goal = 32;
lstObj.Add(objC);

objC = new TestC();
objC.Day = “Friday”;
objC.Running = 85;
objC.Swimming = 0;
objC.Cycling = 62;
objC.Goal = 24;
lstObj.Add(objC);

objC = new TestC();
objC.Day = “Saturday”;
objC.Running = 32;
objC.Swimming = 0;
objC.Cycling = 85;
objC.Goal = 30;
lstObj.Add(objC);

objC = new TestC();
objC.Day = “Sunday”;
objC.Running = 40;
objC.Swimming = 0;
objC.Cycling = 65;
objC.Goal = 30;
lstObj.Add(objC);

System.Web.Script.Serialization.JavaScriptSerializer objSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
strResult = objSerializer.Serialize(lstObj);

//int[,] data = new int[4, 2] {{2,4},{3,5},{6,1},{8,2}};
//strResult = objSerializer.Serialize(data);
}
catch (Exception ex)
{
String Error = ex.Message;
}
return strResult;
}

,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
$(document).ready(function () {
// prepare chart data as an array
var sampleData;
try {
$.ajax({
type: “POST”,
url: “Trial.aspx/GetChartSourse”,
data: “{}”,
contentType: ‘application/json; charset=utf-8’,
dataType: ‘json’,
success: function (data) {
if (data.d != ”) {
sampleData = data.d;
alert(sampleData);
}
else {
alert(“Data Not Found..”);
}
}
});
alert(“”);
}
catch (err) {
alert(err);
}

//prepare jqxChart settings…
var settings = {
title: “Fitness & exercise weekly scorecard”,
description: “Time spent in vigorous exercise by activity”,
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
categoryAxis:
{
text: ‘Category Axis’,
textRotationAngle: 0,
dataField: ‘Day’,

showTickMarks: true,
valuesOnTicks: false,
tickMarksInterval: 1,
tickMarksColor: ‘#888888’,
unitInterval: 10,
showGridLines: true,
gridLinesInterval: 10,
minValue: 0,
maxValue: 100,
gridLinesColor: ‘#888888’,
axisSize: ‘auto’
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘line’,
showLabels: true,
symbolType: ‘circle’,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 100,
description: ‘Goal in minutes’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘Goal’, displayText: ‘Personal Goal’ }
]
}
]
};

// setup the chart
$(‘#jqxChart’).jqxChart(settings);
});

I am able to get correct json data but not able to show it on stack line gharph

[DimitarParticipant]

Hello Saurabh Goel,

You should bind your chart to data adapter, because the ajax call is asynchronous. How to achieve this can be seen in menu of the demos, such as Column Series.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Saurabh GoelMember]

Then how to link My C# method to data adapter,As my method return lsit in json formate.
The demo which you have shown takjes data from txt file where in i wont generic data from object return from my C # method

[DimitarParticipant]

Hi Saurabh Goel,

Please, check out the example Negative Values. Instead of the source url property, set the property localdata to the variable with your JSON data.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Saurabh GoelMember]

You mean to say like this..

var sampleData;
sampleData = {
dataType: ‘json’,

datafields: [
{ name: ‘Day’ },
{ name: ‘Swimming’ }
],
data: “{}”,
async: false,
record: ‘Table’,
localdata: “Trial.aspx/GetChartSourse”
// success: function (data) {
// if (data.d != ”) {
// sampleData = data.d;
// alert(“Data=”+sampleData);
//// }
};
var dataAdapter = new $.jqx.dataAdapter(sampleData, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + sampleData.url + ‘” : ‘ + error); } });

[DimitarParticipant]

Hi Saurabh Goel,

This solution is not entirely correct – if the data is from an external file and not a local variable, the property url has to be used instead of localdata.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Saurabh GoelMember]

But earlier i was doing like that only.

Tell me how to do so. using data adapter.
and see my first post to give me idea as a sample code (i want my C# data method to be in url).

[Author]

Posts