ruby on rails - Moving javascript data series to html data attribute breaks Highchart -

i'm trying add highcharts chart rails app, following example

http://www.highcharts.com/demo/column-stacked

everything works fine when use javascript configure chart, content dynamic want move series data onto data attribute.

i've modified 1 line in function (see view options @ link above)

series: $('#container').data('chart') 

and in view

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

in 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 correct chart in example, have messy chart around 100 data series.

is there difference in way data array handled under javascript , ruby cause discrepancy?

try passing data client in content_tag in view , rename @data @my_data:

<%= content_tag "div", id: "chart_data", data: {my_data: @my_data} %> <% end %> 

reload page, open javascript console, , use jquery see if javascript objects formatted properly:

$('#chart_data').data('my_data') 

in realistic example, want pass collection of ruby objects client , technique suitable converting array of ruby objects array of js objects. there railscast on passing data js.