Я создаю простой график, основанный на базе данных, используя библиотеки из Codepen, которые:
У меня есть HTML файл, который просто отображает диаграмму, основные данные и обработка выполняются через файл index.js, который содержит статические значения для рисования графика. Файл:
$(function () {
var options = {
chart: {
renderTo: 'container'
},
subtitle: {
text: 'Subtitle'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickInterval: 4
},
/*** The following Values are needed to be fetched from DB which are now static */
series: [{
data: [89.9, 21.5, 16.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
},
chart = new Highcharts.Chart(options);
$('#redraw').click(function() {
console.log(chart.xAxis[0]);
chart.redraw();
});
});
Теперь я хочу создать файл PHP, который будет извлекать данные из базы данных и отправит его в файл JS.
$test=mysql_query("select id from tbl_graph");
$rowtest=mysql_fetch_array($test);
Теперь я хочу, чтобы данные, полученные из базы данных, были необходимы для отправки в файл Index.js, чтобы следующие статические значения в index.js могли быть подключены непосредственно из базы данных.
series: [{
data: [89.9, 21.5, 16.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
Буду признателен за любую помощь..
Ответ не так прямолинейный. Проще говоря, вам нужен запрос ajax для захвата данных с сервера.
Вот подробный шаг
Вам нужно создать php, который возвращает json
<?php
$return_arr = array();
$fetch = mysql_query("SELECT * FROM tbl_graph");
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array[] = $row['value'];
array_push($return_arr,$row_array);
}
echo json_encode($return_arr); // This will return [4,5,6,7] in json
?>
Обновите свой скрипт, чтобы получить данные с php
$(function () {
var options = {
chart: {
renderTo: 'container'
},
subtitle: {
text: 'Subtitle'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickInterval: 4
},
/*** The following Values are needed to be fetched from DB which are now static */
series: [{
data: [89.9, 21.5, 16.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
},
chart = new Highcharts.Chart(options);
$('#redraw').click(function() {
// whenever you click redraw, it will grab json from php file above
$.getJSON('http://yourpath.com/test.php', function (csv) {
chart.series[0].setData(csv,true);//then set data and return csv
}
});
});
Я не тестировал код. Вероятно, вам нужно выяснить, есть ли синтаксическая ошибка. но, надеюсь, вы получите представление о том, как получить json от php
В скрипте PHP вам нужно подготовить массивы и преобразовать в json функцию json_encode(). Тогда только то, что вам нужно, это использовать $.getJSON() в javascript и использовать ваши данные в высоких диаграммах.
Другим решением является инъекция php в javascript, как здесь:
http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database/