Basic Column Chart - CanvasJS
Basic Column Chart
HTML
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<select class="dropdown" id="dd">
<option value="10" selected="selected">Column 10</option>
<option value=11>Column 11</option>
<option value="(points[0]">Column 0</option>
</select>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
title:{
text: "Call Metrics"
},
axisY: {
title: "Y Axis"
},
data: [{
type: "bar",
toolTipContent: "{y} metric ",
dataPoints: dataPoints
}]
});
$.get("<?php echo "http://XXXXX/$link" ?>", getDataPointsFromCSV);
function getDataPointsFromCSV(csv) {
var 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({
label: points[0],
y: parseFloat(points[1])
});
}
}
chart.render();
}
}