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.On Tue, Jul 10, 2012 at 12:56 AM, asgallant <[email protected]>wrote: > 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/ > > > On Monday, July 9, 2012 4:43:23 PM UTC-4, kaar wrote: >> >> 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. >> >> >> On Friday, July 6, 2012 6:11:27 PM UTC-5, 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<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>"> >>> >>> <html xmlns="http://www.w3.org/1999/**xhtml<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<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/-/sZnd8E0blRsJ. > > 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. > -- 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.
