*facepalm*
Yup, that's it.
On Wednesday, July 11, 2012 11:07:01 AM UTC-4, Yuval Ronen wrote:
>
> 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 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 [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.
