Извлечение значений для диаграммы с использованием JSON для диаграммы, управляемой базой данных (highchart.js)

0

Я создаю простой график, основанный на базе данных, используя библиотеки из Codepen, которые:

ЭТО и Highchart.js

У меня есть 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]
    }]

Буду признателен за любую помощь..

  • 0
    Вам понадобится AJAX для вызова сервера. Проверьте этот пример
  • 0
    Спасибо за вашу помощь , но то , что проблема я столкнулся в том , что мне нужно , чтобы получить значения только в JavaScript , и не хочу , чтобы отобразить их в HTML , как, что и в ссылке , которую вы упомянули: Пожалуйста , обратитесь к линии там: $ ( '#output'). html ("<b> id: </ b>" + id + "<b> name: </ b>" + vname); // Установить выходной элемент html
Показать ещё 1 комментарий
Теги:
highcharts

2 ответа

1
Лучший ответ

Ответ не так прямолинейный. Проще говоря, вам нужен запрос ajax для захвата данных с сервера.

Вот подробный шаг

  1. Вам нужно создать 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

?>

  2. Обновите свой скрипт, чтобы получить данные с 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

Поделиться
  • 0
    Привет, код ничего не отображал, поэтому я протестировал вывод PHP-файла отдельно, для которого я получил вывод: [["1"], ["1", "2"], ["1", " 2" , "3"], [ "1", "2", "3", "4"], [ "1", "2", "3", "4", "7"], [» 1" , "2", "3", "4", "7", "8"], [ "1", "2", "3", "4", "7", "8",» 5 "], [" 1 "," 2 "," 3 "," 4 "," 7 "," 8 "," 5 "," 6 "]] Я не очень опытный в этом, поэтому я бы признателен, если вы можете помочь мне немного. Теперь эти данные передаются в файл mu JS, и я не могу увидеть ни одного выходного графика!
  • 0
    На самом деле у меня есть ваша логика, и даже у меня в голове было то же самое, но вы дали большую картину, так что спасибо. Но все же я не получаю точный результат, который я хочу, поэтому просто нужно руководство. Спасибо!
Показать ещё 1 комментарий
0

В скрипте PHP вам нужно подготовить массивы и преобразовать в json функцию json_encode(). Тогда только то, что вам нужно, это использовать $.getJSON() в javascript и использовать ваши данные в высоких диаграммах.

Другим решением является инъекция php в javascript, как здесь:

http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню