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>