Tyro GeoChart questions (also googleVis)

[Bryan Maloney]

I'm using the gvisGeoChart function in googleVis to generate choropleth maps, USA, by state.

I wish to know the following:

1. How do I embed the GeoChart object in a Blogger website post? Blogger is part of Google, it should be easy? HAHAHAHAHAHAHAHAHAHAHAHAHAHA!

2. How do I control what is displayed in the mouseover for each sub-region? I do not want the "colorvar" to appear in the popup at all. I only want the "hovervar" to appear. How do I suppress "colorver" from appearing on the popups but still have it used to calculate the color for the area? My colorvar is just plain ugly, it's a floating-point number. My hovervar is rounded, has nice symbols like "$", "million", or "%" where appropriate.

3. Where do I find a list of available projections?

[Andrew Gallant]

I don't know about embedding in a Blogger post; the charts require javascript, and some blogging platforms do not allow users to post javascript.  You may have better luck asking on StackOverflow for help embedding javascript in Blogger.

For your second question, are you using regions mode or markers mode?  A code sample replicating your chart would be helpful for me to understand what it is that you want, and what needs to be done to make it work correctly for you.

The latest list of projections I know of is here, but you should be aware that the projections option is not complete.  The list of available projections may change (and some in that list may not be available any more); the structure of the option itself may change; and there may be severe bugs associated with using them.  Use this option (as with any undocumented feature) at your own risk.

[Bryan Maloney]

 

I asked on the Blogger forum and was told to bug the GeoChart guys. Sounds like an enormous amount of buck passing going on, with nobody at all having the faintest clue. I am in regions mode.  Here is one of the googleVis statements I use to generate a GeoChart: AIG <- gvisGeoChart(difference, locationvar = "State", colorvar = "AIG", hovervar = "AIG_pretty", options = list(region = "US", resolution = "provinces", colorAxis = "{values:[-4928379, -1355690.39529412, 0, 1355690.39529412, 4928379], colors:['red', 'darkorange', 'white', 'blue', 'darkviolet']}", height = 900 , width = 1200))

I want to suppress "AIG" from the popup or suppress "State" and "AIG". I can always include a state abbreviation in AIG_pretty.

[Jon Orwant]

Bryan, I recommend taking your chart code and putting it up on jsfiddle.net.  If it works there, then your issue is with Blogger. If it doesn't work there, then your issue is with Google Charts. If it seems like buck passing, that's because the kind volunteers who are helping you, for free, are either experts in Charts (like Andrew) or in Blogger, but not both.

Jon

On Tue, Aug 5, 2014 at 10:33 AM, Bryan Maloney <maloneyw...@gmail.com> wrote:

 

I asked on the Blogger forum and was told to bug the GeoChart guys. Sounds like an enormous amount of buck passing going on, with nobody at all having the faintest clue. I am in regions mode.  Here is one of the googleVis statements I use to generate a GeoChart: AIG <- gvisGeoChart(difference, locationvar = "State", colorvar = "AIG", hovervar = "AIG_pretty", options = list(region = "US", resolution = "provinces", colorAxis = "{values:[-4928379, -1355690.39529412, 0, 1355690.39529412, 4928379], colors:['red', 'darkorange', 'white', 'blue', 'darkviolet']}", height = 900 , width = 1200))

I want to suppress "AIG" from the popup or suppress "State" and "AIG". I can always include a state abbreviation in AIG_pretty.

--
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.
For more options, visit https://groups.google.com/d/optout.

[Bryan Maloney]

I cut and pasted the whole gvisGeoChart output to all three windows to the web site and got nothing at all. Absolutely nothing. HOWEVER, the Blogger people ALREADY TOLD ME that the entire issue is 100%, totally, utterly, without any possibility of argument a GeoChart issue and has nothing at all to do with Blogger.

Likewise, how does using that site that did absolutely nothing for me solve the issue with controlling what gets displayed or suppressed on the popup, which is a non-solved issue REGARDLESS of whether or not I can post it on a Blogger post?

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/9kjTPZ4--T8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Bryan Maloney]

In addition to the googleVis command, here is the output from that command. For the Alabama entry,

 [

 "AL",

"AL: $22 million",

22186 

]

I wish to suppress "AL" and suppress 22186 and have only "AL: $22 million" appear on mouseover.

<!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>

<title>GeoChartID1590742f148</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style type="text/css">

body {

  color: #444444;

  font-family: Arial,Helvetica,sans-serif;

  font-size: 75%;

  }

  a {

  color: #4D87C7;

  text-decoration: none;

}

</style>

</head>

<body>

 <!-- GeoChart generated in R 3.1.1 by googleVis 0.5.3 package -->

<!-- Tue Aug 05 14:31:07 2014 -->

<!-- jsHeader -->

<script type="text/javascript">

 

// jsData 

function gvisDataGeoChartID1590742f148 () {

var data = new google.visualization.DataTable();

var datajson =

[

 [

 "AL",

"AL: $22 million",

22186 

],

[

 "AK",

"AK: -$93 million",

-93065 

],

[

 "AZ",

"AZ: $660 million",

659601 

],

[

 "AR",

"AR: $14 million",

14075 

],

[

 "CA",

"CA: -$1,050 million",

-1049642 

],

[

 "CO",

"CO: $592 million",

591884 

],

[

 "CT",

"CT: -$188 million",

-187758 

],

[

 "DE",

"DE: $49 million",

49474 

],

[

 "DC",

"DC: $32 million",

31559 

],

[

 "FL",

"FL: $4,928 million",

4928379 

],

[

 "GA",

"GA: $151 million",

150630 

],

[

 "HI",

"HI: $74 million",

74427 

],

[

 "ID",

"ID: $150 million",

149891 

],

[

 "IL",

"IL: -$1,998 million",

-1997777 

],

[

 "IN",

"IN: -$258 million",

-258058 

],

[

 "IA",

"IA: -$218 million",

-217530 

],

[

 "KS",

"KS: -$216 million",

-216031 

],

[

 "KY",

"KY: -$2 million",

-2444 

],

[

 "LA",

"LA: -$54 million",

-53519 

],

[

 "ME",

"ME: $71 million",

70622 

],

[

 "MD",

"MD: -$232 million",

-232201 

],

[

 "MA",

"MA: -$536 million",

-536470 

],

[

 "MI",

"MI: -$1,052 million",

-1052112 

],

[

 "MN",

"MN: -$357 million",

-356883 

],

[

 "MS",

"MS: -$45 million",

-45076 

],

[

 "MO",

"MO: -$388 million",

-388473 

],

[

 "MT",

"MT: $92 million",

92241 

],

[

 "NE",

"NE: -$111 million",

-111284 

],

[

 "NV",

"NV: $269 million",

269201 

],

[

 "NH",

"NH: $45 million",

45192 

],

[

 "NJ",

"NJ: -$1,680 million",

-1679631 

],

[

 "NM",

"NM: $30 million",

29605 

],

[

 "NY",

"NY: -$3,256 million",

-3256155 

],

[

 "NC",

"NC: $876 million",

876272 

],

[

 "ND",

"ND: $68 million",

67850 

],

[

 "OH",

"OH: -$1,263 million",

-1262524 

],

[

 "OK",

"OK: $17 million",

17140 

],

[

 "OR",

"OR: $266 million",

265561 

],

[

 "PA",

"PA: -$513 million",

-512993 

],

[

 "RI",

"RI: -$133 million",

-132706 

],

[

 "SC",

"SC: $835 million",

835055 

],

[

 "SD",

"SD: $99 million",

98588 

],

[

 "TN",

"TN: $458 million",

457846 

],

[

 "TX",

"TX: $2,399 million",

2399462 

],

[

 "UT",

"UT: $13 million",

13362 

],

[

 "VT",

"VT: -$2 million",

-2084 

],

[

 "VA",

"VA: $86 million",

85946 

],

[

 "WA",

"WA: $600 million",

599786 

],

[

 "WV",

"WV: -$9 million",

-9049 

],

[

 "WI",

"WI: -$288 million",

-287827 

],

[

 "WY",

"WY: $77 million",

76988 

] 

];

data.addColumn('string','State');

data.addColumn('string','AIG_pretty');

data.addColumn('number','AIG');

data.addRows(datajson);

return(data);

}

 

// jsDrawChart

function drawChartGeoChartID1590742f148() {

var data = gvisDataGeoChartID1590742f148();

var options = {};

options["width"] =   1200;

options["height"] =    900;

options["projection"] = "lambert";

options["region"] = "US";

options["resolution"] = "provinces";

options["colorAxis"] = {values:[-4928379, -1355690.39529412, 0, 1355690.39529412, 4928379], colors:['red', 'darkorange', 'white', 'blue', 'darkviolet']};

    var chart = new google.visualization.GeoChart(

    document.getElementById('GeoChartID1590742f148')

    );

    chart.draw(data,options);

    

}

  

 

// jsDisplayChart

(function() {

var pkgs = window.__gvisPackages = window.__gvisPackages || [];

var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];

var chartid = "geochart";

  

// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)

var i, newPackage = true;

for (i = 0; newPackage && i < pkgs.length; i++) {

if (pkgs[i] === chartid)

newPackage = false;

}

if (newPackage)

  pkgs.push(chartid);

  

// Add the drawChart function to the global list of callbacks

callbacks.push(drawChartGeoChartID1590742f148);

})();

function displayChartGeoChartID1590742f148() {

  var pkgs = window.__gvisPackages = window.__gvisPackages || [];

  var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];

  window.clearTimeout(window.__gvisLoad);

  // The timeout is set to 100 because otherwise the container div we are

  // targeting might not be part of the document yet

  window.__gvisLoad = setTimeout(function() {

  var pkgCount = pkgs.length;

  google.load("visualization", "1", { packages:pkgs, callback: function() {

  if (pkgCount != pkgs.length) {

  // Race condition where another setTimeout call snuck in after us; if

  // that call added a package, we must not shift its callback

  return;

}

while (callbacks.length > 0)

callbacks.shift()();

} });

}, 100);

}

 

// jsFooter

</script>

 

<!-- jsChart -->  

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

 

<!-- divChart -->

  

<div id="GeoChartID1590742f148" 

  style="width: 1200; height: 900;">

</div>

 <div><span>Data: difference &#8226; Chart ID: <a href="Chart_GeoChartID1590742f148.html">GeoChartID1590742f148</a> &#8226; <a href="https://github.com/mages/googleVis">googleVis-0.5.3</a></span><br /> 

<!-- htmlFooter -->

<span> 

  R version 3.1.1 (2014-07-10) 

  &#8226; <a href="https://developers.google.com/terms/">Google Terms of Use</a> &#8226; <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart">Documentation and Data Policy</a>

</span></div>

</body>

</html> 

[Andrew Gallant]

The GeoCharts don't support custom tooltips yet, so the range of what you can do is a bit limited.  If you want to get rid of the second row from the tooltips, the solution is to use a "tooltip" role column to override the contents of the row and null them out.  The tooltip will render with a space for the row, but it will be empty.  Here's an example of what this looks like: http://jsfiddle.net/asgallant/nLG37/.  The example uses a DataView to add the tooltip column in (lines 279-286), and draws the chart using the view.  If you are creating the chart server-side, it may be easier to add the tooltip column there instead of using a view.

[Bryan Maloney]

The jsfiddle link came up with nothing but 500 internal server error over and over again.

[Bryan Maloney]

Since the jsfiddle link fails, what did you do and how does it work? I am not a javascript programmer. As I stated initially, I use the googleVis package to generate the geocharts. How do I pass this through googleVis?

[Andrew Gallant]

The javascript I used in the fiddle is:

function drawChartGeoChartID1590742f148() {

    var data = gvisDataGeoChartID1590742f148();

    var options = {};

    options["width"] =   1200;

    options["height"] =    900;

    options["projection"] = "lambert";

    options["region"] = "US";

    options["resolution"] = "provinces";

    options["colorAxis"] = {values:[-4928379, -1355690.39529412, 0, 1355690.39529412, 4928379], colors:['red', 'darkorange', 'white', 'blue', 'darkviolet']};

    

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

    view.setColumns([0, 1, 2, {

        type: 'string',

        role: 'tooltip',

        calc: function (dt, row) {

            return null;

        }

    }]);

    

    var chart = new google.visualization.GeoChart(

        document.getElementById('GeoChartID1590742f148')

    );

    chart.draw(view,options);

}

What language are you working with server side?  I'm not familiar with a "googleVis" package.

[Bryan Maloney]

googleVis is part of the R package. Pour in data, execute command, geochart pours out. However, I can manually add your code to that output. It worked like a charm. Thank you.

--