Google Charts - многосерийный, динамический линейный график из внешнего текстового файла - PullRequest
Новая
       54

Google Charts - многосерийный, динамический линейный график из внешнего текстового файла

0 голосов
/ 14 января 2019

Я пытаюсь создать динамическую линейную диаграмму в диаграммах Google, используя внешние данные из текстового файла. Я могу заставить работать диаграмму из одной серии, но я не добился успеха в дополнительных сериях. Что я пытаюсь:

Ось X: время (необязательная точка данных, и я могу удалить ее при необходимости) Ось Y: клиент и ценность

* * # 1005 # # # # # # # # # # # #

Обновление: после игры с кодом, скриншот ниже, где я застрял. Я обновил код и исходный текст / данные CSV ниже, чтобы отразить результаты на скриншоте:

image

Пример моего текстового файла: 

12:00 1 -63
12:00 2 -57
1:00 1 -65
1:00 2 -51
2:00 1 -53
2:00 2 -47
3:00 1 -63
3:00 2 -57
4:00 1 -65
4:00 2 -51
5:00 1 -53
5:00 2 -47

HTML / PHP: 

<!DOCTYPE html>
<html>
    <head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);



  function drawChart () {
function datarefresh () {
      $.ajax({
          url: '/hsd/tmp/24SignalStrength.csv',
          type: 'get',
          success: function (txt) {
              var dataArray = [['Time','Client','Value']];
              var txtArray = txt.split('\n');
              for (var i = 0; i < txtArray.length; i++) {
                  var tmpData = txtArray[i].split(/\s+/);
                  dataArray.push([(tmpData[0]), parseInt(tmpData[1]), parseInt(tmpData[2])]);
              }
              var data = google.visualization.arrayToDataTable(dataArray);
              var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
              var options = {
        'title':'2.4GHz Connected Clients Signal Strength',
        'width':800,'height':600,
        'curveType':'function',
//      legend: 'none'
};
              chart.draw(data,options);
          }
      });
  }

setInterval(datarefresh, 1000);
}
  google.load('visualization', '2', {packages:['corechart'], callback: drawChart});


</script>
    </head>


 <body>
<div id="chart_div"></div>
 </body>
</html>
...