Как интегрировать динамический граф на веб-странице?

-2

Я получаю динамически генерируемые данные из моего малинового PI в формате .csv, и я хочу создать веб-страницу для моего института для анализа формы сигнала. Основная особенность этого графика заключается в том, что график должен автоматически обновляться в соответствии с измененными данными. Как мне это сделать?Как интегрировать динамический граф на веб-странице?

источник

2015-12-21 Jatin Narula

*** o.0 что вы пробовали? *** – nicael

использовать плагин для диаграммы на графике, в нем есть почти все типы графиков и генерировать из ваших динамических данных – Shree29

есть несколько библиотек, которые вы можете использовать. Я склонен использовать Chart.js. (http://www.chartjs.org/) –

Я предполагаю, что решение, которое вы ищете, должно работать в HTML 5 и JavaScript, где нет обработки на стороне сервера. Малиновый pi отправляет файл на сервер. Мы используем Моррис диаграммы, который является библиотекой JavaScript http://morrisjs.github.io/morris.js/ Morris использует формат JSON 1: читать CSV файл 2: преобразовать данные в формате CSV для объекта JSon 3: инициализировать таблицу

попробовать этот пример CSV данные

"прошло", "значение", "б окт-12", 24,2 "октябрь-13", 34,22 "октябрь-14", 33,7 "октябрь-15" , 22,6 «окт-16», 28,17 «окт-17», 60,15 «окт-18», 60 , 17 "Октябрь-19", 70,7 "Октябрь-20", 67,18 "Октябрь-21", 86,18 "Октябрь-22", 86,18

$(document).ready(function() { 
 

 
    $.ajax({ 
 
    url: "linechartdata.csv", 
 
    success: function(data) { 
 
     processData(data) 
 
    } 
 
    }); 
 
}); 
 

 

 
function processData(data) { 
 
    var record_num = 3; // or however many elements there are in each row 
 
    var dataLines = data.split(/\r\n|\n/); 
 
    var entries = dataLines[0].split(','); 
 
    var records = []; 
 

 
    var headers = entries.splice(0, record_num); 
 
    console.log(dataLines.length) 
 
    for (var i = 1; i < dataLines.length; i++) { 
 
    var obj = dataLines[i].split(','); 
 
    if (obj.length == headers.length) { 
 
     var tarr = []; 
 
     for (var j = 0; j < headers.length; j++) { 
 
     //doing it this way to get strings and numbers 
 
     var field01; 
 
     var field02; 
 
     var field03; 
 
     if (j == 0) { 
 
      field01 = obj[j] 
 
     } 
 
     if (j == 1) { 
 
      field02 = obj[j] 
 
     } 
 
     if (j == 2) { 
 
      field03 = obj[j] 
 
     } 
 
     var o = { 
 
      elapsed: field01, 
 
      value: field02, 
 
      b: field03 
 
     } 
 
     records.push(o); 
 
     }  
 
    } 
 
    } 
 
    initChart(records) 
 
} 
 

 
function initChart(records) { 
 

 
    var chart = Morris.Line({ 
 
    element: 'morris-chart-network', 
 
    data: records, 
 
    axes: false, 
 
    xkey: 'elapsed', 
 
    ykeys: ['value', 'b'], 
 
    labels: ['Download Speed', 'Upload Speed'], 
 
    yLabelFormat: function(y) { 
 
     return y.toString() + ' Mb/s'; 
 
    }, 
 
    gridEnabled: false, 
 
    gridLineColor: 'transparent', 
 
    lineColors: ['#5b6b79', '#a5a5a5'], 
 
    lineWidth: [2, 1], 
 
    pointSize: [0, 2], 
 
    fillOpacity: .7, 
 
    gridTextColor: '#999', 
 
    parseTime: false, 
 
    resize: true, 
 
    behaveLikeLine: true, 
 
    hideHover: 'auto' 
 
    }); 
 
};

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Morris Chart</title> 
 
</head> 
 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
 

 
<body> 
 
    <div>Morris Chart</div> 
 
    <div id="morris-chart-network" style="width:800px;height:600px"> 
 
    </div> 
 
    <div> 
 
    example 
 
    </div>

источник

2015-12-21 21:33:22 T1mark

Как интегрировать динамический граф на веб-странице?

ответ

Смежные вопросы