Cybercrux

Everything is achievable through technology

JSON

Working with Json ajax file for amline graph

1st:  Create json datasource in ajax page like below

private string Jsondata()
{

 List<Barchart> Barcharts = new List<Barchart>();

foreach (DataRow dr in dsGraph.Tables[0].Rows)
{
string val = FormatFunctions.C_Format.M_FormatNumber(dr[option].ToString(), “2”, “NA”);
Barchart barobj = new Barchart() { name = dr[“TypeNAME”], valu = val };
Barcharts.Add(barobj);
}

//Other Method

//Barchart IND_FUT = new Barchart { name = “IND FUT”, sell = dsData1.Tables[0].Rows[0][“ifbuyval”].ToString(), buy = //dsData1.Tables[0].Rows[0][“ifsellval”].ToString(), open = dsData1.Tables[0].Rows[0][“ifbuyoival”].ToString() };                     //List<Barchart> Barcharts = new List<Barchart>() { IND_FUT};

JavaScriptSerializer oSerializer = new JavaScriptSerializer();

string sJSON = oSerializer.Serialize(Barcharts);

return sJSON;

}

#region Encapsulation
public class Barchart
{
public object name { get; set; }
public object valu { get; set; }
}
#endregion

2nd:  Call this ajax in Jquery script as below

function ShowChart(Option, Type, opt) {
var chart;

var Url = “../MFHome/AjaxCategoryRet.aspx?Option=” + Option + “&timeStamp=” + new Date().getTime() + “&Type=” + Type;
$.ajax({ type: “POST”,
url: Url,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
async: true,
cache: false,
success: function (data) {

// SERIAL CHART

chart = new AmCharts.AmSerialChart();
chart.dataProvider = data;
chart.categoryField = “name”;
chart.startDuration = 1;
chart.plotAreaBorderAlpha = 0;
// this single line makes the chart a bar chart
//chart.depth3D = 20;
//chart.angle = 30;

// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.visible = false
categoryAxis.axisAlpha = 0;
categoryAxis.position = “top”;
categoryAxis.gridPosition = “start”;

// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.showLastLabel = false;
valueAxis.axisAlpha = 0;
//valueAxis.gridAlpha = 0;
valueAxis.position = “left”;
chart.addValueAxis(valueAxis);

// GRAPHS
// first graph
var graph1 = new AmCharts.AmGraph();
graph1.type = “column”;
graph1.valueField = “valu”;
graph1.balloonText = “[[name]]:[[valu]]”;
graph1.lineAlpha = 0;
graph1.fillColors = “#d74b86”;
graph1.fillAlphas = 1;
chart.addGraph(graph1);
// WRITE
chart.write(“mfgrap”);
},
error: function (x, e) {
alert(“The call to the server side failed. ” + x.responseText);
}
});

}

Advertisements

One thought on “JSON

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s