d3 example

HTML

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<svg width="960" height="500"></svg>

CSS

path {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}

JavaScript

//иницализируем параметры графика
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%S.000Z");
console.log(parseDate("2018-05-08T09:18:00.000Z"))
    
/* d3.json("https://dl.dropboxusercontent.com/u/1109928/anlog_input2.json", function(error, data){
  if(error) throw error;
  
  var x = d3.scaleTime()
    .domain([parseDate(data[0].datetime), parseDate(data[data.length-1].datetime)])
    .range([0, width]);
    
  var y = d3.scaleLinear()
    .domain([data[data.length-1].analog_input2, data[0].analog_input2])
    .range([0, height]);
    
  var line = d3.line().x(function(d){ 
    return x(parseDate(d.datetime)); 
  }).y(function(d){
    return y(d.analog_input2);
  }).curve(d3.curveCatmullRom.alpha(0.5));
  
  var leftAxis = d3.axisLeft(y);
  var bottomAxis = d3.axisBottom(x);

  var svg = d3.select("svg");
  var leftAxisG = svg.append("g");
  var rightAxisG = svg.append("g");
  leftAxisG.attr("transform", "translate(50, 5)").call(leftAxis);
  rightAxisG.attr("transform", "translate(50," + (height + 5) + ")").call(bottomAxis)
  
  svg.append("path").datum(data).attr("d", line).attr("transform", "translate(50, 0)")
}) */