Line Chart with data from CSV Changing Range from Range Selector - CanvasJS JavaScript Charts

Line Chart with data from CSV Changing Range from Range Selector - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="update-nav">
  <div id="range-selector">
    <input type="button" id="10m" class="period ui-button" value="10 Minutes"/>  
    <input type="button" id="1d" class="period ui-button" value="1 Day"/> 
    <input type="button" id="all" class="period ui-button" value="All"/>
  </div>
</div>
<br/>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

#update-nav {
  width: 100%;
  height: 50px;
}
#range-selector {
  width: 100%;
}

JavaScript

var axisXMin, axisXMax;
var dataPoints = [];
function getDataPointsFromCSV(csv) {		
    var csvLines = points = [];
    var dateObj = timeObj = [];
    var xValue;
    csvLines = csv.split(/[\r?\n|\r|\n]+/);    
    for (var i = 0; i < csvLines.length; i++) {
        if (csvLines[i].length > 0) {
            points = csvLines[i].split(" ");            
            dateObj = points[0].split(/[-]+/);
            timeObj = points[1].split(/[:]+/);
            xValue = new Date(dateObj[2] + "-" + dateObj[1] + "-" + dateObj[0]);
            xValue.setHours(timeObj[0]);
            xValue.setMinutes(timeObj[1]);
            dataPoints.push({            
                x: xValue, 
                y: parseFloat(points[2]),                
				    });
				}
    }    
}

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Render Chart from CSV",
  },
  data: [{
    xValueFormatString: "hh:mm:ss TT",
    type: "line",
    dataPoints: dataPoints
  }]
});

//CSV Files is saved in https://codepen.io/anon/pen/oMvgOG.js
$.get("https://codepen.io/anon/pen/VBvmae.js", function(data) {
	 getDataPointsFromCSV(data);
   chart.render();
   axisXMin = chart.axisX[0].get("minimum");
   axisXMax = chart.axisX[0].get("maximum");
});


$(".period").click( function() {
	var period = this.id;  
  var minValue;
  minValue = new Date(axisXMax);
  
  switch(period){
    case "10m":
      minValue.setMinutes(minValue.getMinutes() - 10)
      break;  
    case "1d":
      minValue.setHours(minValue.getHours() - 24)
      break;
    default:
    	minValue = axisXMin;
	}
  
 	chart.axisX[0].set("minimum", new Date(minValue));  
  chart.axisX[0].set("maximum", new Date(axisXMax));
});