You must be logged in to post your query.
Home › Forums › Chart Support › Jquery CSV Candlestick Chart
Tagged: AJAX, candlestick, csv, jquery
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>
by using this method, AxisY range parameters have to be set manually. Otherwise, it shows unbelievable rage values, making the chart unreadable.
@Suyash,
Can you kindly share your code and CSV file, so that we can look into it and help you out better. ___ Suyash Singh Team CanvasJS
Hi, borrow your thread :)
Has a csv with this format:
2017.07.27 22: 14, -10.7 2017.07.27 22: 15.10.10 2017.07.27 22: 16.5.8 2017.07.27 22: 18.0.8 2017.07.27 22: 19, -4.7 2017.07.27 22: 20,0.3 2017.07.27 22: 21.0.8 2017.07.27 22: 22.4,3 2017.07.27 22: 23, -11.7 2017.07.27 22: 24, -13.7 2017.07.27 22: 25, -17.7
Which I want to convert to Candlestick Chart and if it is possible to choose it in different time periods as well.
@machuca0,
Candlestick chart needs 4 values i.e. Open, High, Low & Close.
The CSV data that you have provided has only one y value. Please provide the CSV data in the above-mentioned format.
____________ Indranil Deo, Team CanvasJS
You must be logged in to reply to this topic. Login/Register