Here is a sample CSV file
2014/08/01,526.00,529.45,517.10,519.85
2014/08/02,518.00,520.50,512.00,516.40
2014/08/03,526.00,530.50,521.35,522.65
2014/08/04,522.65,522.65,509.00,512.85
2014/08/05,513.00,516.50,503.10,506.35
2014/08/08,510.00,512.00,503.00,510.50
2014/08/09,512.00,518.15,507.90,517.25
2014/08/10,514.90,520.35,512.50,516.30
and here is the code to implement a candlestick chart from it.
<!DOCTYPE html>
<html>
<head>
<title>jQuery column chart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.canvasjs.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url: "data.csv",
dataType: "text",
success: function (data) { processData(data);}
});
function processData(allText) {
var allLinesArray = allText.split('\n');
if (allLinesArray.length > 0) {
var dataPoints = [];
for (var i = 0; i < allLinesArray.length; i++) {
var rowData = allLinesArray[i].split(',');
dataPoints[i] = {};
var dateObj = new Date(rowData[0]);
dataPoints[i].x = dateObj;
dataPoints[i].y=[];
for(var j=1; j< rowData.length; j++)
dataPoints[i].y[j-1] = parseFloat(rowData[j]);
}
var chart = $(".chartContainer").CanvasJSChart();
chart.options.data[0].dataPoints = dataPoints;
chart.render();
}
}
$(".chartContainer").CanvasJSChart({
title: {
text: "Candlestick Chart"
},
axisY: {
includeZero: false,
title: "Price",
prefix: "$"
},
axisX: {
intervalType: "day",
interval: 2,
valueFormatString: "DD"
},
toolTip: {
content: "{x} Sep 2014 <br/> <strong>Prices:</strong> <br/>Open: {y[0]}, Close: {y[3]} <br/> Low: {y[2]}, High: {y[1]}"
},
data: [
{
type: "candlestick",
dataPoints: []
}
]
});
});
</script>
</head>
<body>
<div class="chartContainer" style="height: 300px; width: 100%"></div>
</body>
</html>
.
