Thanks. How can I link the two and simply add a year column. Looks good
otherwise?
<html>
<head>
<script type='text/javascript'
src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Total Trade'],
['United States', 385.3],
['Japan', 297.8],
['HK', 230.6],
['South Korea', 207.2],
['Taiwan', 145.4],
['Germany', 142.4],
['Australia', 88.1],
['Malaysia', 74.2],
['Brazil', 62.5],
['India', 61.8],
]);
var options = {};
var chart = new
google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 610px; height: 380px;"></div>
</body>
</html>
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!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="http://www.google.com/jsapi";></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart',
'controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
},
// Display a single series that shows the closing value of
the stock.
// Thus, this view has two columns: the date (axis) and the
stock value (line series).
'chartView': {
'columns': [0, 3]
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize': 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
'state': {'range': {'start': new Date(2012, 1, 9), 'end': new
Date(2012, 2, 20)}}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'CandlestickChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis
alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 2000}},
'legend': {'position': 'none'}
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 0);
},
'type': 'string'
}, 1, 2, 3, 4]
}
});
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Stock low');
data.addColumn('number', 'Stock open');
data.addColumn('number', 'Stock close');
data.addColumn('number', 'Stock high');
// Create random stock values, just like it works in reality.
var open, close = 300;
var low, high;
for (var day = 1; day < 121; ++day) {
var change = (Math.sin(day / 2.5 + Math.PI) + Math.sin(day / 3)
- Math.cos(day * 0.7)) * 150;
change = change >= 0 ? change + 10 : change - 10;
open = close;
close = Math.max(50, open + change);
low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * 15;
low = Math.max(0, low);
high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * 15;
var date = new Date(2012, 0 ,day);
data.addRow([date, Math.round(low), Math.round(open),
Math.round(close), Math.round(high)]);
}
dashboard.bind(control, chart);
dashboard.draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="dashboard">
<div id="chart" style='width: 915px; height: 300px;'></div>
<div id="control" style='width: 915px; height: 50px;'></div>
</div>
</body>
</html>
On Wednesday, October 10, 2012 12:57:14 AM UTC+8, Sergey Grabkovsky wrote:
>
> Ah yes, that is a GeoChart combined with the
> ChartRangeFilter<https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter>.
>
> Unfortunately, there were a number of complications in getting it to work
> with the GeoChart out of the box.
>
> - Sergey
>
>
> On Tue, Oct 9, 2012 at 12:22 PM, UI <[email protected] <javascript:>>wrote:
>
>> Picture of the product is attached. From the developer conference in
>> 2011 (http://www.youtube.com/watch?v=-hcY5qbCP7I).
>>
>>
>>
>>
>>
>> On Tuesday, October 9, 2012 10:25:52 PM UTC+8, Sergey Grabkovsky wrote:
>>>
>>> Hello!
>>>
>>> You may be thinking of the Public Data
>>> Explorer<http://www.google.com/publicdata/explore?ds=z6409butolt8la_#!ctype=m&strail=false&bcs=d&nselm=s&met_s=gsd&scale_s=lin&ind_s=false&ifdim=country&hl=en_US&dl=en_US&ind=false>,
>>>
>>> which has this capability. If not, I'm curious to know what product you are
>>> thinking of, since there's nothing else that provides this functionality. I
>>> did find an example of someone doing this on their
>>> own<http://www.chrisdblumberg.com/unemployment/animated.html>,
>>> however, so maybe that will help.
>>>
>>> Best of luck,
>>> - Sergey
>>>
>>> On Saturday, October 6, 2012 11:51:00 PM UTC-4, UI wrote:
>>>>
>>>> I am trying to add a timeline to GEOmap. I know that this product was
>>>> in development by google's team but I wonder if it is released already.
>>>>
>>>> The map will show GDP and other variables in different regions over
>>>> time.
>>>>
>>>> Many thanks.
>>>>
>>> --
>> You received this message because you are subscribed to the Google Groups
>> "Google Chart API" group.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msg/google-chart-api/-/dXlsXaF2HloJ.
>>
>> To post to this group, send email to
>> [email protected]<javascript:>
>> .
>> To unsubscribe from this group, send email to
>> [email protected] <javascript:>.
>> For more options, visit this group at
>> http://groups.google.com/group/google-chart-api?hl=en.
>>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Chart API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-chart-api/-/TKxNhRCkUa4J.
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-chart-api?hl=en.
