Home forums Using CanvasJS candlestick plot for multiple series using csv file

This topic contains 5 replies, has 2 voices, and was last updated by  Suyash Singh 4 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #14694

    annie
    Member

    I want to plot candlestick graph using csv for multiple series but i’m getting blank screen.

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function () {
    	 var dataPoints = [];
            function getDataPointsFromCSV(csv) { 
                var dataPoints = 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(",");
    					  if (points[2] == mac_ad) {
                        dataPoints.push({ 
                            x: parseFloat(points[1]), 
                            y: parseFloat(points[3])  
    						});
                    }}
                return dataPoints;
            }
    	$.get("results.csv", function(data) {
    	    var chart = new CanvasJS.Chart("chartContainer", {
    		    title: {
    		         text: "Chart from CSV",
    		    },
    		    data: [{
    		         type: "candlestick",
    		         dataPoints: getDataPointsFromCSV(data),
    				 backgroundColor: "rgba(153,255,51,0.4)"
    		      }]
    	     });
    	      chart.render();
        });
      }
    </script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
    </body>
    </html>

    csv data –

    time1, time2, mac, 2.4ghz, 5ghz
    1485874798, 1485878398, 36.222.198.197.166.140, -73, -72
    1485874798, 1485878398, 148.180.15.200.220.114, -69, -65
    1485874798, 1485878398, 148.180.15.194.95.70, -74, 0
    1485874798, 1485878398, 0.36.108.195.38.227 0, -63
    1485874798, 1485878398, 36.222.198.197.171.88, -73, -69
    1485874798, 1485878398, 24.100.114.205.236.242, 0, 0
    1485874798, 1485878398, 0.36.108.195.34.153 0, 0
    1485874798, 1485878398, 148.180.15.200.220.118, -74, -64
    1485874798, 1485878398, 0.36.108.195.38.220 0, -74
    1485874798, 1485878398, 216.199.200.202.199.48, 0, -67
    1485874798, 1485878398, 148.180.15.193.105.60, -62, -66
    1485874798, 1485878398, 156.28.18.195.202.230, -74, -74
    1485874798, 1485878398, 148.180.15.200.220.126, -73, -71
    1485874798, 1485878398, 0.36.108.195.38.219 0, -60

    • This topic was modified 4 months, 3 weeks ago by  annie.
    #14696

    Suyash Singh
    Moderator

    @annie,

    Y-Values in candlestick chart is an array of 4 values, but in your code you seem to be passing just one y-value, providing an array of 4 values will work in your case. In case if you are still facing any issue, kindly create a jsfiddle so that we can look into it and help you better.

    #14697

    annie
    Member

    I’m parsing a column there in that column it’ll pick around 14 values at single time. Is it possible to draw with that many values.

    #14703

    Suyash Singh
    Moderator

    @annie,

    Please brief us more about the issue that you are facing. A pictorial representation or jsfiddle will help us understand the issue and assist you in better way.

    ___
    Suyash Singh
    Team CanvasJS

    #14705

    annie
    Member

    Thanks Suyash, I’m getting blank page as output.I’m not sure about issue, I want to create candlestick plot.

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    window.onload = function () {
    	 var dataPoints = [];
            function getDataPointsFromCSV(csv) { 
                var dataPoints = 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({ 
                        x: parseFloat(points[1]), 
                        y: parseFloat(points[3]) 					
    					});
                }
                return dataPoints;
            }
    	$.get("results.csv", function(data) {
    	    var chart = new CanvasJS.Chart("chartContainer", {
    		    title: {
    		         text: "Chart from CSV",
    		    },
    		    data: [{
    		         type: "boxplot",
    		         dataPoints: getDataPointsFromCSV(data),
    				 backgroundColor: "rgba(153,255,51,0.4)"
    		      }]
    	     });
    	      chart.render();
        });
      }
    </script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
    </body>
    </html>

    csv data –

    time1, time2, mac, 2.4ghz, 5ghz
    1485874798, 1485878398, 36.222.198.197.166.140, -73, -72
    1485874798, 1485878398, 148.180.15.200.220.114, -69, -65
    1485874798, 1485878398, 148.180.15.194.95.70, -74, 0
    1485874798, 1485878398, 0.36.108.195.38.227 0, -63
    1485874898, 1485878498, 36.222.198.197.171.88, -73, -69
    1485874898, 1485878498, 24.100.114.205.236.242, 0, 0
    1485874898, 1485878498, 0.36.108.195.34.153 0, 0
    1485874898, 1485878498, 148.180.15.200.220.118, -74, -64
    1485874898, 1485878498, 0.36.108.195.38.220 0, -74
    1485874998, 1485878598, 216.199.200.202.199.48, 0, -67
    1485874998, 1485878598, 148.180.15.193.105.60, -62, -66
    1485874998, 1485878598, 156.28.18.195.202.230, -74, -74
    1485874998, 1485878598, 148.180.15.200.220.126, -73, -71
    1485874998, 1485878598, 0.36.108.195.38.219 0, -60

    #14706

    Suyash Singh
    Moderator

    @annie,

    We are unable to get your exact requirement. Are you looking for something like this?

    Candlestick chart accepts an array of 4 y-values. Please check your CSV and the dataPoints you are passing to chart. We observed that you are providing just 1 y-value. Please check this tutorial for creating chart from CSV and also refer candlestick charts for more info on candlestick charts and its dataPoints.

    If you still face any issue, kindly create a jsfiddle reproducing the same so that we can help you in better way.


    Suyash Singh
    Team CanvasJS

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

You must be logged in to reply to this topic.