SO Bounty Line chart

by Shabeer Sheffa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css">
<div id="test-speed-chart">
  <svg></svg>
</div>

CSS

#economyChart {
  height: 400px;
}

JavaScript

nv.addGraph(function() {

  var chart = nv.models.lineChart(); //Create instance of nvd3 lineChart  

  // Convert the date passed as a STRING into a DATE object
  chart.x(function(d) {
    return new Date(d.x);
  });

  chart.xAxis.axisLabel('Time (m)');
  chart.xAxis.tickFormat(function(d) {
    return d3.time.format('%Y-%m-%dT%H:%M:%S')(new Date(d));
  });

  chart.yAxis
    .axisLabel("Speed (mb)") //Set Y-Axis attributes.
    .tickFormat(d3.format("d")) //Set Y-Axis label formatting.
  ;
  
  d3.select("#test-speed-chart svg") //Select the document's <svg> element
    .datum(datalink_1) //Attach data to the <svg> element.
    .transition().duration(500).call(chart); //Define transition and pass the d3.selection to our lineChart.


  //Updates the window resize event callback.
  //Renders the chart when window is resized.
  nv.utils.windowResize(chart.update);

  return chart; //Must return the enclosed chart variable so the global rendering queue can store it.

});




datalink_1 = [{
    values: [{
      x: '2018-06-07 14:59:11',
      y: 94
    }, {
      x: '2018-06-07 14:59:16',
      y: 87
    }, {
      x: '2018-06-07 15:01:06',
      y: 73
    }, {
      x: '2018-06-07 15:01:10',
      y: 73
    }, {
      x: '2018-06-07 15:03:46',
      y: 124
    }, {
      x: '2018-06-07 15:03:51',
      y: 119
    }, {
      x: '2018-06-07 15:05:03',
      y: 91
    }, {
      x: '2018-06-07 15:05:07',
      y: 98
    }, {
      x: '2018-06-07 15:07:02',
      y: 77
    }, {
      x: '2018-06-07 15:07:06',
      y: 84
    }, {
      x: '2018-06-07 15:10:05',
      y: 63
    }, {
      x: '2018-06-07 15:10:09',
      y: 69
    }, {
      x: '2018-06-07 15:12:02',
      y: 75
    }, {
      x: '2018-06-07 15:12:07',
      y: 81
    }, {
      x: '2018-06-07 15:14:04',
      y: 80
    }, {
      x: '2018-06-07 15:14:08',
      y: 86
    }, {
      x: '2018-06-07 15:16:02',
      y: 90
    }, {
      x: '2018-06-07 15:16:07',
      y: 98
    }, {
      x: '2018-06-07...