Intrinsic error of ComboChart and CandlestickChart
956 views
Skip to first unread message
kaar
Jul 6, 2012, 7:11:27 PM7/6/12
to Google Visualization API
Hello,
(1) 1st issue of 2
I just tried to create ComboChart with candlesticks and line by using
data provided example below.
But, it shows error : [Last serie does not have enough data columns
(missing 3)]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Rwanda',
'Average'],
['2004/05', 165, 938, 522, 450,
614.6],
['2005/06', 135, 1120, 599, 288,
682],
['2006/07', 157, 1167, 587, 397,
623],
['2007/08', 139, 1110, 615, 215,
609.4],
['2008/09', 136, 691, 629, 366,
569.6]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "candlesticks",
series: {4: {type: "line"}}
};
var chart = new
google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
(2) 2nd issue of 2
When I draw candlesticks chart with data provided by CSV file. By
adding 22 rows, each candlestick looks good.
but, Over by adding 22 rows, for example 100 rows, each candlestick is
not a like candlestick. How to improve
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
var csvFile = "AAPL.csv";
readCSV(csvFile)
function readCSV(localFile) {
var allText = [];
var allLine = [];
var openFile = new XMLHttpRequest();
openFile.open("GET", localFile, false);
openFile.send();
allText = openFile.responseText;
allLine = allText.split(/\r\n|\n/);
//Display each line
//for (i=0; i<allLine.length; i++) {
//for (i=0; i<2; i++) {
// document.write(allLine[i] + "<br/>");
//}
var headRow = [];
headRow = allLine[0].split(',');
//Display each column of head row
//for (h=0; h<headRow.length; h++) {
// document.write(h + ": " + headRow[h] + "<br/>");
//}
function stockPrice(date,open,high,low,close,volume,adjust) {
this.date = date;
this.open = open;
this.high = high;
this.low = low;
this.close = close;
this.volume = volume;
this.adjust = adjust;
}
var stockPrices = [];
var tempRow = [];
var tempDay = [];
for (i=1; i<allLine.length; i++) {
tempRow = allLine[i].split(',');
tempDay = tempRow[0].split('-');
//Month 0 = January
var dateForm = new
Date(parseInt(tempDay[0]),parseInt(tempDay[1])-1,parseInt(tempDay[2]));
stockPrices[i-1] = new
stockPrice(dateForm,parseFloat(tempRow[1]),parseFloat(tempRow[2]),parseFloat(tempRow[3]),parseFloat(tempRow[4]),parseFloat(tempRow[5]),parseFloat(tempRow[6]));
tempRow = [];
tempDay = [];
}
//Display stockPrices Class
// for (j=0; j<5; j++) {
// document.write(stockPrices[j].date + " : ");
// document.write(stockPrices[j].volume);
// document.write("<br/>");
//}
//
Graph1///////////////////////////////////////////////////////////////////////////////////////////////////
function drawVisualization1() {
var period = 100; // verify 22 rows, it looks good
var priceMax = stockPrices[0].high;
var priceMin = stockPrices[0].low;
for (i=1; i<period; i++) {
if (priceMax < stockPrices[i].high) {priceMax =
stockPrices[i].high;}
if (priceMin > stockPrices[i].low) {priceMin =
stockPrices[i].low;}
}
var haxisMax = (priceMax - priceMin) * 1.2;
var haxisMin = (priceMax - priceMin) * 0.8;
var data = new google.visualization.DataTable();
data.addColumn('date','Daily');
data.addColumn('number','low');
data.addColumn('number','open');
data.addColumn('number','close');
data.addColumn('number','high');
data.addRows(period);
for (i=0; i<period; i++) {
data.setCell(i,0,stockPrices[i].date);
data.setCell(i,1,stockPrices[i].low);
data.setCell(i,2,stockPrices[i].open);
data.setCell(i,3,stockPrices[i].close);
data.setCell(i,4,stockPrices[i].high);
}
var options = {
legend:'none', // title: 'Stock Price Chart',
vAxis: {title: 'Price [dollars]', titleTextStyle:
{color: 'blue'}},
hAxis: {maxValue: haxisMax, minValue: haxisMin},
chartArea:{left:50,top:20,width:"95%",height:"95%"} //
no commna on the last option
};
var chart = new
google.visualization.CandlestickChart(document.getElementById('Chart1'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization1);
//
Graph2/////////////////////////////////////////////////////////////////////////////////////////////////
function drawVisualization2() {
var period = 100; // verify 22 rows, it looks good
var data = new google.visualization.DataTable();
data.addColumn('date','Daily');
data.addColumn('number','volume');
data.addRows(period);
for (i=0; i<period; i++) {
data.setCell(i,0,stockPrices[i].date);
data.setCell(i,1,stockPrices[i].volume/1000000);
}
var options = {
legend:'none', // title: 'Stock Price Chart',
vAxis: {title: 'Volume', titleTextStyle: {color:
'blue'}},
hAxis: {minValue: 0},
chartArea:{left:50,top:20,width:"95%",height:"75%"} //
no commna on the last option
};
var chart = new
google.visualization.ColumnChart(document.getElementById('Chart2'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization2);
}
</script>
</head>
<body>
<div id="Chart1" style="width: 900px; height: 600px;"></div>
<div id="Chart2" style="width: 900px; height: 150px;"></div>
</body>
</html>
(1) 1st issue of 2
I just tried to create ComboChart with candlesticks and line by using
data provided example below.
But, it shows error : [Last serie does not have enough data columns
(missing 3)]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Rwanda',
'Average'],
['2004/05', 165, 938, 522, 450,
614.6],
['2005/06', 135, 1120, 599, 288,
682],
['2006/07', 157, 1167, 587, 397,
623],
['2007/08', 139, 1110, 615, 215,
609.4],
['2008/09', 136, 691, 629, 366,
569.6]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "candlesticks",
series: {4: {type: "line"}}
};
var chart = new
google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
(2) 2nd issue of 2
When I draw candlesticks chart with data provided by CSV file. By
adding 22 rows, each candlestick looks good.
but, Over by adding 22 rows, for example 100 rows, each candlestick is
not a like candlestick. How to improve
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="https://www.google.com/
jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
var csvFile = "AAPL.csv";
readCSV(csvFile)
function readCSV(localFile) {
var allText = [];
var allLine = [];
var openFile = new XMLHttpRequest();
openFile.open("GET", localFile, false);
openFile.send();
allText = openFile.responseText;
allLine = allText.split(/\r\n|\n/);
//Display each line
//for (i=0; i<allLine.length; i++) {
//for (i=0; i<2; i++) {
// document.write(allLine[i] + "<br/>");
//}
var headRow = [];
headRow = allLine[0].split(',');
//Display each column of head row
//for (h=0; h<headRow.length; h++) {
// document.write(h + ": " + headRow[h] + "<br/>");
//}
function stockPrice(date,open,high,low,close,volume,adjust) {
this.date = date;
this.open = open;
this.high = high;
this.low = low;
this.close = close;
this.volume = volume;
this.adjust = adjust;
}
var stockPrices = [];
var tempRow = [];
var tempDay = [];
for (i=1; i<allLine.length; i++) {
tempRow = allLine[i].split(',');
tempDay = tempRow[0].split('-');
//Month 0 = January
var dateForm = new
Date(parseInt(tempDay[0]),parseInt(tempDay[1])-1,parseInt(tempDay[2]));
stockPrices[i-1] = new
stockPrice(dateForm,parseFloat(tempRow[1]),parseFloat(tempRow[2]),parseFloat(tempRow[3]),parseFloat(tempRow[4]),parseFloat(tempRow[5]),parseFloat(tempRow[6]));
tempRow = [];
tempDay = [];
}
//Display stockPrices Class
// for (j=0; j<5; j++) {
// document.write(stockPrices[j].date + " : ");
// document.write(stockPrices[j].volume);
// document.write("<br/>");
//}
//
Graph1///////////////////////////////////////////////////////////////////////////////////////////////////
function drawVisualization1() {
var period = 100; // verify 22 rows, it looks good
var priceMax = stockPrices[0].high;
var priceMin = stockPrices[0].low;
for (i=1; i<period; i++) {
if (priceMax < stockPrices[i].high) {priceMax =
stockPrices[i].high;}
if (priceMin > stockPrices[i].low) {priceMin =
stockPrices[i].low;}
}
var haxisMax = (priceMax - priceMin) * 1.2;
var haxisMin = (priceMax - priceMin) * 0.8;
var data = new google.visualization.DataTable();
data.addColumn('date','Daily');
data.addColumn('number','low');
data.addColumn('number','open');
data.addColumn('number','close');
data.addColumn('number','high');
data.addRows(period);
for (i=0; i<period; i++) {
data.setCell(i,0,stockPrices[i].date);
data.setCell(i,1,stockPrices[i].low);
data.setCell(i,2,stockPrices[i].open);
data.setCell(i,3,stockPrices[i].close);
data.setCell(i,4,stockPrices[i].high);
}
var options = {
legend:'none', // title: 'Stock Price Chart',
vAxis: {title: 'Price [dollars]', titleTextStyle:
{color: 'blue'}},
hAxis: {maxValue: haxisMax, minValue: haxisMin},
chartArea:{left:50,top:20,width:"95%",height:"95%"} //
no commna on the last option
};
var chart = new
google.visualization.CandlestickChart(document.getElementById('Chart1'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization1);
//
Graph2/////////////////////////////////////////////////////////////////////////////////////////////////
function drawVisualization2() {
var period = 100; // verify 22 rows, it looks good
var data = new google.visualization.DataTable();
data.addColumn('date','Daily');
data.addColumn('number','volume');
data.addRows(period);
for (i=0; i<period; i++) {
data.setCell(i,0,stockPrices[i].date);
data.setCell(i,1,stockPrices[i].volume/1000000);
}
var options = {
legend:'none', // title: 'Stock Price Chart',
vAxis: {title: 'Volume', titleTextStyle: {color:
'blue'}},
hAxis: {minValue: 0},
chartArea:{left:50,top:20,width:"95%",height:"75%"} //
no commna on the last option
};
var chart = new
google.visualization.ColumnChart(document.getElementById('Chart2'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization2);
}
</script>
</head>
<body>
<div id="Chart1" style="width: 900px; height: 600px;"></div>
<div id="Chart2" style="width: 900px; height: 150px;"></div>
</body>
</html>
asgallant
Jul 9, 2012, 11:54:03 AM7/9/12
to google-visua...@googlegroups.com
The first problem might be a bug, but could be the intended behavior. The candlestick charts expect all of their data columns to be adjacent in the DataTable. By assigning column 4 to the line, you stole the last data column from the candlesticks. If you change the line to use column 5, then it should work.
As far as the second problem goes, it is difficult to test without access to your data. Can you build an example that demonstrates the problem using fixed data?
kaar
Jul 9, 2012, 4:43:23 PM7/9/12
to google-visua...@googlegroups.com
Please refer to the enclosed Data file for 2nd issue.
step1) Just save the CSV file and the HTML/javascript of 2nd isse within same folder
step2) Just run HTML to see each candlestick. not a like candlestick
step3) and the update VAR PERIOD =22 for both chart1 and chart2, and run it to see each candlestick
For the 1st issue, actually, 5th column is with series: {4: {type: "line"}} . Still I don't get the point.
For the 1st issue, actually, 5th column is with series: {4: {type: "line"}} . Still I don't get the point.
asgallant
Jul 9, 2012, 5:56:20 PM7/9/12
to google-visua...@googlegroups.com
For the first issue, I said column 5, not the 5th column; use: series: {5: {type: "line"}} instead.
As for the second, it seems to be a bug in the CandleStick charts. This bug crops up when using a continuous axis where not all data points are adjacent; I'm not sure what the critical separation is to trigger the bug, but it definitely occurs when there is a spacing difference > 1 and < 10 units between some of the data points. See example here: http://jsfiddle.net/asgallant/A947d/
As for the second, it seems to be a bug in the CandleStick charts. This bug crops up when using a continuous axis where not all data points are adjacent; I'm not sure what the critical separation is to trigger the bug, but it definitely occurs when there is a spacing difference > 1 and < 10 units between some of the data points. See example here: http://jsfiddle.net/asgallant/A947d/
Jinji
Jul 11, 2012, 11:07:01 AM7/11/12
to google-visua...@googlegroups.com
Regarding the first issue, it should be series: {1: {type: "line"}}. In your case, serie 1 (the second serie) is of type line, not serie 4 (the 5th serie). There are only 2 series, of which serie 0 (candlesticks) consists of columns 0-3, and serie 1 consists of one column, #4.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/sZnd8E0blRsJ.--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
asgallant
Jul 11, 2012, 12:31:15 PM7/11/12
to google-visua...@googlegroups.com
*facepalm*
Yup, that's it.
To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.
Jinji
Jul 12, 2012, 9:22:37 AM7/12/12
to google-visua...@googlegroups.com
:)
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/V0uYapqk4wIJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages