Sinatra в Google Geochart — передача данных

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

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

Я также использую API Google Charts для создания некоторых визуализаций с моими данными; в частности, я пытаюсь использовать библиотеку 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);
    };

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

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


google-visualization sinatra
person user667118    schedule 26.11.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я понял, как заполнить таблицу. Я использовал интерполяцию 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);
    };
person user667118    schedule 27.11.2011