Google CHARTS с использованием методов json, $ _GET и $ _POST
Мне нужна помощь, я использую API Google Charts, но когда я пытаюсь получить некоторые параметры, используя POST и GET, он не рисует график.
Как я могу улучшить код для достижения цели?
заранее спасибо
SQL-запрос:
SELECT answers,COUNT(*) as count FROM surveys
where company_area ='human resources' and date >= '2014-11-01' and
date <= '2014-12-31'GROUP BY answers ORDER BY count DESC
Результат phpmyadmin после запуска запроса.
Answers count(*)
YES 23
NO 1
выход JSON.
{"cols":
[ {"label":"Answers",
"type":"string"},{"label":"Answers","type":"number"}],
"rows":[
{"c":[{"v":"YES"},{"v":23}]},
{"c":[{"v":"NO"},{"v":1}]
}]}
get_json.php
<?php
$con = mysql_connect('localhost', 'root', '') or die('Error connecting to server');
mysql_select_db('sistema_encuestas', $con);$q = $_GET['q'];
$a = $_GET['a'];// write your SQL query here (you may use parameters from $_GET or $_POST if you need them)
$query = mysql_query("SELECT areas_evaluacion.nombre_area, AVG(encuestas.respuestas) AS Promedio
FROM encuestas
INNER JOIN areas_evaluacion on areas_evaluacion.id = encuestas.id_area_evaluacion
WHERE encuestas.fechaentrevista>='".$q."' and encuestas.fechaentrevista<='".$a."'
Group by encuestas.id_area_evaluacion");$table = array();
$table['cols'] = array(
array('label' => 'respuestas', 'type' => 'string'),
array('label' => 'Respuestas', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($query)) {
$temp = array();
// each column needs to have data inserted via the $temp array
$temp[] = array('v' => $r['nombre_area']);
//$temp[] = array('v' => (int)$r['id_area_evaluacion']);
$temp[] = array('v' => (float)$r['Promedio']); // typecast all numbers to the appropriate type (int or float) as needed - otherwise they are input as strings
// insert the temp array into $rows
$rows[] = array('c' => $temp);
}
// populate the table with rows of data
$table['rows'] = $rows;
// encode the table as JSON
$jsonTable = json_encode($table);
// set up header; first two prevent IE from caching queries
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
// return the JSON data
echo $jsonTable;
?>
chart.php
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart(num,num2) {
var json = $.ajax({
url: 'get_json_areas_por_dia.php', // make this url point to the data file
dataType: 'json',
data: "q="+num ,"a="+num2,
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(json);
var options = {
title: 'Estadísticas por Áreas Por dia',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
//do not forget to check ur div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);}
</script>
</head>
<body><form>
<input type="date" name="date1" onchange="drawChart(this.value)">
<input type="date" name="date2" onchange="drawChart(this.value)">
<select name="users" onchange="drawChart(this.value)">
</form>
<div id="chart_div"></div>
</body>
</html>
Решение
Я исправил это, добавив отсутствующий ‘в URL JSON
PHP
echo ' {"cols":
[ {"label":"Answers",
"type":"string"},{"label":"Answers","type":"number"}],
"rows":[
{"c":[{"v":"YES"},{"v":23}]},
{"c":[{"v":"NO"},{"v":1}]
}]}';
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var json = $.ajax({
url: 'get_json.php', // make this url point to the data file
dataType: 'json',
async: false,
type: 'GET'
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(json);
var options = {
title: 'My Weekly Plan',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
//do not forget to check ur div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
setInterval(drawChart, 500 );
}
</script>
<div id="chart_div"></div>
</body>
</html>
Другие решения
Других решений пока нет …