How can I highlight complete continents on a GeoChart map?

[Pier van der Kraan]

Hi,

I'm using Geochart for a website I'm developing.

Currently I list countries on a couple of maps, like this: 

    ['Countries', 'Link', 'Offices'],

    ['Czech Republic', '/europe', 1],

For one specific map I would like to select whole continents, but I can't figure out how to do this. 

Can you help me? Thanks! Underneath you find all of the code I'm using right now.

Kind Regards,

Pier

----

<div id="chart"> </div>

<div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">// <![CDATA[

google.load('visualization', '1', {'packages': ['geochart']});

google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap () {

var data = google.visualization.arrayToDataTable([

    ['Countries', 'Link', 'Offices'],

    ['USA', '/north-america', 1],

    ['Canada', '/north-america', 1],

    ['Slovakia', '/europe', 1],

    ['Czech Republic', '/europe', 1],

    ['Bulgaria', '/europe', 1],

    ['Croatia', '/europe', 1],

    ['Hungary', '/europe', 1],

    ['Poland', '/europe', 1],

    ['Romania', '/europe', 1],

    ['Slovenia', '/europe', 1],

    ['Serbia', '/europe', 1],

  ]);

var view = new google.visualization.DataView(data)

view.setColumns([0, 2])

var height = ( $(window).width() / 5 ) * 3;

  var geochart = new google.visualization.GeoChart(document.getElementById('chart'));

  geochart.draw( view, {

    width: $(window).width(),

    height: height,

    region: 'world', 

    legend: 'none',

    keepAspectRatio: false,

    backgroundColor: '#d9e8f5',

    colorAxis: {colors: ['#6E90CF', '#005ca9']}

  } );

$('#chart').css({ top: -1 * ( height / 4 ) })

$('#page-header').height( height - ( height / 4 ) )

function selectHandler(e)     {   

   window.location = data.getValue(geochart.getSelection()[0].row, 1);

}

        google.visualization.events.addListener(geochart, 'select', selectHandler);

}

// ]]></script>

</div>

[Sergey Grabkovsky]

Hi, in order to be able to select continents from the geochart, you need to first set the 'resolution' option to 'continents'. If you would like to either set the region to a continent or set the value of a continent, you can specify one of the values from here.

- Sergey

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Pier van der Kraan]

Hi Sergey,

Thanks a lot, I got it working with your suggestions. Do you have any idea if I can also use the codes for the sub-continents (can't seem to get those working).

Pier

2013/2/19 Sergey Grabkovsky <gra...@google.com>

[Sergey Grabkovsky]

You can use subcontinents in the same way, just make sure to set the resolution to "subcontinents".

- Sergey

[Pier van der Kraan]

Thanks so much, that works as well. One last question: I can't by any change combine subcontinents and continents selections on one map, can I? 

2013/2/20 Sergey Grabkovsky <gra...@google.com>

[Sergey Grabkovsky]

Hi, unfortunately you can't combine subcontinents and continents on one map. This is because the GeoChart wouldn't know whether you want it to select a continent or a subcontinent. Although it is kind of odd that you can't put both continent and subcontinent data on the chart at once.

- Sergey

[Pier van der Kraan]

Hi Sergey,

Thanks, I already thought so. Have a nice weekend!

Pier

2013/2/20 Sergey Grabkovsky <gra...@google.com>

[anil jain]

Hi, I am using the below code to show continents but it's not working. Pl help me.

Code:

<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', 'Popularity'],
          ['Eastern Africa', 200],
          ['Eastern Asia', 300],
          ['Australia', 400]

        ]);

            var view = new google.visualization.DataView(data)

            view.setColumns([0, 1])

            var options = { region: 'world', resolution: 'Continents', width: 556, height: 347 };

            var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
            chart.draw(data, options);


//            var geochart = new google.visualization.GeoChart(
//      document.getElementById('chart_div'));
//            var options = { region: 'world', resolution: 'continents', width: 556, height: 347 };
//            google.visualization.events.addListener(geochart, 'regionClick', function (eventData) {
//                // maybe you want to change the data table here...
//                options['region'] = eventData.region;
//                options['resolution'] = 'continents';
//                geochart.draw(data, options);
//            });
//            geochart.draw(data, options);

        };
    </script>

Regards,
Anil

2013/2/20 Sergey Grabkovsky <gra...@google.com>

- Sergey

2013/2/20 Sergey Grabkovsky <gra...@google.com>

- Sergey

2013/2/19 Sergey Grabkovsky <gra...@google.com>

- Sergey

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

[Sergey Grabkovsky]

I know it doesn't seem like it should matter, but continents should be spelled with a lower-case 'c'. That would change your code to the following:

<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', 'Popularity'],
          ['Eastern Africa', 200],
          ['Eastern Asia', 300],
          ['Australia', 400]

        ]);

            var view = new google.visualization.DataView(data)

            view.setColumns([0, 1])

            var options = { region: 'world', resolution: 'continents', width: 556, height: 347 };

            var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
            chart.draw(data, options);


//            var geochart = new google.visualization.GeoChart(
//      document.getElementById('chart_div'));
//            var options = { region: 'world', resolution: 'continents', width: 556, height: 347 };
//            google.visualization.events.addListener(geochart, 'regionClick', function (eventData) {
//                // maybe you want to change the data table here...
//                options['region'] = eventData.region;
//                options['resolution'] = 'continents';
//                geochart.draw(data, options);
//            });
//            geochart.draw(data, options);

        };
    </script>

Good luck! Let us know if you have any more problems.

- Sergey

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.

[Jasim Swati]

Hello I have a simple problem

I want to show Both Map and Geo chart on one page!

Variables (Data for both are differnt) Any one knows how to show both map and Geo chart on one page?

[Andrew Gallant]

Assuming you have two functions that draw the Map and the GeoChart, respectively, you could use something like this to draw them:

function draw () {
    drawMap();
    drawGeoChart();
}
google.load('visualization', '1', {packages: ['geochart', 'map'], callback: draw});