Линейная диаграмма Javascript в реальном времени - PullRequest
Новая
       57

Линейная диаграмма Javascript в реальном времени

0 голосов
/ 23 января 2012

В моем приложении есть небольшая функция, которая должна представлять данные в реальном времени на веб-странице.Я пытался исследовать некоторые примеры Javascript, такие как пример Flot «обновления в реальном времени», пример Highcharts «обновление сплайна каждую секунду».Я думаю, что они оба могут выполнить это.Но я только начал изучать JavaScript.Прямо сейчас застреваю и совершенно не знаю, как выполнить мою функцию.Я был бы очень признателен, если бы я мог получить помощь от вас.У меня есть небольшой бюджет из моих карманных денег для поддержки моих интересов.Я счастлив заплатить плату за обучение для этого кода.

В основном я могу показать 100 числовых переменных на одной странице, например 3301, 4390, 3802….Они обновляются каждые полсекунды.Теперь мне нужно создать линейную диаграмму, которая отображает эти числа в виде серии точек, соединенных отрезками.Полная функциональность веб-страницы позволяет визуализировать данные в реальном времени (около 800 точек) на динамическом графике по временной последовательности.Другими словами, эта линейная диаграмма может отображать исторические данные за предопределенный период вместе с последними данными.

У меня есть 100 переменных из одного файла JavaScript с именем T1.js.Некоторые части кода следующие: 

function get_data_loop()
{
...
setTimeout("get_data_loop()",500);
}

...

function process_data(data)
{
var parsed = data.split( "\n" );
var a1 = parseInt(parsed[0],10);
var a2 = parseInt(parsed[1],10);
var a3 = parseInt(parsed[2],10);
var a4 = parseInt(parsed[3],10);
var a5 = parseInt(parsed[4],10);
...
var a97 = (parseInt(parsed[96],10));
var a98 = (parseInt(parsed[97],10));
var a99 = (parseInt(parsed[98],10));
var a100 = (parseInt(parsed[99],10));

document.getElementById("display_a1").value = a1;
document.getElementById("display_a2").value = a2;
document.getElementById("display_a3").value = a3;
...
document.getElementById("display_a98").value = a98;
document.getElementById("display_a99").value = a99;
document.getElementById("display_a100").value = a100;
}

И тогда я просто знаю, как показать эти цифры в index.html.Код: 

<td><input type="text" id="display_a1" value="0" onFocus="blur(this);"/></td>
<td><input type="text" id="display_a1" value="0" onFocus="blur(this);"/></td>
<td><input type="text" id="display_a3" value="0" onFocus="blur(this);"/></td>
<td><input type="text" id="display_a4" value="0" onFocus="blur(this);"/></td>
<td><input type="text" id="display_a5" value="0" onFocus="blur(this);"/></td>
...

Это все, что я сделал.Полностью беспорядок в моей голове.Понятия не имею, как отобразить эти числа в линейном графике.

Можно ли посоветовать мне, как я могу использовать любой компонент построения диаграмм для его создания?

1 Ответ

2 голосов
/ 23 января 2012

Я бы предложил использовать библиотеку javascript D3 , поскольку существуют существующие компоненты для создания ряда графиков, включая линейные.Вот учебник от Tulp Interactive, который должен помочь вам.

...