title: Highchart with webservice in ASP.net
body: <p>What I would like to do is to get a simple string array (of numbers) into the Highchart from a webservice. For some reason, the chart is not even rendered and I cannot get any values through this.</p>
  
  <p>In the Highchart's documentation I've found this example of sending data cross domains:</p>
  
  <pre><code>http://docs.highcharts.com/#cross-domain-data
  </code></pre>
  
  <p>This is their example (using php):</p>
  
  <pre><code>The serverside php file:
  &lt;?php
  header("content-type: application/json"); 
  
  $array = array(7,4,2,8,4,1,9,3,2,16,7,12);
  
  echo $_GET['callback']. '('. json_encode($array) . ')';    
  
  ?&gt;
  </code></pre>
  
  <p>The JavaScript calling the callback function using jQuery.</p>
  
  <pre><code>$(document).ready(function() {
  var options = {
      chart: {
          renderTo: 'container',
          type: 'spline'
      },
      series: [{}]
  };
  
  var url =  "http://url-to-your-remote-server/jsonp.php?callback=?";
  $.getJSON(url,  function(data) {
  options.series[0].data = data;
  var chart = new Highcharts.Chart(options);
  });
  });
  </code></pre>
  
  <p>And now this is how my WebService.cs looks like:</p>
  
  <pre><code>public WebService () {
      //Uncomment the following line if using designed components 
      //InitializeComponent(); 
  }
  
  [WebMethod(Description = "ID:2")]
  [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  
  public string GetSomeValues() {
  
      string[] values = { "3", "5", "6", "7", "3"};
  
      string[][] jaggedTable = new string[values.Count()][];
  
      int i = 0;
      foreach (var value in values)
      {
          jaggedTable[i] = new string[] { value + "" };
          i++;
      }
  
      JavaScriptSerializer js = new JavaScriptSerializer();
      string strJSON = js.Serialize(jaggedTable);
  
      return strJSON;
  }
  </code></pre>
  
  <p>And the Default.aspx:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var options = {
              chart: {
                  renderTo: 'container',
                  type: 'spline'
              },
              series: [{}]
          };
  
          var url = "WebService.asmx/GetSomeValues";
          $.getJSON(url, function (data) {
              options.series[0].data = data;
              var chart = new Highcharts.Chart(options);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong> I've just seen that I'm getting in the console this error:</p>
  
  <pre><code>GET http://localhost:53566/WebService.asmx/GetSomeValues 500 (Internal Server Error)
  jquery.min.js:130
  c.extend.ajax jquery.min.js:130
  c.extend.get jquery.min.js:122
  c.extend.getJSON jquery.min.js:122
  (anonymous function) highchart.aspx:23
  c.extend.ready jquery.min.js:26
  </code></pre>
  
  <p>Where the anonymous function is:</p>
  
  <pre><code>$.getJSON(url, function (data) {
              options.series[0].data = data;
              var chart = new Highcharts.Chart(options);
          });
  </code></pre>
  
  <p>What am I doing wrong?</p>