How can I populate highchart jQuery plugin dynamically from MVC action?

Posted by Anders Svensson on Stack Overflow See other posts from Stack Overflow or by Anders Svensson
Published on 2010-12-29T08:57:28Z Indexed on 2010/12/31 3:53 UTC
Read the original article Hit count: 294

Filed under:
|
|

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?

Taking the example from the Highcharts site (http://highcharts.com/documentation/how-to-use):

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]
         }]
      });
   });

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.

Any help appreciated!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about asp.net-mvc-2