Нарисовать график по данным внутри html с возможностью масштабирования

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

<head>
  <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-08-22T00:00:00", "pressure":762 },
      { "DateTime":"2020-08-22T01:00:00", "pressure":748 },
      { "DateTime":"2020-08-22T02:00:00", "pressure":755 },
      { "DateTime":"2020-08-22T03:00:00", "pressure":757 },
      { "DateTime":"2020-08-22T04:00:00", "pressure":751 },
      { "DateTime":"2020-08-21T17:00:00", "pressure":745 },
      { "DateTime":"2020-08-21T18:00:00", "pressure":762 },
      { "DateTime":"2020-08-21T19:00:00", "pressure":749 },
      { "DateTime":"2020-08-21T20:00:00", "pressure":753 },
      { "DateTime":"2020-08-21T21:00:00", "pressure":756 },
      { "DateTime":"2020-08-21T22:00:00", "pressure":751 },
      { "DateTime":"2020-08-21T23:00:00", "pressure":765 },	  
      { "DateTime":"2020-08-25T21:00:00", "pressure":750 },
      { "DateTime":"2020-08-25T22:00:00", "pressure":730 },
      { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
      { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
      { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
      { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
      { "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, "94%", 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 значений происходит сильное наложение даты и времени по оси Х, что делает ее нечитаемой.

Нашел 2 примера с масштабированием графика при помощи колеса мыши:
https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f

https://observablehq.com/@d3/zoomable-area-chart

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

Писать такой код самостоятельно - только запутаться и увязнуть в деталях (поддержать кучу устройств, задизайнить мобильное представление, обработать разные события пользователя) которые к твоей задаче отобразить график и масштабировать его не относятся.

Я бы посоветовал взять готовую библиотеку для графиков (проверь лицензию других, эта - MIT что позволит использовать код без юридических последствий), например https://github.com/danvk/dygraphs. В ней масштабирование есть из коробки.

Это концептуально несложная задача (для тех кто хоть сколько-то писал на js) - положить твой код в переменную на глобальный уровень. Пример как будет выглядеть html:

...
<script>
window.chartData = [{...}]
</script>
<!-- подключаемый файл с логикой инициализации графиков -->
<script src="script.js"></script>

в самом script.js

function initChart() {
    // ... использование библиотеки и переменной window.chartData чтобы отобразить данные
}

Спасибо, но я не могу засунуть js библиотеку внутрь устройства (мало памяти). Могу отправить браузеру только текст (html). Мне нужно чтобы библиотека подгружалась из интернета. В примерах dygraphs не нашел примера с масштабированием колесом.

Всё что я хочу на данный момент получить это html файл, который я могу открыть локально у себя в браузере и увидеть график. Дальше я это перенесу на устройство и при выдаче html браузеру буду на лету подставлять нужные мне значения.

Подгружай с https://unpkg.com/ - это CND для npm пакетов. Или с https://cdnjs.com/libraries/dygraph. У пользующегося системой появляется необходимость доступа к интернету.

Я тоже не нашел. Есть только API который можно дергать на движением колесом (или на событие pinch и другие жесты на мобильниках). Пример использования API - https://dygraphs.com/tests/zoom.html

Придется самому писать логику исходя из положения мышки над графиком в момент скролла к какой точке делать zoom.


В целом совет поискать в других бибиотеках остается в силе. Эта может быть слишком низкоуровневая для твоей ситуации. Главное - не влезай в историю где ты сам рисуешь и масштабируешь график.

Просто я не разбираюсь в WEB. А готового нашел только те 2 ссылки что указал в первом посте. Но адаптировать под свою задачу не получается. Не знаю как туда загрузить свои данные.

Вот там загружается csv файл:
d3.csv(“CIMIS_Station_125.csv”, type, function (error, data) {

А как данные не из файла взять, а прям из кода страницы?

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

Данные на страницу клади в код как я описал в комменте выше:

Этот код должен идти раньше кода отображения графика.

<script>
window.chartData = [{...}]
</script>

Я изменил функцию отображения графика из примера чтобы она получала данные аргументом. Плюс ее нужно будет явно вызвать и передать данные которые ты положил на глобальный уровень.

function renderData(data) {
  x.domain(d3.extent(data, function(d) { return d.Date; }));
  y.domain([0, d3.max(data, function (d) { return d.Air_Temp; })]);
  x2.domain(x.domain());
  y2.domain(y.domain());


    focus.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    focus.append("g")
        .attr("class", "axis axis--y")
        .call(yAxis);

    Line_chart.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);

    context.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line2);


  context.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);

  context.append("g")
      .attr("class", "brush")
      .call(brush)
      .call(brush.move, x.range());

  svg.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);


  console.log(data);
};


// ....

// В самый низ файла

renderData(window.chartData)

Не работает. Просто пустая страница.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

 .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 1.5px;
    }
.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}

</style>

<script>
window.chartData = [

	  { "DateTime":"2020-08-22T00:00:00", "pressure":762 },
      { "DateTime":"2020-08-22T01:00:00", "pressure":748 },
      { "DateTime":"2020-08-22T02:00:00", "pressure":755 },
	  { "DateTime":"2020-08-22T03:00:00", "pressure":757 },
      { "DateTime":"2020-08-22T04:00:00", "pressure":751 },
      { "DateTime":"2020-08-21T17:00:00", "pressure":745 },
	  { "DateTime":"2020-08-21T18:00:00", "pressure":762 },
      { "DateTime":"2020-08-21T19:00:00", "pressure":749 },
      { "DateTime":"2020-08-21T20:00:00", "pressure":753 },
	  { "DateTime":"2020-08-21T21:00:00", "pressure":756 },
      { "DateTime":"2020-08-21T22:00:00", "pressure":751 },
      { "DateTime":"2020-08-21T23:00:00", "pressure":765 },	  
	  { "DateTime":"2020-08-25T21:00:00", "pressure":750 },
	  { "DateTime":"2020-08-25T22:00:00", "pressure":730 },
	  { "DateTime":"2020-08-25T23:00:00", "pressure":739 },
	  { "DateTime":"2020-08-26T00:00:00", "pressure":737 },
	  { "DateTime":"2020-08-26T01:00:00", "pressure":738 },
      { "DateTime":"2020-08-26T02:00:00", "pressure":735 },
	  { "DateTime":"2020-08-26T03:00:00", "pressure":745 },
	  { "DateTime":"2020-08-26T04:00:00", "pressure":746 },
	  { "DateTime":"2020-08-26T05:00:00", "pressure":747 },
	  
	  { "DateTime":"2020-08-26T06:00:00", "pressure":748 },
      { "DateTime":"2020-08-26T07:00:00", "pressure":749 },
      { "DateTime":"2020-08-26T08:00:00", "pressure":750 },
	  { "DateTime":"2020-08-26T09:00:00", "pressure":751 },
      { "DateTime":"2020-08-26T10:00:00", "pressure":752 },
      { "DateTime":"2020-08-26T11:00:00", "pressure":753 },
	  { "DateTime":"2020-08-26T12:00:00", "pressure":754 },
      { "DateTime":"2020-08-26T13:00:00", "pressure":755 },
      { "DateTime":"2020-08-26T14:00:00", "pressure":756 },
	  { "DateTime":"2020-08-26T15:00:00", "pressure":757 },
      { "DateTime":"2020-08-26T16:00:00", "pressure":758 },
      { "DateTime":"2020-08-26T17:00:00", "pressure":759 },	  
	  { "DateTime":"2020-08-26T18:00:00", "pressure":760 },
	  { "DateTime":"2020-08-26T19:00:00", "pressure":761 },
	  { "DateTime":"2020-08-26T20:00:00", "pressure":762 },
	  { "DateTime":"2020-08-26T21:00:00", "pressure":761 },
	  { "DateTime":"2020-08-26T22:00:00", "pressure":760 },
      { "DateTime":"2020-08-26T23:00:00", "pressure":755 },
	  { "DateTime":"2020-08-27T00:00:00", "pressure":752 },
	  { "DateTime":"2020-08-27T01:00:00", "pressure":750 },
	  { "DateTime":"2020-08-27T02:00:00", "pressure":747 },
	  
	  { "DateTime":"2020-08-27T03:00:00", "pressure":748 },
      { "DateTime":"2020-08-27T04:00:00", "pressure":749 },
      { "DateTime":"2020-08-27T05:00:00", "pressure":750 },
	  { "DateTime":"2020-08-27T06:00:00", "pressure":751 },
      { "DateTime":"2020-08-27T07:00:00", "pressure":752 },
      { "DateTime":"2020-08-27T08:00:00", "pressure":753 },
	  { "DateTime":"2020-08-27T09:00:00", "pressure":754 },
      { "DateTime":"2020-08-27T10:00:00", "pressure":755 },
      { "DateTime":"2020-08-27T11:00:00", "pressure":756 },
	  { "DateTime":"2020-08-27T12:00:00", "pressure":757 },
      { "DateTime":"2020-08-27T13:00:00", "pressure":758 },
      { "DateTime":"2020-08-27T14:00:00", "pressure":759 },	  
	  { "DateTime":"2020-08-27T15:00:00", "pressure":760 },
	  { "DateTime":"2020-08-27T16:00:00", "pressure":761 },
	  { "DateTime":"2020-08-27T17:00:00", "pressure":762 },
	  { "DateTime":"2020-08-27T18:00:00", "pressure":761 },
	  { "DateTime":"2020-08-27T19:00:00", "pressure":760 },
      { "DateTime":"2020-08-27T20:00:00", "pressure":755 },
	  { "DateTime":"2020-08-27T21:00:00", "pressure":752 },
	  { "DateTime":"2020-08-27T22:00:00", "pressure":750 },
	  { "DateTime":"2020-08-27T23:00:00", "pressure":747 },
	  
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
      { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
      { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 }
    ];
</script>

<svg width="960" height="500"></svg>

<script src="http://d3js.org/d3.v5.min.js"></script>

<script>
function renderData(data) {
  x.domain(d3.extent(data, function(d) { return d.DateTime; }));
  y.domain([0, d3.max(data, function (d) { return d.pressure; })]);
  x2.domain(x.domain());
  y2.domain(y.domain());


    focus.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    focus.append("g")
        .attr("class", "axis axis--y")
        .call(yAxis);

    Line_chart.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);

    context.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line2);


  context.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);

  context.append("g")
      .attr("class", "brush")
      .call(brush)
      .call(brush.move, x.range());

  svg.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);


  console.log(data);
};


// ....

// В самый низ файла

renderData(window.chartData)

</script>


Так, он не знает что такое икс. Попробую из того кода добавить

Нужно добавить весь код из оригинального примера https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f за исключением подгрузки csv

И убедись что формат данных которые ты кидаешь на страницу совпадает с форматом данных, подгружаемых из csv

Добавил остальной код. Просто отображаются оси. Чего то он там ругается.

Думаю он не понимает форму записи даты/времени: 2020-08-27T17:00:00

Попробовал записать дату в виде 27/08/2020 17:00, как и в примере, но всё равно просто пустой график.

Вот весь код:



<style>

 .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 1.5px;
    }
.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}

</style>
</head>

<body>
<script>
window.chartData = [

	  { "DateTime":"2020-08-22T00:00:00", "pressure":762 },
      { "DateTime":"2020-08-22T01:00:00", "pressure":748 },
      { "DateTime":"2020-08-22T02:00:00", "pressure":755 },
	  { "DateTime":"2020-08-22T03:00:00", "pressure":757 },
      { "DateTime":"2020-08-22T04:00:00", "pressure":751 },
      { "DateTime":"2020-08-21T17:00:00", "pressure":745 },
	  { "DateTime":"2020-08-21T18:00:00", "pressure":762 },
      { "DateTime":"2020-08-21T19:00:00", "pressure":749 },
      { "DateTime":"2020-08-21T20:00:00", "pressure":753 },
	  { "DateTime":"2020-08-21T21:00:00", "pressure":756 },
      { "DateTime":"2020-08-21T22:00:00", "pressure":751 },
      { "DateTime":"2020-08-21T23:00:00", "pressure":765 },	  
	  { "DateTime":"2020-08-25T21:00:00", "pressure":750 },
	  { "DateTime":"2020-08-25T22:00:00", "pressure":730 },
	  { "DateTime":"2020-08-25T23:00:00", "pressure":739 },
	  { "DateTime":"2020-08-26T00:00:00", "pressure":737 },
	  { "DateTime":"2020-08-26T01:00:00", "pressure":738 },
      { "DateTime":"2020-08-26T02:00:00", "pressure":735 },
	  { "DateTime":"2020-08-26T03:00:00", "pressure":745 },
	  { "DateTime":"2020-08-26T04:00:00", "pressure":746 },
	  { "DateTime":"2020-08-26T05:00:00", "pressure":747 },
	  
	  { "DateTime":"2020-08-26T06:00:00", "pressure":748 },
      { "DateTime":"2020-08-26T07:00:00", "pressure":749 },
      { "DateTime":"2020-08-26T08:00:00", "pressure":750 },
	  { "DateTime":"2020-08-26T09:00:00", "pressure":751 },
      { "DateTime":"2020-08-26T10:00:00", "pressure":752 },
      { "DateTime":"2020-08-26T11:00:00", "pressure":753 },
	  { "DateTime":"2020-08-26T12:00:00", "pressure":754 },
      { "DateTime":"2020-08-26T13:00:00", "pressure":755 },
      { "DateTime":"2020-08-26T14:00:00", "pressure":756 },
	  { "DateTime":"2020-08-26T15:00:00", "pressure":757 },
      { "DateTime":"2020-08-26T16:00:00", "pressure":758 },
      { "DateTime":"2020-08-26T17:00:00", "pressure":759 },	  
	  { "DateTime":"2020-08-26T18:00:00", "pressure":760 },
	  { "DateTime":"2020-08-26T19:00:00", "pressure":761 },
	  { "DateTime":"2020-08-26T20:00:00", "pressure":762 },
	  { "DateTime":"2020-08-26T21:00:00", "pressure":761 },
	  { "DateTime":"2020-08-26T22:00:00", "pressure":760 },
      { "DateTime":"2020-08-26T23:00:00", "pressure":755 },
	  { "DateTime":"2020-08-27T00:00:00", "pressure":752 },
	  { "DateTime":"2020-08-27T01:00:00", "pressure":750 },
	  { "DateTime":"2020-08-27T02:00:00", "pressure":747 },
	  
	  { "DateTime":"2020-08-27T03:00:00", "pressure":748 },
      { "DateTime":"2020-08-27T04:00:00", "pressure":749 },
      { "DateTime":"2020-08-27T05:00:00", "pressure":750 },
	  { "DateTime":"2020-08-27T06:00:00", "pressure":751 },
      { "DateTime":"2020-08-27T07:00:00", "pressure":752 },
      { "DateTime":"2020-08-27T08:00:00", "pressure":753 },
	  { "DateTime":"2020-08-27T09:00:00", "pressure":754 },
      { "DateTime":"2020-08-27T10:00:00", "pressure":755 },
      { "DateTime":"2020-08-27T11:00:00", "pressure":756 },
	  { "DateTime":"2020-08-27T12:00:00", "pressure":757 },
      { "DateTime":"2020-08-27T13:00:00", "pressure":758 },
      { "DateTime":"2020-08-27T14:00:00", "pressure":759 },	  
	  { "DateTime":"2020-08-27T15:00:00", "pressure":760 },
	  { "DateTime":"2020-08-27T16:00:00", "pressure":761 },
	  { "DateTime":"2020-08-27T17:00:00", "pressure":762 },
	  { "DateTime":"2020-08-27T18:00:00", "pressure":761 },
	  { "DateTime":"2020-08-27T19:00:00", "pressure":760 },
      { "DateTime":"2020-08-27T20:00:00", "pressure":755 },
	  { "DateTime":"2020-08-27T21:00:00", "pressure":752 },
	  { "DateTime":"2020-08-27T22:00:00", "pressure":750 },
	  { "DateTime":"2020-08-27T23:00:00", "pressure":747 },
	  
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
      { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
      { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 },
	  { "DateTime":"2020-01-01T00:00:00", "pressure":0 }
    ];
</script>

<svg width="960" height="500"></svg>

<script src="http://d3js.org/d3.v5.min.js"></script>

<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 110, left: 40},
    margin2 = {top: 430, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    height2 = +svg.attr("height") - margin2.top - margin2.bottom;

var parseDate = d3.timeParse("%m/%d/%Y %H:%M");

var x = d3.scaleTime().range([0, width]),
    x2 = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    y2 = d3.scaleLinear().range([height2, 0]);

var xAxis = d3.axisBottom(x),
    xAxis2 = d3.axisBottom(x2),
    yAxis = d3.axisLeft(y);

var brush = d3.brushX()
    .extent([[0, 0], [width, height2]])
    .on("brush end", brushed);

var zoom = d3.zoom()
    .scaleExtent([1, Infinity])
    .translateExtent([[0, 0], [width, height]])
    .extent([[0, 0], [width, height]])
    .on("zoom", zoomed);

    var line = d3.line()
        .x(function (d) { return x(d.DateTime); })
        .y(function (d) { return y(d.pressure); });

    var line2 = d3.line()
        .x(function (d) { return x2(d.DateTime); })
        .y(function (d) { return y2(d.pressure); });

    var clip = svg.append("defs").append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect")
        .attr("width", width)
        .attr("height", height)
        .attr("x", 0)
        .attr("y", 0); 


    var Line_chart = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("clip-path", "url(#clip)");


    var focus = svg.append("g")
        .attr("class", "focus")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
	
function brushed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
  var s = d3.event.selection || x2.range();
  x.domain(s.map(x2.invert, x2));
  Line_chart.select(".line").attr("d", line);
  focus.select(".axis--x").call(xAxis);
  svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .scale(width / (s[1] - s[0]))
      .translate(-s[0], 0));
}

function zoomed() {
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
  var t = d3.event.transform;
  x.domain(t.rescaleX(x2).domain());
  Line_chart.select(".line").attr("d", line);
  focus.select(".axis--x").call(xAxis);
  context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}

function type(d) {
  d.DateTime = parseDate(d.DateTime);
  d.pressure = +d.pressure;
  return d;
}
	
function renderData(data) {
  x.domain(d3.extent(data, function(d) { return d.DateTime; }));
  y.domain([0, d3.max(data, function (d) { return d.pressure; })]);
  x2.domain(x.domain());
  y2.domain(y.domain());


    focus.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    focus.append("g")
        .attr("class", "axis axis--y")
        .call(yAxis);

    Line_chart.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);

    context.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line2);


  context.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);

  context.append("g")
      .attr("class", "brush")
      .call(brush)
      .call(brush.move, x.range());

  svg.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);


  console.log(data);
};


// ....

// В самый низ файла

renderData(window.chartData)

</script>
</body>
</html>

Так, стоп.
var parseDate = d3.timeParse("%m/%d/%Y %H:%M");

При 27/08/2020 17:00 27-го месяца не существует. Сейчас переделаю.

А нет, не прокатило. Данных по-прежнему нет.

В общем ругается он на какой то атрибут d. То ли отсутствует, то ли выход за границу диапазона.

Покажи коллстек из консоли браузера

Это где?

Кликни по стрелочке рядом с текстом ошибки в консоли. Ошибки это красный текст (на скриншотах выше ты уже упоминал сообщения от туда)

Вот сам файл html: https://yadi.sk/d/c0WSPMb1ENij8Q

Это проблема данных. Формат данных который ты скармливаешь в пример не соответствует тому, который код примера ожидает.

Я не могу до такой степени помогать разбираться с деталями задачи.

Я пробовал записывать данные в формате как из примера. Всё равно не работает.

Из примера:

CIMIS_Station_125.csv#
Date,Eto,Precip,Sol_Rad,Vap_Pres,Air_Temp,Rel_Hum,Wind_Speed,Wind_Dir,Soil_Temp
1/1/2014 01:00,0,0,0,0.5,3.1,70,1.4,50,10.6
1/1/2014 02:00,0,0,0,0.5,3.2,68,1.2,51,10.4
...

Я записал:
{ “DateTime”:“10/09/2020 01:00”, “pressure”:762 },
{ “DateTime”:“10/09/2020 02:00”, “pressure”:760 },

И на том спасибо что уделили время.

Так я и не понял JavaScript, в частности D3. Перелопатил кучу страниц. Переменные создаются как угодно, никакой привязки что это, строка или целочисленное или с плавающей точкой. Всё что смог сделать это распарсить дату:

	var DT = d3.timeParse("%Y-%m-%dT%H:%M:%S");
	var formatSecond = d3.timeFormat("%S"),
        formatMinute = d3.timeFormat("%M"),
        formatHour = d3.timeFormat("%H"),
        formatDay = d3.timeFormat("%d"),
        formatMonth = d3.timeFormat("%m"),
	    formatYear = d3.timeFormat("%Y");
	var Dat = DT("2020-01-01T00:00:00");
    console.log(formatYear(Dat));
	console.log(formatMonth(Dat));
	console.log(formatDay(Dat));
	console.log(formatHour(Dat));
	console.log(formatMinute(Dat));
	console.log(formatSecond(Dat));

Но этот синтаксис не укладывается у меня в голове.

Забил уже на масштабирование. Это похоже в принципе невозможно сделать. Пытаюсь убрать наложение дат. При:
var x = myChart.addCategoryAxis("x", "DateTime");

График отображается. А при:
var x = myChart.addTimeAxis(“x”, “DateTime”, “%Y-%m-%dT%H:%M:%S”, “%Y-%m-%dT%H:%M:%S”);
x.dateParseFormat = “%H”;
x.tickFormat = “%H”;
x.timeInterval = 3;
Данные не отображаются.