Afisare date cu Google Chart

Secţiune dedicată începatorilor.

Moderatori: Moderatori, Start Moderator

liviu15
New Member
Mesaje: 2
Membru din: Dum Ian 15, 2017 8:09 pm

Afisare date cu Google Chart

Mesajde liviu15 » Dum Ian 15, 2017 8:26 pm

Salut!
Sunt incepator in domeniu.
Am reusit sa afisez datele din baza de date pe o diagrama liniara de la Google Line Chart si vreau sa pot selecta o anumita zona din diagrama pentru a vedea acele date selectate.
Am citit aici https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#data-format ca pot folosi functia " explorer: { actions: ['dragToZoom', 'rightClickToReset'] } " si nu functioneaza.
Am mai obs ca diagrama mea are doar linii orizontale, nu ca la celelalte exemple care au si linii verticale.
Imi spuneti unde este problema si cum sa o rezolv?

get_json.php

Cod: Selectaţi tot

<?php
   session_start();
   require_once("bdconect.php");
 
mysql_select_db($numebd, $conn);

$query = mysql_query('SELECT * FROM data');

$table = array();
$table['cols'] = array(
   array('label' => 'data', 'type' => 'string'),
    array('label' => 'Weight', 'type' => 'number'),
   array('label' => 'Temperature', 'type' => 'number')
);

$rows = array();
while($r = mysql_fetch_assoc($query)) {
    $temp = array();
   $temp[] = array('v' => $r['data']);
   $temp[] = array('v' => $r['weight']);
   $temp[] = array('v' => $r['temp']);
    $rows[] = array('c' => $temp);
}
$table['rows'] = $rows;

$jsonTable = json_encode($table);

echo $jsonTable;
?>


chart.php

Cod: Selectaţi tot

<html>
   <head>
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script type="text/javascript">
         google.load('visualization', '1', {'packages':['corechart']});
         google.setOnLoadCallback(drawChart);

         function drawChart() {
            var json = $.ajax({
               url: 'get_json.php',
               dataType: 'json',
               async: false
            }).responseText;
            
            var data = new google.visualization.DataTable(json);
            var options = {
               hAxis: {
                  title: 'Data'
                  },
               vAxis: {
                  title: 'Value'
                  },
               explorer: {
                  actions: ['dragToZoom', 'rightClickToReset']
                  axis: 'horizontal',
                  keepInBounds: true,
                  maxZoomIn: 4.0 }                  
               };
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
         }
      </script> 
   </head>
   <body>
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
   </body>
</html>
Fişiere ataşate
data.jpg
data.jpg (27.08 KiB) Vizualizat de 1772 ori
bd.jpg
bd.jpg (55.7 KiB) Vizualizat de 1772 ori
graf.jpg
graf.jpg (33.71 KiB) Vizualizat de 1772 ori



nevvermind
Senior Member
Mesaje: 1264
Membru din: Mar Iun 22, 2010 3:17 pm

Re: Afisare date cu Google Chart

Mesajde nevvermind » Lun Ian 16, 2017 4:50 pm

JSON-ul creat de tine nu-i decat un obiect de configuratie si date. Trebuie sa pasezi configuratia in el. Tu deocamdata il populezi numai cu datele din DB.
Incearca asta

Cod: Selectaţi tot

//... populare array $table

$table['explorer'] = ['actions' => ['dragToZoom', 'rightClickToReset']]];

echo json_encode($table);


PS: Cand spui ca nu functioneaza ceva, spune si ce anume. Da-ne si ce ai incercat inainte etc. Detalii.
Facusi un canal de php pe freenode - ##php-ro : https://webchat.freenode.net/

nevvermind
Senior Member
Mesaje: 1264
Membru din: Mar Iun 22, 2010 3:17 pm

Re: Afisare date cu Google Chart

Mesajde nevvermind » Lun Ian 16, 2017 5:04 pm

Nah. Ai facut bine. Datele sunt separate de configuratie. Habar n-am de ce nu-ti merge. Dar!

Nu-i bine sa faci AJAX-ul sincron (async: false), ca nu mai are rost sa-l folosesti. Cel mai bine pui un callback de success, exact cum faci deja cu Gugal API cu setOnLoadCallback();

Cod: Selectaţi tot

$.getJSON("get_json.php")
    .done(function(rows) {
        var data = new google.visualization.DataTable(rows);
            var options = {
               hAxis: {
                  title: 'Data'
                  },
               vAxis: {
                  title: 'Value'
                  },
               explorer: {
                  actions: ['dragToZoom', 'rightClickToReset']
                  axis: 'horizontal',
                  keepInBounds: true,
                  maxZoomIn: 4.0 }                 
               };
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
    })
    .fail(function() {
        alert("There's been a problem getting the Google API config.");
    });


done() si fail() sunt pt jquery 3.0+. Pt versiuni mai mici, foloseste success() si error().
Facusi un canal de php pe freenode - ##php-ro : https://webchat.freenode.net/

liviu15
New Member
Mesaje: 2
Membru din: Dum Ian 15, 2017 8:09 pm

Re: Afisare date cu Google Chart

Mesajde liviu15 » Mie Ian 18, 2017 2:30 pm

Multumesc, nevvermind!

Il voi incerca zilele urmatoare.


Înapoi la “PHP Incepători”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 77 vizitatori