Home › Forums › Chart Support › candlestick plot for multiple series using csv file

candlestick plot for multiple series using csv file

Viewing 6 posts - 1 through 6 (of 6 total)
  • March 28, 2017 at 1:55 pm #14694

    annie

    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://cdn.canvasjs.com/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 7 years, 9 months ago by annie.
    March 28, 2017 at 7:29 pm #14696

    Suyash Singh

    @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.

    March 29, 2017 at 10:01 am #14697

    annie

    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.

    March 30, 2017 at 10:43 am #14703

    Suyash Singh

    @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

    March 30, 2017 at 1:40 pm #14705

    annie

    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://cdn.canvasjs.com/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

    March 30, 2017 at 2:28 pm #14706

    Suyash Singh

    @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.