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