Есть код html страницы
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/bootstrap-theme.css">
<link rel="stylesheet" href="/css/style.css">
<script src="/js/jquery-3.2.1.min.js"></script>
<!-- CDN -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
</head>
<body>
<div class="container">
<p class="h3" style="text-align: center;">График</p>
<br>
<div class="form-group">
<label for="sel1">Выберите значение:</label>
<select class="form-control" onChange="showSumm(this.value)" id="sel">
<option value="Барнаул" selected>Барнаул</option>
<option value="Итого по Компании">Итого по Компании</option>
</select>
</div>
<br>
</div>
<!-- отправка гет запроса с параметром q в файл json.php -->
<script>
function showSumm(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","json.php?q="+str,true);
xmlhttp.send();
}
}
</script>
<div class="container" id="container2" style="height: 500px; min-width: 310px"></div>
<script>
Highcharts.setOptions({
lang: {
loading: 'Загрузка...',
months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек'],
exportButtonTitle: "Экспорт",
printButtonTitle: "Печать",
rangeSelectorFrom: "С",
rangeSelectorTo: "По",
rangeSelectorZoom: "Период",
downloadPNG: 'Скачать PNG',
downloadJPEG: 'Скачать JPEG',
downloadPDF: 'Скачать PDF',
downloadSVG: 'Скачать SVG',
printChart: 'Напечатать график'
}
});
</script>
<script type="text/javascript">
$.getJSON('test.json', function (data) { //test.json или json.php
// Набор данных из таблицы
var data_from_db = [],
dataLength = data.length,
i = 0;
for (i; i < dataLength; i += 1) {
data_from_db.push([
data[i][0] * 1000, // data в unix
data[i][1], // data_from_db
]);
}
Highcharts.stockChart('container2', {
rangeSelector: {
selected: 1,
buttons: [{
type: 'day',
count: 1,
text: '1дн'
}, {
type: 'week',
count: 1,
text: 'нед'
}, {
type: 'month',
count: 1,
text: 'мес'
}, {
type: 'year',
count: 1,
text: 'год'
}, {
type: 'all',
text: 'Всё'
}]
},
yAxis: [{
labels: {
align: 'center',
x: -3
},
height: '50%',
lineWidth: 1,
resize: {
enabled: true
}
}],
tooltip: {
split: true
},
series: [{
type: 'column',
name: 'Общая сумма',
data: data_from_db,
yAxis: 0
}]
});
});
</script>
</body>
</html>
Есть php файл который при наличии GET запроса выполняет выборку данных из БД и записывает всё в файл test.json
<?php
//подключаем файл с паролями к бд
require_once './connect.php';
date_default_timezone_set( 'UTC' );
$q = $_GET['q'];
if (empty($q)) {
// если пусто то назначаем переменной по умолчанию 'Барнаул'
$q = 'Барнаул';
printf($q);
}
elseif (!empty($q)) {
// иначе используем переменную q
$q = $_GET['q'];
printf($q);
}
// ну тут всё понятно, открываем соединение, выполняем запрос, разбираем ответ в массив $all, пишем в файл и закрываем соединение
$mysqli = new mysqli($host, $user, $password, $database);
$query = <<<EOT
SELECT
var1.`date`,
var1.`field_value` as name,
var2.`field_value` as value,
var1.`line_number`
FROM
`online`.`VariablesValuesView` AS var1
JOIN
`online`.`VariablesValuesView` AS var2
ON (var1.`line_number` = var2.`line_number`)AND (var1.`exchange_number` = var2.`exchange_number`)AND (var1.`id_variable`<>var2.`id_variable`)AND(var1.`id_variable` = 1) AND(var2.`id_variable` = 2)
WHERE var1.`field_value` = '$q' AND var1.`date` >= NOW() - INTERVAL 365 day
EOT;
$result = $mysqli->query($query);
while ($record = $result->fetch_row()){
$all[] = array(strtotime($record[0]), (float)$record[2]);
// $all[] = array(strtotime($record[0]), $record[2]);
}
// echo json_encode($all); //на случай если нужно использовать файл json.php
file_put_contents('test.json', json_encode($all)); // пишем в файл test.json
$mysqli->close();
?>
Как заставить обновляться график автоматически при выборе значения из select?
Пробовал $('#container2').highcharts().redraw();
не дало результатов.. В js не силен особо. Были попытки даже обновлять div отдельно от страницы но это тоже не работает
[[1576533566,696857.12],[1576619725,738142.7],[1576706127,815921.72],[1576792544,855398.15]]