Получение динамических значений из базы данных для построения динамических диаграмм

Question

Я хочу динамически извлекать значения из базы данных и графики с использованием графиков сплайнов Highcharts. Проблема в том, что я не могу определить способ передать значения функции Javascript без обновления всей функции, это построит весь график с нуля. Текущий код содержит массив, в котором он просто отображает массив и случайную функцию для генерации новых значений. Я хочу найти способ вставить новые значения в этот массив из базы данных с помощью PHP. Проблема в том, что я не знаю, как продолжать вызов запроса базы данных, не влияя на график. Некоторая помощь в построении графика динамически с использованием динамических значений из базы данных была бы полезна.

$(function() { 
    $(document).ready(function() { 
     Highcharts.setOptions({ 
      global: { 
       useUTC: false 
      } 
     }); 

     var chart; 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'spline', 
       marginRight: 10, 
       events: { 
        load: function() { 

         // set up the updating of the chart each second 
         var series = this.series[0]; 
         setInterval(function() { 
          var x = (new Date()).getTime(), // current time 
           y = Math.random(); 
          series.addPoint([x, y], true, true); 
         }, 1000); 
        } 
       } 
      }, 
      title: { 
       text: 'Trend analysis' 
      }, 
      xAxis: { 
       labels: { 
       rotation: 320 

      }, 
       type: 'datetime', 
       tickPixelInterval: 150 
      }, 
      yAxis: { 
       title: { 
        text: 'Value' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      credits:{ 
       enabled:false 
      }, 
      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b><br/>'+ 
         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
         Highcharts.numberFormat(this.y, 2); 
       } 
      }, 
      legend: { 
       enabled: false 
      }, 
      exporting: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'Random data', 
       data: (function() { 
        // generate an array of random data 
        var data = [], 
         time = (new Date()).getTime(), 
         i; 

        for (i = -19; i <= 0; i++) { 
         data.push({ 
          x: time + i * 1000, 
          y: Math.random() 
         }); 
        } 
        return data; 
       })() 
      }] 
     }); 
    }); 

}); 

Answer 1

Техника, которую вы ищете, называется ajax. Здесь javascript запрашивает больше данных с сервера без загрузки всей страницы. Основной подход:

1. Страница загружена и отображает начальную диаграмму.
2. Затем страница запрашивает дополнительные данные у пользователя. В jquery это делается с помощью вызова $ .ajax
3. Сервер отвечает еще некоторыми данными.
4. Javascript загружает эти данные в диаграмму, используя chart.series.addpoint или chart.series.setData.
5. Затем шаги с 2 по 5 повторяются через равные промежутки времени.

Highcharts имеет хорошую статью об этом здесь: http://docs.highcharts.com/#preprocessing-live-data с кодом примера. Вам нужно будет изменить php, чтобы читать данные из вашей базы данных, и вы можете изменить логику сдвига в javascript в зависимости от того, хотите ли вы, чтобы старые точки выпадали или оставались на графике.

Если вы не слишком велики, нецелесообразно возвращать весь набор данных каждый раз и использовать chart.series.setData для замены всей серии, вместо того чтобы делать это по пунктам. Необходимые здесь API-запросы документированы: http://api.highcharts.com/highcharts#Series