Sinatra to Google Geochart - Passing Data
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](http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html) 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:

<pre>
STATE     SCORE
NY        55
NJ        37
</pre>

Does anybody know how to do this? As far as I can see from the [documentation](http://code.google.com/apis/chart/interactive/docs/datatables_dataviews.html), 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. 
Sinatra to Google Geochart - Passing Data
===

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](http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html) 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:

<pre>
STATE     SCORE
NY        55
NJ        37
</pre>

Does anybody know how to do this? As far as I can see from the [documentation](http://code.google.com/apis/chart/interactive/docs/datatables_dataviews.html), 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. 