Синатра в Google Geochart - Передача данных

Question

Я новичок в веб-разработке и пытаюсь создать приложение Sinatra.В моем приложении есть переменная экземпляра, которая ссылается на двумерный массив, например так:

@my_var = [ ['NY', 55], ['NJ', 37] ]

Я также использую Google Charts API для создания некоторых визуализаций с моими данными;в частности, я пытаюсь использовать библиотеку Geochart , на мой взгляд, для создания тепловой карты для каждого штата США

Я хотел бы использовать массив, упомянутый ранее (@my_var) в моем шаблоне, чтобы заполнить таблицу данных Google, которая используется для создания диаграммы.Мой DataTable будет иметь два столбца, первый представляющий состояние, а второй представляющий счет, и я хотел бы, чтобы каждый вложенный массив в @my_var отображался в эти два столбца следующим образом:

STATE     SCORE
NY        55
NJ        37

Кто-нибудь знает, каксделай это?Насколько я вижу из документации , вы должны заполнить таблицу статическими значениями.Я не уверен, как передать данные из моего приложения (код Ruby) в процессы, которые создают диаграмму (код Javascript).

Чтобы еще больше усложнить ситуацию, я создаю свой шаблон с помощью haml.На данный момент у меня есть следующее:

%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);
    };

Карта отображается с правильным размером и правильными цветами в легенде.Тем не менее, я не вижу цвета Нью-Йорка или Нью-Джерси. Также обратите внимание, что здесь я использую статические значения - я хочу сократить этот шаг, прежде чем пытаться создать таблицу динамически.

Любая помощь будет оценена.

Answer 1

Я понял, как заполнить таблицу. Я использовал интерполяцию Ruby для преобразования массива Ruby в массив Javascript, а затем использовал массив JS для заполнения DataTable следующим образом:

%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);
    };