TIME LINE with GEOMAP

UI

unread,

Oct 6, 2012, 11:51:00 PM10/6/12

to google-c...@googlegroups.com

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.

Sergey Grabkovsky

unread,

Oct 9, 2012, 10:25:52 AM10/9/12

to google-c...@googlegroups.com

Hello!

You may be thinking of the Public Data Explorer, 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, however, so maybe that will help.

Best of luck,

- Sergey

UI

unread,

Oct 9, 2012, 12:22:42 PM10/9/12

to google-c...@googlegroups.com

Picture of the product is attached. From the developer conference in 2011 (http://www.youtube.com/watch?v=-hcY5qbCP7I).

Map with timeline.png

Sergey Grabkovsky

unread,

Oct 9, 2012, 12:56:50 PM10/9/12

to google-chart-api

Ah yes, that is a GeoChart combined with the ChartRangeFilter. Unfortunately, there were a number of complications in getting it to work with the GeoChart out of the box.

- Sergey

--
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 google-c...@googlegroups.com.
To unsubscribe from this group, send email to google-chart-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-chart-api?hl=en.

UI

unread,

Oct 9, 2012, 11:46:08 PM10/9/12

to google-c...@googlegroups.com

Thanks. How can I link the two and simply add a year column. Looks good otherwise?

<html>

<head>

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>

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

<head>

<title>

Google Visualization API Sample

</title>

google.load('visualization', '1.1', {packages: ['corechart', 'controls']});

</script>

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>

</body>

</html>

Sergey Grabkovsky

unread,

Oct 10, 2012, 10:18:15 AM10/10/12

to google-c...@googlegroups.com

Hi, that example in the video was a bit forward thinking, and I don't think there's currently a way to do this "out of the box", i.e. by just binding the control. What you have to do is listen to the statechange event and create a new DataView or DataTable and redraw the GeoChart manually. Unfortunately, I don't think this control is currently powerful enough to do the kind of averaging that needs to be done for this.

UI

unread,

Oct 21, 2012, 10:07:07 AM10/21/12

to google-c...@googlegroups.com

http://jsfiddle.net/asgallant/Fs3Hb/ seems to provide a good solution. I can't get it to load using html on iweb. Any suggestion to turn java to html to post using iweb?

Sergey Grabkovsky

unread,

Oct 22, 2012, 9:40:33 AM10/22/12

to google-chart-api

I'm not sure what you mean by "turn java to html." There is no Java code in the example you pointed to, and if there was there is no way to convert Java to HTML. There is JavaScript there, but there is no way to convert that to HTML either. try putting the JavaScript code in <script></script> tags, though, and that should make it work in HTML. Alternatively, you can put the JavaScript in a separate .js file and linking to it as outlined here.

- Sergey

To view this discussion on the web visit https://groups.google.com/d/msg/google-chart-api/-/kREQffgmJ4wJ.

UI

unread,

Oct 30, 2012, 10:46:00 AM10/30/12

to google-c...@googlegroups.com

http://jsfiddle.net/asgallant/86ZA3/1/ will work perfectly but I still do not know how to link to external data or even simply input the data.