Home forums Using CanvasJS Jquery CSV Candlestick Chart

This topic contains 4 replies, has 5 voices, and was last updated by  Indranil Deo 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 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>
    
    #15792

    Raj Patel
    Member

    by using this method, AxisY range parameters have to be set manually. Otherwise, it shows unbelievable rage values, making the chart unreadable.

    #15803

    Suyash Singh
    Moderator

    @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

    #15809

    machuca0
    Member

    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.

    #15821

    Indranil Deo
    Member

    @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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.