0

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!

Anders
  • 12,556
  • 24
  • 104
  • 151

1 Answers1

0

I just got it working myself after having some trouble with formatting my dynamic data in a Rails app I'm working on.

I ended up using trial and error, viewing the page source until it looked the way I wanted it to.

series [{
name: "#{@model_name}",
data: #{@model_name.get_some_nested_array.to_json}
}]

So in the page source it looks like this:

series [{
name: "Model Name",
data: [[1, 4], [2, 3], [3, 7]]
}]

wonderfulthunk
  • 555
  • 4
  • 16
  • Ok thanks, but could you clarify a bit? I don't know rails, but I'm assuming you mean you're using the model passed to the View in the "#{@model_name}" bits. So in the model there should be a property of type JSon? I don't know if you know C# or ASP.NET, but if you or someone else could translate this to C# with an example of the property it would help a lot (don't know much about JSon as I mentioned)... – Anders Jan 02 '11 at 22:57
  • I don't know C# or ASP.NET but I'll try to elaborate more generally (sorry, I thought you were using rails). – wonderfulthunk Jan 03 '11 at 21:12
  • I don't know C# or ASP.NET, sorry. The builtin to_json method that I call on my nested array hands a nice string representation to the javascript code of highcharts. JS understands this string representation of the nested array and it works. I went back and forth trying to directly pass a ruby nested array, array, string, etc, but converting it to JSON was what finally worked. I think because we're mixing programming languages (you with C# and JS, me with ruby and JS), it needs to be converted "to java" essentially. – wonderfulthunk Jan 03 '11 at 21:20
  • That's what the to_json method does for me in rails. Maybe you can find an equivalent method in a C# library? What does your data look like when you view the page source? That might also give some clues as to what you're passing to highcharts/JS. – wonderfulthunk Jan 03 '11 at 21:20
  • Ok, thanks anyway, I think I might try to achieve something similar in asp.net, so I'll credit you with the answer for the hint! – Anders Jan 04 '11 at 21:33