Thanks Suyash, I’m getting blank page as output.I’m not sure about issue, I want to create candlestick plot.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var dataPoints = [];
function getDataPointsFromCSV(csv) {
var dataPoints = csvLines = 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({
x: parseFloat(points[1]),
y: parseFloat(points[3])
});
}
return dataPoints;
}
$.get("results.csv", function(data) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart from CSV",
},
data: [{
type: "boxplot",
dataPoints: getDataPointsFromCSV(data),
backgroundColor: "rgba(153,255,51,0.4)"
}]
});
chart.render();
});
}
</script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
csv data –
time1, time2, mac, 2.4ghz, 5ghz
1485874798, 1485878398, 36.222.198.197.166.140, -73, -72
1485874798, 1485878398, 148.180.15.200.220.114, -69, -65
1485874798, 1485878398, 148.180.15.194.95.70, -74, 0
1485874798, 1485878398, 0.36.108.195.38.227 0, -63
1485874898, 1485878498, 36.222.198.197.171.88, -73, -69
1485874898, 1485878498, 24.100.114.205.236.242, 0, 0
1485874898, 1485878498, 0.36.108.195.34.153 0, 0
1485874898, 1485878498, 148.180.15.200.220.118, -74, -64
1485874898, 1485878498, 0.36.108.195.38.220 0, -74
1485874998, 1485878598, 216.199.200.202.199.48, 0, -67
1485874998, 1485878598, 148.180.15.193.105.60, -62, -66
1485874998, 1485878598, 156.28.18.195.202.230, -74, -74
1485874998, 1485878598, 148.180.15.200.220.126, -73, -71
1485874998, 1485878598, 0.36.108.195.38.219 0, -60
