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? On Friday, July 6, 2012 7:11:27 PM UTC-4, kaar wrote: > > 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> > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/KJIoWfEFIN0J. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
