Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2020, 23:17
Аватар для mr_smit
Новичок на форуме
Отправить личное сообщение для mr_smit Посмотреть профиль Найти все сообщения от mr_smit
 
Регистрация: 09.09.2015
Сообщений: 9

Нарисовать график с возможностью увеличения
Здравствуйте. Есть устройство которое при помощи датчика измеряет атмосферное давление и сохраняет в своей памяти. Устройство имеет 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 файла. Как туда впихнуть мои строчки я не понимаю.
Изображения:
Тип файла: jpg IMG_20200904_181445.jpg (329.7 Кб, 8 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 10.09.2020, 00:21
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

разделителем данных может быть запятая или точка с запятой. Выясните какой формат данных ожидается, и данные вашего объекта легко может преобразовать и в CSV. Хотя лучше почитать документацию, вполне возможно тип данных может быть и другим, включая и объектом.
Ответить с цитированием
  #3 (permalink)  
Старый 10.09.2020, 08:21
Аватар для mr_smit
Новичок на форуме
Отправить личное сообщение для mr_smit Посмотреть профиль Найти все сообщения от mr_smit
 
Регистрация: 09.09.2015
Сообщений: 9

Сообщение от 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 кода.

Последний раз редактировалось mr_smit, 10.09.2020 в 08:28.
Ответить с цитированием
  #4 (permalink)  
Старый 10.09.2020, 11:42
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от mr_smit
Если бы я это понимал
Опа, а как же вы собираетесь использовать и писать. Выяснить и использовать, это готовое, которое уже предлагает различные графики по входным параметрам определенного типа. А просто использовать D3, значит самим писать и график, и не быть лимитированным в формате входных данных.
Ответить с цитированием
  #5 (permalink)  
Старый 10.09.2020, 11:45
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,018

Сообщение от 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 и происходит вся работа
Ответить с цитированием
  #6 (permalink)  
Старый 10.09.2020, 12:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,921

Сообщение от mr_smit
Нарисовать график с возможностью увеличения
https://www.highcharts.com/demo/line-time-series
Ответить с цитированием
  #7 (permalink)  
Старый 10.09.2020, 14:42
Аватар для mr_smit
Новичок на форуме
Отправить личное сообщение для mr_smit Посмотреть профиль Найти все сообщения от mr_smit
 
Регистрация: 09.09.2015
Сообщений: 9

Сообщение от laimas Посмотреть сообщение
Опа, а как же вы собираетесь использовать и писать.
Это не имеет отношения к сути вопроса. Я пытаюсь разобраться. С этой областью никогда не сталкивался.

Сообщение от voraa Посмотреть сообщение
Очевидно внутри функции функции обратного вызова, которая получает массив data и происходит вся работа
Мне не очевидно. Я вообще в шоке от синтаксиса.

Сообщение от рони Посмотреть сообщение
https://www.highcharts.com/demo/line-time-series
Там нет увеличения колесиком мыши.

Или как крайний вариант хотя бы даты прорядить в первоначальном виде кода.

Последний раз редактировалось mr_smit, 10.09.2020 в 14:48.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
График японских свечей JapaneseGod Общие вопросы Javascript 0 14.01.2017 21:52
График по уравнениям Revolver Общие вопросы Javascript 3 31.10.2015 17:11
flash график чужого сайта у себя на сайте Sonnic Общие вопросы Javascript 3 25.07.2014 19:05
Как нарисовать график на javascript? Бобр Общие вопросы Javascript 21 30.03.2014 17:27
не знаю как построить график Женя150 Общие вопросы Javascript 0 22.10.2012 17:09