Форум

mr_smit · #1 (**permalink**) 09.09.2020, 22:17

Здравствуйте. Есть устройство которое при помощи датчика измеряет атмосферное давление и сохраняет в своей памяти. Устройство имеет Wi-Fi соединение и при переходе по его ip адресу отдает браузеру html код в котором содержится 339 значений сохраненного давления и дата/время замера. Нужно отобразить это на графике. По Х дата/время, по Y величина давления. Устройство программирую я сам. Сейчас созданная html страница выглядит так:

<!DOCTYPE HTML>
<html><head>
<meta content = "text/html; charset=UTF-8" http-equiv = "content-type">
<script src="http://d3js.org/d3.v5.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
</head><body><script type="text/javascript">
var svg = dimple.newSvg("body", "100%", 910);
var data = [
{ "DateTime":"2020-09-03T20:00:00", "pressure":762},
{ "DateTime":"2020-09-03T21:00:00", "pressure":762},
{ "DateTime":"2020-09-03T22:00:00", "pressure":761},
{ "DateTime":"2020-09-03T23:00:00", "pressure":762},
{ "DateTime":"2020-09-04T00:00:00", "pressure":762},
{ "DateTime":"2020-09-04T01:00:00", "pressure":762},
{ "DateTime":"2020-09-04T02:00:00", "pressure":762},
{ "DateTime":"2020-09-04T03:00:00", "pressure":763},
{ "DateTime":"2020-09-04T04:00:00", "pressure":762},
{ "DateTime":"2020-09-04T05:00:00", "pressure":762},
{ "DateTime":"2020-09-04T06:00:00", "pressure":762},
{ "DateTime":"2020-09-04T07:00:00", "pressure":763},
{ "DateTime":"2020-09-04T08:00:00", "pressure":763},
{ "DateTime":"2020-09-04T09:00:00", "pressure":763},
{ "DateTime":"2020-09-04T10:00:00", "pressure":762},
{ "DateTime":"2020-09-04T11:00:00", "pressure":762},
{ "DateTime":"2020-09-04T12:00:00", "pressure":762},
{ "DateTime":"2020-09-04T13:00:00", "pressure":761},
{ "DateTime":"2020-09-04T14:00:00", "pressure":761},
{ "DateTime":"2020-09-04T15:00:00", "pressure":761},
{ "DateTime":"2020-09-04T16:00:00", "pressure":760},
{ "DateTime":"2020-09-04T17:00:00", "pressure":760},
{ "DateTime":"2020-09-04T18:00:00", "pressure":759},
{ "DateTime":"2020-09-04T19:00:00", "pressure":759},
{ "DateTime":"2020-09-04T20:00:00", "pressure":759},
{ "DateTime":"2020-09-04T21:00:00", "pressure":759},
{ "DateTime":"2020-09-04T22:00:00", "pressure":759},
{ "DateTime":"2020-09-04T23:00:00", "pressure":759},
{ "DateTime":"2020-09-05T00:00:00", "pressure":759},
{ "DateTime":"2020-09-05T01:00:00", "pressure":759},
{ "DateTime":"2020-09-05T02:00:00", "pressure":759},
{ "DateTime":"2020-09-05T03:00:00", "pressure":759},
{ "DateTime":"2020-09-05T04:00:00", "pressure":759},
{ "DateTime":"2020-09-05T05:00:00", "pressure":759},
{ "DateTime":"2020-01-01T00:00:00", "pressure":0},
{ "DateTime":"2020-01-01T00:00:00", "pressure":0},
{ "DateTime":"2020-01-01T00:00:00", "pressure":0}
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 30, "95%", 600);
var x = myChart.addCategoryAxis("x", "DateTime");
var y = myChart.addMeasureAxis("y", "pressure");
x.showGridlines = true;
x.fontSize = "auto";
x.title = "Дата/Время";
y.overrideMin = 700;
y.overrideMax = 800;
y.fontSize = "auto";
y.title = "Давление в мм рт.ст.";
myChart.addSeries(null, dimple.plot.line);
myChart.draw();
</script></body>

Использовал dimple библиотеку. Но при выводе всех 339 значений происходит сильное наложение даты и времени по оси Х, что делает ее нечитаемой.

Очень сильно понравился пример:
Brush & Zoom line chart
Здесь колёсиком мыши можно увеличивать или уменьшать график. Но там идет загрузка данных из csv файла. Как туда впихнуть мои строчки я не понимаю.

laimas · #2 (**permalink**) 09.09.2020, 23:21

Сообщение от mr_smit

Как туда впихнуть мои строчки я не понимаю

CSV, это данные в строках, каждые с новой строки, без ключей. То есть скрипт ожидает (на примере ваших данных), что сначала это дата, затем данные по дате

2020-09-03T20:00:00;762
2020-09-03T21:00:00;762
2020-09-03T22:00:00;761
.....

разделителем данных может быть запятая или точка с запятой. Выясните какой формат данных ожидается, и данные вашего объекта легко может преобразовать и в CSV. Хотя лучше почитать документацию, вполне возможно тип данных может быть и другим, включая и объектом.

mr_smit · #3 (**permalink**) 10.09.2020, 07:21

Сообщение от laimas

... Выясните какой формат данных ожидается ...

Если бы я это понимал, то тему не создавал.

Получается что dimple это надстройка над графической библиотекой D3. В D3 есть несколько методов загрузки:

Код:

d3.csv()
d3.json()
d3.tsv()
d3.xml()

Но они все работают с файлом. Если в dimple можно в код страницы вставить:

var data = [
{ "DateTime":"2020-09-03T20:00:00", "pressure":762},
{ "DateTime":"2020-09-03T21:00:00", "pressure":761},
...
{ "DateTime":"2020-09-05T05:00:00", "pressure":759},
{ "DateTime":"2020-01-01T00:00:00", "pressure":0}
];

значит они как то переходят от var data =[] к D3 и рисуют график. Вопрос как? Как вообще график с масштабированием нарисовать? Чтобы все данные были внутри html кода.

laimas · #4 (**permalink**) 10.09.2020, 10:42

Сообщение от mr_smit

Если бы я это понимал

Опа, а как же вы собираетесь использовать и писать. Выяснить и использовать, это готовое, которое уже предлагает различные графики по входным параметрам определенного типа. А просто использовать D3, значит самим писать и график, и не быть лимитированным в формате входных данных.

voraa · #5 (**permalink**) 10.09.2020, 10:45

Сообщение от mr_smit

В D3 есть несколько методов загрузки:
Код:
d3.csv()
d3.json()
d3.tsv()
d3.xml()
Но они все работают с файлом.

Но результатом этой работы как раз и есть

var data = [
{},{}, {}...
]
Который передается в функцию обратного вызова

Сообщение от mr_smit

значит они как то переходят от var data =[] к D3 и рисуют график. Вопрос как?

В примере, который вы привели
https://bl.ocks.org/EfratVil/92f894a...11e73f633a3e2f
есть исходный код.
Там есть вызов

d3.csv("CIMIS_Station_125.csv", type, function (error, data) {
...
})

Очевидно внутри функции функции обратного вызова, которая получает массив data и происходит вся работа