Main Contents

google visualization api

March 2, 2010

A quick example of how to use the google visualization api to visualize data by US state(just a hacked version of one of their examples):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
    <head>
        <script type='text/javascript' src='http://www.google.com/jsapi'></script>
        <script type='text/javascript'>
            google.load('visualization', '1', {'packages': ['geomap']});
            google.setOnLoadCallback(drawMap);
            function drawMap() {
                var data = new google.visualization.DataTable();
                data.addRows(6);
                data.addColumn('string', 'State');
                data.addColumn('number', 'Popularity');
                data.setValue(0, 0, 'US-NY');
                data.setValue(0, 1, 200);
                data.setValue(1, 0, 'US-CA');
                data.setValue(1, 1, 300);
                data.setValue(2, 0, 'US-NJ');
                data.setValue(2, 1, 400);
                data.setValue(3, 0, 'US-FL');
                data.setValue(3, 1, 500);
                data.setValue(4, 0, 'US-TN');
                data.setValue(4, 1, 600);
                data.setValue(5, 0, 'US-NV');
                data.setValue(5, 1, 700);
                var options = {};
                options['dataMode'] = 'regions';
                options['region']   = 'US';
                var container = document.getElementById('map_canvas');
                var geomap = new google.visualization.GeoMap(container);
                geomap.draw(data, options);
            };
        </script>
    </head>
    <body>
        <div id='map_canvas'></div>
    </body>
</html>

Filed under: Computers | Comments (0)

Leave a comment

Login