Basic Column Chart - CanvasJS
Basic Column Chart
HTML
<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="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var dataPoints = [];
var dataCsv = '1577996579000;70\n1577996679000;55\n1577996779000;50\n1577996879000;65\n1577996979000;80';
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
title:{
text: "Title"
},
axisY: {
title: "Value",
includeZero: false
},
axisX:{
},
data: [{
type: "stepArea",
toolTipContent: "{y} value",
xValueType: "dateTime",
xValueFormatString: "DD MMM hh:mm TT",
dataPoints: dataPoints
}]
});
//$.get("value.csv", getDataPointsFromCSV);
function getDataPointsFromCSV(csv) {
var csvLines = []
var points = [];
csvLines = csv.split(/[\r?\n|\r|\n]+/);
for (var i = 0; i < csvLines.length; i++) {
if (csvLines[i].length > 0) {
points = csvLines[i].split(";");
dataPoints.push({ time: new Date(points[0]), y: parseFloat(points[1])
});
}
}
chart.render();
}
getDataPointsFromCSV(dataCsv);