Below service is working fine and getting json also but highchart column not generating.
public class Serie
{
public object[] data { get; set; }
public string name { get; set; }
}
[WebMethod]
public string LoadCountry()
{
List<serie> series = new List<serie>();
series = new List<serie>();
series.Add(new Serie
{
name = "Tokyo",
data = new Object[] { 49.9, 71.5, 106.4, 129.2 }
});
series.Add(new Serie
{
name = "New York",
data = new Object[] { 83.6, 78.8, 98.5, 93.4 }
});
series.Add(new Serie
{
name = "London",
data = new object[] { 48.9, 38.8, 39.3, 41.4}
});
series.Add(new Serie
{
name = "Berlin",
data = new object[] { 42.4, 33.2, 34.5, 39.7 }
});
JavaScriptSerializer jc = new JavaScriptSerializer();
string Json = jc.Serialize(series);
return Json;
And Here is JQuery ajax
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="HighChart/highcharts.js" type="text/javascript"></script>
<script type="text/javascript" src="HighChart/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function () {
debugger;
var series = [];
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CountryDetails.asmx/LoadCountry",
data: "{}",
dataType: "json",
success: function (Result) {
series = Result.d;
console.log(series);
// $.each(Result.d, function (key, value) {
// $("#ddlcountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));
// });
},
error: function (Result) {
alert("Error");
}
});
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: series
});
});
</script>
Getting Json like this
"[{"data":[49.9,71.5,106.4,129.2],"name":"Tokyo"},{"data":[83.6,78.8,98.5,93.4],"name":"New York"},{"data":[48.9,38.8,39.3,41.4],"name":"London"},{"data":[42.4,33.2,34.5,39.7],"name":"Berlin"}]
"
I want to bind like this
[{name: 'Tokyo',data:[49.9,71.5,106.4,129.2]}, {name: 'New York',data: [83.6,78.8,98.5,93.4]},{name: 'London',data: [48.9,38.8,39.3,41.4]},{name: 'Berlin',data: [42.4,33.2,34.5,39.7]}]
Is beacuase of reason i am unable to bind or any other reason
please help me on this?
thanks in advance..