Здравствуйте. Есть устройство которое при помощи датчика измеряет атмосферное давление и сохраняет в своей памяти. Устройство имеет 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 файла. Как туда впихнуть мои строчки я не понимаю.