Sinatra to Google Geochart - Passing Data - sinatra

Question

I am new to web development, and I am trying to create a Sinatra app. In my app, I have an instance variable that references a two-dimensional array like so:
#my_var = [ ['NY', 55], ['NJ', 37] ]
I am also using the Google Charts API to create some visualizations with my data; in particular, I am trying to use the Geochart library in my view to create a state-by-state heat map of the U.S.
I'd like to use the array mentioned earlier (#my_var) in my template to populate the Google DataTable that's used to create the chart. My DataTable will have two columns, the first representing state and the second representing score, and I would like each nested array in #my_var to map to these two columns like so:
STATE SCORE
NY 55
NJ 37
Does anybody know how to do this? As far as I can see from the documentation, you have to populate the table with static values. I'm not sure how to pass the data from my application (Ruby code) to the processes that create the chart (Javascript code).
To further complicate the matter, I'm creating my template with haml. What I have so far is this:
%script{ :type => "text/javascript" }
:plain
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = new google.visualization.DataTable();
data.addRows(2);
data.addColumn('string', 'State');
data.addColumn('number', 'Score');
data.setValue(0, 0, 'NY');
data.setValue(0, 1, 55);
data.setValue(1, 0, 'NJ');
data.setValue(1, 1, 37);
var options = {region: 'US',
resolution: 'provinces',
backgroundColor: '#CCC',
colors: ['red','blue'],
width: 500,
height: 370};
var container = document.getElementById('map_canvas');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, options);
};
The map is rendered with the correct size and the correct colors in the legend. However, I'm not seeing NY or NJ colored in. Also note that I'm using static values here--I want to get this step down before trying to create the table dynamically.
Any help would be appreciated.

Answer 1

I figured out how to populate the table. I used Ruby interpolation to convert the Ruby array into a Javascript array, and then used the JS array to fill the DataTable like so:
%script{ :type => "text/javascript" }
:plain
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = new google.visualization.DataTable();
var scores_by_state = #{#scores_by_state}
data.addRows(scores_by_state.length)
data.addColumn('string', 'State');
data.addColumn('number', 'Average Score');
for(var i = 0; i < scores_by_state.length; i++)
{
data.setValue(i, 0, scores_by_state[i][0]);
data.setValue(i, 1, scores_by_state[i][1]);
}
var options = {region: 'US',
resolution: 'provinces',
backgroundColor: '#CCC',
colors: ['red','blue'],
width: 500,
height: 370};
var container = document.getElementById('map_canvas');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, options);
};