Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Below service is working fine and getting json also but highchart column not generating.
C#
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

XML
<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

C#
"[{"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
C#
[{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..
Posted
Updated 30-Dec-15 21:18pm
v2

@Amol Jadhao: use
JavaScript
series = eval(Result.d);
 
Share this answer
 
Here ,i have written article for those who start from scratch
Highcharts in asp.net using jquery ajax[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900