Я пытаюсь использовать высокие графики с использованием данных JSON из таблицы MySQL. я хочу установить выпадающий список со значениями, которые будут использоваться в качестве условия WHERE для mysql_query для выборки выбранных данных и заполнения их в старшей диаграмме.
коды работают должным образом со статическими условиями (без переменных drowpdown).
main.html
<form method="get" action="" >
Chose :
<select name="liste" id="liste">
<option value="A" <? if($selected == 'A'){ echo 'selected="Choice A"';}?>Choice A</option>
<option value="B" <? if($selected == 'B'){ echo 'selected="Choice B"';}?>Choice B</option>
<option value="C" <? if($selected == 'C'){ echo 'selected="Choice C"';} ?>Choice C</option>
<option value="D" <? if($selected == 'D'){ echo 'selected="Choice D"';} ?>Choice D</option>
</select>
<input type="submit" value="Go" />
</form>
data.php
`<?php
$A=$_GET['liste'];
$con = mysql_connect("localhost","myuser","mypwd");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydatabase", $con);
$test = mysql_query("SELECT name FROM table1 WHERE table2.age LIKE '{$A}'");
$rowss = array();
while($rr = mysql_fetch_array($test)) {
$ro[0] = $rr[0];
$ro[1] = $rr[1];
array_push($rowss,$ro);
}
print json_encode($rowss, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
в файле main.html у меня есть скрипт highchart, который вызывает файл data.php для получения данных json.
<script>
$(document).ready(function() {
//rest of the code
$.getJSON("data.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
</script>
тестирование data.php дает правильный вывод в соответствии с выбранным значением. так что я предполагаю, что все работает нормально. Моя проблема заключается в том, что при загрузке main.html он рисует пустой график и даже при изменении значения продолжает рисовать пустой график данных.
NB: я знаю mysql_*
больше не лучшая практика и планирует перейти на mysqli_*
потом.
РЕДАКТИРОВАТЬ:
похоже на мой options.series[0]
Параметры obj не создаются, и на консоли отображается пустой массив данных. когда используешь <form method="get" action="data.php" >
я получил ожидаемый массив, но не могу получить график.
Я пытаюсь этот запрос, он дает идеальный график.
for (var i=0; i<data.value.length; i++)
{
**series**.push({
name: data.value[i].name,
data:data.value[i].value
});
}var chart = new Highcharts.Chart({
chart: {
renderTo: 'graph_view',
defaultSeriesType: 'spline',
marginRight: 0,
marginBottom: 25
},
credits: {
text: '',
href: ''
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: data.orderDate,
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
align: 'top',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series:**series**});
}
});
}
}
Я получил работы, как я хотел в соответствии со следующим пример Мне пришлось сделать AJAX-вызов, чтобы установить переменную onchange раскрывающегося меню, и код стал таким (удалите тег формы и кнопку отправки)
main.html:
<select name="list" id="list">
<option value="A">Choice A</option>
<option value="B">Choice B</option>
<option value="C">Choice C</option>
<option value="D">Choice D</option>
</select>
<script>
$(function () {
//on page load
getAjaxData("A");
//on changing select option
$('#list').change(function(){
var val = $('#list').val();
getAjaxData(val);
});
function getAjaxData(id){
//use getJSON to get the dynamic data via AJAX call
$.getJSON('data.php', {id: id}, function(chartData) {
.....rest of the code
и data.php:
<?php
$con = mysql_connect("localhost","myuser","mypwd");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydatabase", $con);
$id = $_GET['id'];
$test = mysql_query("SELECT name FROM table1 WHERE table2.age LIKE '{$id}'");
$rowss = array();
while($rr = mysql_fetch_array($test)) {
$ro[0] = $rr[0];
$ro[1] = $rr[1];
array_push($rowss,$ro);
}
print json_encode($rowss, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
наслаждайся этим!!