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