2014-01-06 4 views
0

Я пытаюсь обновить диаграмму высотных диаграмм высоких чартов с помощью живых данных из json-файла на моем сервере.Добавление живых данных в highstock Использование json-файла

теперь у меня есть график, который получает данные из файла JSON (который я создаю с PHP, который запрашивает данные из моей базы данных MySQL), как так:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>OKcoin Price LTCCNY</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
$(function() { 
$.getJSON('json/lastTradesOkcoinLTCCNY.json', function(data) { 

    Highcharts.setOptions({ 
     global: { 
      useUTC: false 
     } 
    }); 
    // create the chart 
    $('#container').highcharts('StockChart', { 


     rangeSelector : { 
      selected : 1 
     }, 

     title : { 
      text : 'OkCoin Price LTCCNY' 
     }, 

     rangeSelector: { 
      buttons: [{ 
       type: 'hour', 
       count: 1, 
       text: '1h' 
      }, { 
       type: 'hour', 
       count: 6, 
       text: '6h' 
      }, { 
       type: 'hour', 
       count: 12, 
       text: '12h' 
      }, { 
       type: 'hour', 
       count: 24, 
       text: '24h' 
      }, { 
       type: 'day', 
       count: 3, 
       text: '3d' 
      }, { 
       type: 'day', 
       count: 7, 
       text: '7d' 
      }, { 
       type: 'all', 
       text: 'All' 
      }],    
      selected: 2 
     }, 

     xAxis: { 
      gridLineWidth: 1, 
      title: { 
       enabled: true, 
       text: 'Time', 
       style: { 
       fontWeight: 'normal' 
       } 
      } 
     }, 


     yAxis: [{ 
      title: { 
       text: 'Price LTCCNY' 
      }, 
      gridLineWidth: 1, 
      minorTickInterval: 'auto', 
      minorTickColor: '#FEFEFE', 
      labels: { 
       align: 'right' 
      }    
     }], 

     plotOptions: { 
      series: { 
       lineWidth: 1 
      } 
     }, 

    tooltip: { 
     valueDecimals: 5, 
     valuePrefix: '$ ' 
    }, 

     series : [{ 
      name : 'LTCCNY Price', 
      data : data, 
      dataGrouping : { 
       units : [ 
        ['minute', 
         [1, 5, 10, 15, 30] 
        ], ['hour', // unit name 
         [1] 
        ] 
       ] 
      } 
     }] 
    }); 

}); 
}); 

    </script> 
</head> 
<body> 
<script src="../Highstock/js/highstock.js"></script> 
<script src="../Highstock/js/modules/exporting.js"></script> 

<div id="container" style="height: 500px; min-width: 500px"></div> 
</body> 
</html> 

До сих пор никаких проблем, я получаю диаграмму из файла json. Но, конечно, он не обновляется, если новые данные становятся доступными (только если я перезагружаю страницу).

Что я хочу сделать, это загрузить эту диаграмму, добавить к ней текущие данные по мере ее появления.

что-то вроде this example, но вместо случайных данных диаграмма будет обновляться данными из (второго) живого обновления json-файла на моем веб-сервере. Json-файл будет создан php (эта часть работает просто отлично). Но я не могу понять, как добавить данные из json-файла в мою существующую диаграмму highstock.

Я также нашел this этот пример на highcharts.com, и это более или менее делает то, что я пытаюсь сделать, но я не могу интегрировать функцию requestData в мою существующую диаграмму.

Так что я хочу использовать функцию «requestData» из второго примера с высокой ценой, которую у меня уже есть. Мой второй файл в формате JSON (с реальными данными) выглядит так же, как во втором примере (метка времени, цена):

[1389022968000,173.3] 

Может кто-нибудь помочь мне немного?

ответ

0

фигу, я понял это сам ...

вот мое решение:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

    <title>OKCoin LTCCNY Price</title> 

    <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    var chart; // global 

    function requestData() { 
     $.ajax({ 
      url: 'tickOkCoinLTCCNY.json', 
      success: function(point) { 
       var series = chart.series[0], 
        shift = series.data.length > 2; // shift if the series is longer than 20 

       // add the point 
       chart.series[0].addPoint(eval(point), true, shift); 

       // call it again after one second 
       setTimeout(requestData, 10000); 
      }, 
      cache: false 
     }); 
    } 


$(function() { 
$.getJSON('../okcoin/json/lastTradesOkcoinLTCCNY.json', function(data) { 


    // set the allowed units for data grouping 
    var groupingUnits = [[ 
     'minute',       // unit name 
     [1,5,15,30]        // allowed multiples 
    ], [ 
     'hour', 
     [1, 2, 3, 4, 6] 
    ]]; 

    // create the chart 
    chart = new Highcharts.StockChart({ 
     chart: { 
      renderTo: 'container', 
      events: { 
        load: requestData 
       } 


     }, 

     rangeSelector: { 
      buttons: [{ 
       type: 'hour', 
       count: 1, 
       text: '1h' 
      }, { 
       type: 'hour', 
       count: 6, 
       text: '6h' 
      }, { 
       type: 'hour', 
       count: 12, 
       text: '12h' 
      }, { 
       type: 'hour', 
       count: 24, 
       text: '24h' 
      }, { 
       type: 'day', 
       count: 3, 
       text: '3d' 
      }, { 
       type: 'day', 
       count: 7, 
       text: '7d' 
      }, { 
       type: 'all', 
       text: 'All' 
      }],    
      selected: 2 
     }, 

     title: { 
      text: 'OKCoin LTCCNY Price' 
     }, 

     xAxis: { 
     type: 'datetime', 
      gridLineWidth: 1, 
      title: { 
       enabled: true, 
       text: 'Time', 
       style: { 
       fontWeight: 'normal' 
       } 
      } 
     }, 


     yAxis: [{ 
      title: { 
       text: 'LTCCNY' 
      }, 

      lineWidth: 2 
     }], 

     series: [{ 
      name: 'LTCCNY', 
      data: data, 
      dataGrouping: { 
       units: groupingUnits 
      } 
     }] 

     }); 
    }); 
}); 

    </script> 
</head> 
<body> 
<script src="../Highstock/js/highstock.js"></script> 
<script src="../Highstock/js/modules/exporting.js"></script> 

<div id="container" style="height: 500px; min-width: 500px"></div> 
</body> 
</html>