Hello Friends...
I m working with high-charts, I refer its examples in that data is hard coded. That's why it shows correct data on charts. but in my case, Data comes from SQL Server as follows
public partial class Default : System.Web.UI.Page
{
public List<string> ObjMonthList = new List<string>();
public List<decimal> ObjMumbaiValues = new List<decimal>();
public List<decimal> ObjNewYorkValues = new List<decimal>();
public List<decimal> ObjBerlinValues = new List<decimal>();
public JavaScriptSerializer ObjJavaScriptSerializer = new JavaScriptSerializer();
protected void Page_Load(object sender, EventArgs e)
{
GetData();
}
void GetData()
{
SqlConnection ObjConnection = new SqlConnection("Data Source=abc; Initial Catalog=test; Integrated Security=True;");
SqlDataAdapter ObjDataAdapter = new SqlDataAdapter("select * from test", ObjConnection);
DataTable ObjTable = new DataTable();
ObjDataAdapter.Fill(ObjTable);
GridView1.DataSource = ObjTable;
GridView1.DataBind();
for (int i = 0; i < ObjTable.Rows.Count; i++)
{
ObjMonthList.Add(ObjTable.Rows[i][0].ToString());
}
}
}
I have passed ObjMonthList to Javascript as follows
var monthnames = <%=ObjJavaScriptSerializer.Serialize(ObjMonthList) %>;
It shows data in monthnames as follows
var monthnames = ["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"];
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20
},
subtitle: {
text: 'Source: WorldClimate.cyesom',
x: -20
},
xAxis: {
categories: monthnames
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
But it doesn't show data in categories. it shows only variable name as follows
xAxis: {
categories: monthnames
},
Please help me.