Cum să populăm corect Google Chart (Harta) cu array-uri în loc de valori (Programare, Java, Javascript, Php, Array-Uri, Google Maps)

Anurag Dhuramabad a intrebat.

Vreau să populez această hartă Google – diagramă cu orașele din baza de date și numărul de utilizatori din fiecare oraș.

Pentru a face acest lucru, am folosit următorul cod:

   <?      
    $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>

În PHP, acest lucru iese ok… se face ecoul listei de orașe și câți utilizatori sunt în fiecare oraș. problema întâlnită este în încercarea mea de a popula Charts Script cu datele din interogările de mai sus.

   <!------ 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 ?>

Utilizând acest cod, harta scoate doar un singur oraș din matrice…Știu că am omis ceva în cod, așa că vă rog să mă ajutați…Întrebarea mea ar fi cum să populez corect graficul Google cu matricele pe care le-am interogat?

PS. Am citit întrebări conexe pe stackoverflow dar nu m-au ajutat în acest caz.

Comentarii

  • imprimați datele în consolă folosind console.log(data) înainte de a desena graficul. Cred că aceste date conțin doar un singur oraș –  > Por jsjunkie.
  • Și dacă oricum drawMarkers este apelat din interiorul unei bucle, atunci trebuie să păstrați var chart = new google.visualization.GeoChart(document.getElementById(‘italy’))); la nivel global, altfel doar ultimul oraș va fi trasat –  > Por jsjunkie.
  • Sunt sigur că există mai multe orașe. –  > Por Anurag Dhuramabad.
  • îmi pare rău, dar nu sunt sigur că am înțeles a doua parte… Ar trebui să mut această parte var chart = new google.visualization.GeoChart(document.getElementById(‘italy’))); chart.draw(data, options); în afara buclei? –  > Por Anurag Dhuramabad.
  • Doar prima linie. Lăsați codul chart.draw așa cum este. Nu trebuie să creați obiectul chart de fiecare dată în buclă –  > Por jsjunkie.
1 răspunsuri
jsjunkie

Acest lucru se datorează faptului că obiectul grafic este creat un nou obiect grafic de fiecare dată în cadrul buclei. Puteți muta următorul cod în afara buclei ca

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

Apoi, înlocuiți funcția drawMarkersMap cu

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

Apoi, din nou, în afara buclei ar trebui să utilizați

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

Păstrați ordinea codului. Este posibil să fie nevoie să remediați unele erori minore, deoarece nu am date pentru a testa

Comentarii

  • ce linii de cod ar trebui să rămână în afara buclei? pentru că am testat-o și acum nu mai afișează graficul, deci trebuie să fie o eroare undeva –  > Por Anurag Dhuramabad.
  • După câteva încercări, acum graficul dă eroarea: „Tabel de date incompatibil: Error: Tabelul conține mai multe coloane decât se aștepta (Se aștepta la 2 coloane)” – –  > Por Anurag Dhuramabad.
  • Doar drawMarkers ar trebui să fie în interiorul buclei acum. option și rawData ar trebui declarate înainte de începerea buclei, iar datele și graficul ar trebui definite după buclă –  > Por jsjunkie.
  • puteți să puneți, vă rog, niște cod? Cum l-ai aranja? Îmi pare rău, am încercat diferite aranjamente, dar fără rezultat –  > Por Anurag Dhuramabad.
  • Greșeala mea, am făcut o greșeală de inițializare în rawData. Mi-am editat codul acum. Verificați, ar trebui să funcționeze acum. Dacă totuși vă confruntați cu o problemă, voi posta un exemplu de eșantionare –  > Por jsjunkie.