title: asp.net mvc highchart linegraph json
body: <p>I'm trying to get the line-example at: <a href="http://www.highcharts.com/demo/line-basic/grid" rel="nofollow">http://www.highcharts.com/demo/line-basic/grid</a> working with a jsonresult, but can't figure out how to achieve this.</p>
  
  <p>The controler code:</p>
  
  <pre><code>public JsonResult GetLineData()
      {
          Dictionary&lt;string, double[]&gt; retVal = new Dictionary&lt;string, double[]&gt;();
          double[] Array1 = {7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6};
          retVal.Add("Tokyo", Array1);
  
          double[] Array2 = { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 };
          retVal.Add("New York", Array2);
  
          return Json(retVal.ToArray(), JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>My jqquery looks like this:</p>
  
  <pre><code>var chart;
      $(document).ready(function () {
          var options = {
              chart: {
                  renderTo: 'container',
                  defaultSeriesType: 'line',
                  marginRight: 130,
                  marginBottom: 25
              },
              title: {
                  text: 'Monthly Average Temperature',
                  x: -20 //center
              },
              subtitle: {
                  text: 'Source: WorldClimate.com',
                  x: -20
              },
              xAxis: {
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
              },
              yAxis: {
                  title: {
                      text: 'Temperature (Â°C)'
                  },
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                  }]
              },
              tooltip: {
                  formatter: function () {
                      return '&lt;b&gt;' + this.series.name + '&lt;/b&gt;&lt;br/&gt;' +
             this.x + ': ' + this.y + 'Â°C';
                  }
              },
              legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'top',
                  x: -10,
                  y: 100,
                  borderWidth: 0
              },
              series: []
          };
  
          //Calls the JSON            
          jQuery.getJSON("GetLineData", null, function (items) {
              var series = {
                  name: '',
                  data: []
              };                
              jQuery.each(items, function (itemNo, item) {
                  //Get the items from the JSON and add then
                  //to the data array of the series                               
                  series.data.push({
                      name: item.Key,
                      data: item.Value
                  })                    
              });
              options.series.push(series);
  
              //Create the chart
              chart = new Highcharts.Chart(options);
              chart.render();
          });
  
  
      });
  </code></pre>
  
  <p>The chart shows up without an error, but also without the two lines.
  I guess the series are not builded the right way? Thanks in advance for your help.</p>