Как правильно заполнить Google Chart (Map) массивами вместо значений

0

Я хочу заполнить эту карту карт google городами из db и количеством пользователей из каждого города.

Для этого я использовал следующий код:

   <?      
    $query_city_users = "SELECT DISTINCT(city) FROM users 
                      WHERE approved = 1";
    $city_users = mysql_query($query_city_users, $con) or die(mysql_error());


       while ($row_city_users = mysql_fetch_assoc($city_users)) { 

            $query_users_from_city = "SELECT * FROM users 
                                     WHERE approved = 1 
                                     AND city= '".$row_city_users['city']."'";
            $users_from_city = mysql_query($query_users_from_city, $con) or die(mysql_error());
            $totalRows_users_from_city = mysql_num_rows($users_from_city); 
  ?>


               <?=$row_city_users['city'] ?> -
               <?=$totalRows_users_from_city ?> <br>

В PHP это нормально работает... это перекликается со списком городов и количеством пользователей в каждом городе. Возникающая проблема связана с тем, что в моем сценарии Charts Script заполняются данные из вышеперечисленных запросов.

   <!------ MAP CHARTS------->
   <script type='text/javascript' src='https://www.google.com/jsapi'></script>
   <script type='text/javascript'>
   google.load('visualization', '1', {'packages': ['geochart']});
   google.setOnLoadCallback(drawMarkersMap);

  function drawMarkersMap() {
  var data = google.visualization.arrayToDataTable([
    ['City',   'Users Number'],
    ['<?=$row_city_users['city'] ?>',  '<?=$totalRows_users_from_city ?>']

  ]);

  var options = {
    region: 'IT',
    displayMode: 'markers',
    colorAxis: {colors: ['lightblue', 'blue'],
    backgroundColor: 'blue',
    keepAspectRatio: 'true',


    }
  };

  var chart = new google.visualization.GeoChart(document.getElementById('italy'));
  chart.draw(data, options);
};
</script> 

 <?  } // end while ?>

Используя этот код, карта выводит только один город из массива... Я знаю, что я пропустил что-то в коде, поэтому, пожалуйста, помогите... Мой вопрос будет состоять в том, как правильно заполнить диаграмму google массивами, которые я запросил?

PS. Я прочитал связанные вопросы о stackoverflow, но они не помогли мне в этом случае.

  • 0
    распечатайте данные в консоли, используя console.log (data), прежде чем рисовать диаграмму. Я думаю, что эти данные содержат только один город
  • 0
    И если так или иначе ваши drawMarkers вызываются из любого цикла, вам нужно сохранить var chart = new google.visualization.GeoChart (document.getElementById ('italy'))); на глобальном уровне, в противном случае будет построен только последний город
Показать ещё 5 комментариев
Теги:
arrays
google-maps

1 ответ

0
Лучший ответ

Это связано с тем, что ваш объект диаграммы создается каждый раз в пределах цикла. Вы можете переместить следующий код из цикла как

var rawData = [['City',   'Users Number']];
    var options = {
    region: 'IT',
    displayMode: 'markers',
    colorAxis: {colors: ['lightblue', 'blue'],
    backgroundColor: 'blue',
    keepAspectRatio: 'true',
    }

Затем замените функцию drawMarkersMap на

function drawMarkersMap() {
    rawData.push(['<?=$row_city_users['city'] ?>',  '<?=$totalRows_users_from_city ?>']);
  };

Затем снова за пределами цикла вы должны использовать

var data = google.visualization.arrayToDataTable(rawData);
var chart = new google.visualization.GeoChart(document.getElementById('italy'));
chart.draw(data, options);

Поддерживайте порядок кода. Возможно, вам придется исправить некоторые незначительные ошибки, поскольку у меня нет данных для тестирования

Поделиться
  • 0
    какие строки кода должны оставаться в цикле? потому что я проверил его, и теперь он больше не показывает график, так что это должно быть где-то ошибка
  • 0
    После некоторых попыток теперь диаграмма выдает ошибку: «Несовместимая таблица данных: ошибка: таблица содержит больше столбцов, чем ожидалось (ожидается 2 столбца)»
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню