Q: Moving javascript data series to html data attribute breaks Highchart I'm trying to add Highcharts chart to a Rails app, following this example
http://www.highcharts.com/demo/column-stacked
Everything works fine when I use javascript to configure the chart, but as the content will be dynamic I want to move the series data onto a data attribute.
I've modified one line in the function (see view options at the link above) 
series: $('#container').data('chart')

and in the view 
<div id="container" style="width:100%;height:172px;" data-chart='<%= @data %>' ></div>

in the controller
@data = [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]

Now instead of displaying the correct chart as in the example, I have a very messy chart with around 100 data series.
Is there a difference in the way this data array is handled under javascript and ruby that would cause this discrepancy?

A: Try passing the data to the client in a content_tag in the view and rename @data to be @my_data:
<%= content_tag "div", id: "chart_data", data: {my_data: @my_data} do %>
<% end %>

Reload the page, open the JavaScript console, and use jQuery to see if the JavaScript objects are formatted properly:
$('#chart_data').data('my_data')

In a realistic example, you will want to pass a collection of Ruby objects to the client and this technique is suitable for converting an array of Ruby objects to an array of JS objects.  There is a good RailsCast on passing data to JS.
