title: How can I populate highchart jQuery plugin dynamically from MVC action?
body: <p>I'm trying out the Highcharts jQuery plugin for creating charts of data in an MVC application. But I need to get the data for the function dynamically from an Action Method. How can I do that?</p>
  
  <p>Taking the example from the Highcharts site (<a href="http://highcharts.com/documentation/how-to-use" rel="nofollow">http://highcharts.com/documentation/how-to-use</a>):</p>
  
  <pre><code>var chart1; // globally available
  $(document).ready(function() {
        chart1 = new Highcharts.Chart({
           chart: {
              renderTo: 'chart-container-1',
              defaultSeriesType: 'bar'
           },
           title: {
              text: 'Fruit Consumption'
           },
           xAxis: {
              categories: ['Apples', 'Bananas', 'Oranges']
           },
           yAxis: {
              title: {
                 text: 'Fruit eaten'
              }
           },
           series: [{
              name: 'Jane',
              data: [1, 0, 4]
           }, {
              name: 'John',
              data: [5, 7, 3]
           }]
        });
     });
  </code></pre>
  
  <p>How can I get the data in there dynamically from the action method? Someone suggested I might use JSon, but couldn't specify how. If this is the case, I would really appreciate a simple and specific example, because I don't know much about JSon.</p>
  
  <p>Any help appreciated!</p>