Home forums Using CanvasJS Jquery CSV Candlestick Chart

This topic contains 0 replies, has 1 voice, and was last updated by  Rishabh Rajgarhia 1 year ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #9592

    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>
    
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.