Re: how to add mouseover to google treemap

[asgallant]

TreeMaps don't support the same types of tooltips as the rest of the charts.  You will need a custom tooltip implementation to make this work; here's a simplistic version that can get you started: http://jsfiddle.net/asgallant/fR7a9/ (note that the example make use of the jQuery library - everything can be done without it, but the library makes it easier to do).

You might want to look into packaged tooltip libraries (there are tons of options, google jQuery tooltips for a bunch) to use instead of my hacked together solution.

On Sunday, November 11, 2012 8:08:21 AM UTC-5, ErikM wrote:

Dear all

I am trying to find a way of adding mouseover to my treemap, which is working fine.
Currently i just displays the default text of the "Provider" in the mouseover.
But what I would like do is to have a combination of a "Provider" + "TotalService" ideally on two lines and e.g. the provider set to bold, I have tried various ways according to the research on this forum, I did not find a way of getting the various sample implemented, e.g. https://developers.google.com/chart/interactive/docs/examples#mouseovertooltip. not even just a customer mouseover, without any formatting.
I fully admit that I am not really familiar with coding. and therefor the code snippets integration in my specific code is failing. Would be someone be able to just help to get my head around it.



My Code that is working, but only with the default mouseover:
<div id="chart_div3" style="width: 1000px; height: 500px;"></div>

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["treemap"]});
      google.setOnLoadCallback(drawChart);
      var gDataXMLservcost = <VALUE-OF>vars["gDataXMLservcost"]</VALUE-OF>];
      function drawChart() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable(
        gDataXMLservcost
        );

        // Create and draw the visualization.
        var tree = new google.visualization.TreeMap(document.getElementById('chart_div3'));
        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true});
        }
    </script>


by datastring extract "gDataXMLservcost" (side remark, not important variable "gDataXMLservcost" is generated by a recursive sql used by a BIRT table)
[['Consumer','Provider','TotalService','Unit'],['IT full service cost',null,0,0],['iDevice Access & Authentication Mgmt (401096) - FI;410082;401096', 'Access to email calendar and contacts for private iPhones/iPads (410082) - FI;410082', 1234.0, 2.0],['iDevice Infrastructure (401068) - FI;410082;401068', 'Access to email calendar and contacts for private iPhones/iPads (410082) - FI;410082', 23.0, 2.0],['Additional CPU Windows (virtual) (400003) - FI;410000;400025;400003', 'Active Directory (400025) - FI;410000;400025', 12.0, 2.0],['Additional Memory Windows (virtual) (400004) - FI;410000;400025;400004', 'Active Directory (400025) - FI;410000;400025', 122.0, 2.0],['Application Access Management (405191) - FI;410000;400025;405191', 'Active ...


That is what I have tried but obviously not working at all just provides me with an empty area on the webpage. as I actually just reused the barchart mouseover.
I would appreciate if some one could just return my code with a customer mouse over  (does not have to be the barchart mouseover sample) .

<div id="chart_div3" style="width: 1000px; height: 500px;" onmouseout="resetLastHoveredRow();"></div>

  <link rel="stylesheet" href="//www.google.com/cse/style/look/default.css" type="text/css" />
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script id="jqueryui" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" defer async></script>
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
   
   
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["treemap"]});
    //  google.setOnLoadCallback(drawChart);
      var gDataXMLservcost = <VALUE-OF>vars["gDataXMLservcost"]</VALUE-OF>];
      var TreeMapVisualization;
      var lastHoveredRow = 0; 
     
     
      function drawChart() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable(
        gDataXMLservcost
        );

        // Create and draw the visualization.
        var tree = new google.visualization.TreeMap(document.getElementById('chart_div3'));
        tree.draw(data, {
          minColor: '#f00',
          maxColor: '#0d0',
          mincolorvalue: 1,
          maxcolorvalue: 2,
          headerHeight: 15,
          fontColor: 'black',
          showScale: true});

        TreeMapVisualization = new google.visualization.TreeMap(document.getElementById('chart_div3'));
    TreeMapVisualization.draw(data, null);

    // Add our over/out handlers.
    google.visualization.events.addListener(TreeMapVisualization, 'onmouseover', barMouseOver);
    google.visualization.events.addListener(TreeMapVisualization, 'onmouseout', barMouseOut);
  }

  function barMouseOver(e) {
    TreeMapVisualization.setSelection([e]);
  }

  function barMouseOut(e) {
    TreeMapVisualization.setSelection([{'row': null, 'column': null}]);
  }


  }
    </script>

your support is highly appreciated.

Regards,
Erik

[API Developer]

Thanks a lot asgallant! Do you know what the normal tooltips look like? I tried to enable them on the playground, but it didn't do anything...

[asgallant]

The normal tooltips for TreeMaps are just a small yellow box with the name of the node in it.

[ErikM]

Dear asgallant

I have been using the treemap now and got great feedback, one item I am struggling with is that I would like to color code the areas with.

[['Consumer','Provider','TotalService','Unit'],[.......

Where as the units are either 1 or 2 whereas 1=green and 2=red and ideally 0=grey.

Somehow I tried to play with the min and max value color but that did not work.

Would you be able to assist me here.

Regards,

Erik

[asgallant]

Try setting these options:

maxColorValue: 2,

minColorValue: 0,

maxColor: 'red',

midColor: 'green',

minColor: 'grey'

[Erik Marke]

Dear Asgallant

Thanks a lot, I have tried this already, and it does not really work according to my expectations, as when there is only a zero for that level. or if there are only 1 it is not only green seems to be a mix of green and red.

perhaps dependant on the underlaying levels costs types.

If you know of an other way, I would appreciate it very much.

regards,

Erik

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

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

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

--
Erik Marke Grossmann

Marktstrasse 18

8500 Frauenfeld

er...@marke.dk

Priv: +41 52 366 39 33, Fax: +41 52 366 39 48, Mobile: +41 79 207 34 67

[asgallant]

Yeah, the color column only works for the bottom levels of nodes.  All nodes above them have their colors calculated by either the average of the color values of all sub-nodes.  What you need is to restrict the TreeMap to only the rows of data relevant to what is currently being displayed.  Here's an example: http://jsfiddle.net/asgallant/DVmKy/

Note that due to the tricks involved in pulling it off, there are some differences in the behavior of the TreeMap, primarily in navigation: moving down the tree works the same (click on a node to go down), but to go up, you have to click on the header at the top; right-clicking to go back up the tree doesn't work.

Erik

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Erik Marke]

dear asgallant

thx will test, hope mouseover, ... still work

have you been already once doing something likehighstocks but just open source, i so could share it.

ideally d3 or google chart

rgds erik

Sent from my iPad

Erik

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
Erik Marke Grossmann

Marktstrasse 18

8500 Frauenfeld

er...@marke.dk

Priv: +41 52 366 39 33, Fax: +41 52 366 39 48, Mobile: +41 79 207 34 67

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

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/2WNyIZ06hqkJ.

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

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[asgallant]

The mouseover stuff should still work, with a bit of tweaking.  I merged the two examples together here: http://jsfiddle.net/asgallant/DVmKy/1/

Erik

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
Erik Marke Grossmann

Marktstrasse 18

8500 Frauenfeld

er...@marke.dk

Priv: +41 52 366 39 33, Fax: +41 52 366 39 48, Mobile: +41 79 207 34 67

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/2WNyIZ06hqkJ.
To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[Erik Marke]

Dear Asgallant

unfortunatly, the merged version does not drill down, also in your merged sample not

it provides a firebug error:
tree.getChart is not a function

var viewRow = tree.getChart().getSelection()[0].row;

Can you please assist. It tried various changes directly in jsfiddle but did not work.

regards,
Erik

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

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

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

My mistake, I missed one piece that needed to be changed over: the original drilldown example used a ChartWrapper, and so needed to use the #getChart method - when I merged them, I just used a TreeMap object instead, but forgot to remove the getChart call.  See the fix here: http://jsfiddle.net/asgallant/DVmKy/10/

Erik

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
Erik Marke Grossmann

Marktstrasse 18

8500 Frauenfeld

er...@marke.dk

Priv: +41 52 366 39 33, Fax: +41 52 366 39 48, Mobile: +41 79 207 34 67

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/2WNyIZ06hqkJ.
To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

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

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

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

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Erik Marke]

great it worked thanks a lot, asgallant.

I was wondering if you have had any experience with open source implementation similar to http://www.highcharts.com/products/highstock
if so could you share this?

Kind regards,
Erik

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

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

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

I haven't used any open-source charting tools, so I can't comment on that.  If you're looking for a way to do that in the Visualization API, you can use a LineChart with a ChartRangeFilter in a Dashboard to get a similar effect.

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

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

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.