Tooltip role in a ArrayToDataTable.

[John]

Hi! 

I'm using a Chart in which I like that the tooltip is a info different to the Chart.

I'm using a ArrayToDataTable, but I don't know how I can do that. 

That's is the code:

            var dataTable = google.visualization.arrayToDataTable([

  ['Year', 'Info1', 'Info2', 'Name' role:'tooltip'],

['1958',0,1,'Name1'],

['1961',0,1,'Name2']

]);

[asgallant]

the #arrayToDataTable method doesn't support setting column roles.  You can set the role explicitly after the DataTable is created like this:

dataTable.setColumnProperty(3, 'role', 'tooltip');

[John]

Thanks. That's work.

[John]

How I can get the name of the tooltip.

I'm using the event 'select' and the function getSelection and getValue, but the line getValue not work fine. I trie with several types code and I couldn't get the name.

The code is:

         var selection = Chart.getSelection();

         var name = dataTable.getValue(selection.row[0],selection.column[3]);

[asgallant]

The selection object is typically an array, which potentially contains multiple selected data points.  If you are assuming that your users are only selecting one point (or the chart doesn't support multiple selections), then this is what you would do:

var selection = Chart.getSelection();

var name = dataTable.getValue(selection[0].row, 3);

[John]

Thanks for help me, buI tried that and I will not.

I assume that the user will select one just because they can make more selections at a time.

The first line if it works (var selection = Chart.getSelection();), but the second is not.(var name = dataTable.getValue(selection[0].row, 3);)

It freezes the chart and unresponsive to new interactions.

[asgallant]

Open it in Chrome, view the developers console (ctrl+shift+j to open), and select something in the chart - what error messages appear in the console?

[John]

1. The message is:
   
   
   Uncaught TypeError: Cannot read property '0' of undefined
   
   
   
   Any idea?
   Thanks!

[asgallant]

That happens when there are no selected elements (you are trying to access the first element of an array with 0 elements).  The select event fires when an element is selected and when it is deselected, so you have to test for the length of the array:

var selection = Chart.getSelection();

if (selection.length > 0) {

    var name = dataTable.getValue(selection[0].row, 3);

    // do something with name

}

else {

    // go to a state appropriate for having no selected elements

[John]

Thanks. That's is working perfect!  :D 

[sgnv]

I have been trying to display tooltip on my chart can you please let me know if you have any suggestions..

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
 
      var data = google.visualization.arrayToDataTable([['Month', 'Usage','Name' role:'tooltip'],['Aug', 0, '<UsageHistoryDetail SortOrder="1" Quantity="0" ServiceMonthAndYear="8-2012" />
'],['Sep', 1, '<UsageHistoryDetail SortOrder="2" Quantity="1" ServiceMonthAndYear="9-2012" />
'],['Oct', 2, '<UsageHistoryDetail SortOrder="3" Quantity="2" ServiceMonthAndYear="10-2012" />
'],['Nov', 122, '<UsageHistoryDetail SortOrder="4" Quantity="122" ServiceMonthAndYear="11-2012" />
'],['Dec', 165, '<UsageHistoryDetail SortOrder="5" Quantity="165" ServiceMonthAndYear="12-2012" />
'],['Jan', 193, '<UsageHistoryDetail SortOrder="6" Quantity="193" ServiceMonthAndYear="1-2013" />
'],['Feb', 235, '<UsageHistoryDetail SortOrder="7" Quantity="235" ServiceMonthAndYear="2-2013" />
'],['Mar', 177, '<UsageHistoryDetail SortOrder="8" Quantity="177" ServiceMonthAndYear="3-2013" />
'],['Apr', 100, '<UsageHistoryDetail SortOrder="9" Quantity="100" ServiceMonthAndYear="4-2013" />
'],['May', 38, '<UsageHistoryDetail SortOrder="10" Quantity="38" ServiceMonthAndYear="5-2013" />
'],['Jun', 3, '<UsageHistoryDetail SortOrder="11" Quantity="3" ServiceMonthAndYear="6-2013" />
'] ]);;       
       
       data.setColumnProperty(2, 'role', 'tooltip');
 
        var options = {            
          title: '',
          hAxis: {title: '', titleTextStyle: {color: 'red'}},
          backgroundColor:'#E5E5E5',
          colors: ['#E37125']     
            };        
 
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data,options);
      }
    </script>

On Monday, May 20, 2013 5:45:21 AM UTC-4, John wrote:

[asgallant]

You can't assign column roles in the #arrayToDataTable method - if you need to use that method, then the way to handle this is to assign the column role after the DataTable is created:

data.setColumnProperty(2, 'role', 'tooltip');

[Steven Brooks]

Where exactly do you place the :

data.setColumnProperty(2, 'role', 'tooltip'); ?

My code looks like this: 

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable(graph);

  var options = {

    title: 'Your Workout',

    hAxis: {title: 'Exercises'},

    vAxis: {title: 'Total Weight (pounds)'}

  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  chart.draw(data, options);

  data.setColumnProperty (1, 'role', 'tooltip');

}

and I figured I would add that line of code at the end since this is after the tableis created.  It is not showing the information in column 1 as the tooltip.

[asgallant]

You need to call that before you draw the chart.  For organization purposes, I would call it immediately after creating the DataTable:

var data = google.visualization.arrayToDataTable(graph);

data.setColumnProperty (1, 'role', 'tooltip');

[Steven Brooks]

Would the column become solely a tooltip or will its be a tooltip as well as data that will be displayed in the column?

Steven Brooks

Sent from my iPhone

--
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/t4jAaaJc200/unsubscribe.
To unsubscribe from this group and all its topics, 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/groups/opt_out.
 
 

[asgallant]

Using that method, it is just a tooltip.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Steven Brooks]

I only see a tooltip for the specific column that I choose.  So if I choose column 2, that column has a tooltip and the others have their defaults.  I'd like each column to have their own tooltip.  Would I need to set each columns tooltip individually or have a universal tooltip?

[Steven Brooks]

Actually I guess what I would like to do is have each column have a similar tooltip with different information.. For example each column is the total weight a user lifted for an exercise in a weight training routine.  I'd like the tooltips for each columns / (set) do display a string that I will create for each.  

For example when a user hovers over column one which goes to 700 total pounds to displays "10 reps with 70 pounds".

On Monday, August 12, 2013 7:02:01 PM UTC-4, asgallant wrote:

[asgallant]

You'll need to either include a column with those strings, or have that information somewhere in the DataTable so you can create the strings.  Each data series needs its own tooltip column if you intend to override the default tooltips.

[Steven Brooks]

Awesome.  That worked.  No all I need to do is make a method that will popular setColumnProperty the correct amount of times depending on how many columns I have.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Steven Brooks]

I ended up passing the script a ruby method which return an array of strings.  I looped through those strings and ran "eval" on them so JS would run them as JS methods.  Works and scaled perfectly.

[Sandeep Ambekar]

Hi,

I tried this.. but it didnt work..

here is how my script looks.

var SRdata = google.visualization.arrayToDataTable([

['Manager', 'JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC','hint'],

['ABC',0,0,0,0,0,0,0,8,1,0,0,0,'XYZ'],

['EFG',1479,1288,1348,1374,1589,1420,1448,1285,1263,1573,0,0,'IJK']]);

SRdata.setColumnProperty(13, 'role', 'tooltip');

var pieChart2 = new google.visualization.ChartWrapper({

          'chartType': 'ColumnChart',

          'containerId': 'chart_div2',

          'options': {

tooltip: {isHtml: false, legend: 'none'},

            'width': 1300,

            'height': 400,

'title': 'Manager CNT',

            'hAxis': {title: 'Manager', titleTextStyle: {color: 'Black'}},

'vAxis': {

'title': 'RATE counts',

'titleTextStyle': {color: 'Black'}

}

          }

        });

i am using Dashboard. Please suggest.

[asgallant]

Your data is not structured correctly for a PieChart.  The PieCharts expect two columns of data: one "string" type (for the slice labels) and one "number" type (for the slice values).  Also, the PieCharts do not support the "tooltip" column role.

[Sandy]

Hi,

It's actually a column chart...I used piechart2 as just variable name.

--
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/t4jAaaJc200/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

Ahh, I see that now; sorry, I should have looked closer.  The tooltip role column is working properly: the problem is that the data in column 12 ("Dec") is 0 for both rows, so the is no column to trigger the tooltip (if you put values in for "Dec" you will see the tooltips).  If you want custom tooltips to apply to all columns, you will need to do one of two things: either add a tooltip column after every data column you want a custom tooltip for, or use a DataView to create custom tooltip columns for every data column you want a custom tooltip for.

Hi,

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

[Sandy]

hmm.. i had total misunderstanding of tool tip. Thanks for your help.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

[Tong Sun]

On Sunday, November 17, 2013 at 11:21:25 PM UTC-5, asgallant wrote:

If you want custom tooltips to apply to all columns, you will need to do one of two things: either add a tooltip column after every data column you want a custom tooltip for, or use a DataView to create custom tooltip columns for every data column you want a custom tooltip for.

Now all I need to do is make a method that will popular setColumnProperty the correct amount of times depending on how many columns I have.

I'm still having problem turning above into actual code. 

Could somebody post a working demo please? I need every data column having a tooltip of its own from the corresponding tooltip data column please. 

Thanks a lot!

[Tong Sun]

 To help you start easier please start from the following code:

```

<html>

  <head>

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

    <script type="text/javascript">

      google.load("visualization", "1.1", {packages:["bar"]});

      google.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var data = new google.visualization.arrayToDataTable([

          ['Galaxy', 'V1', 'T1', 'V2', 'T2'],

          ['Canis Major Dwarf', 8000, 23.3, 8000, 23.3],

          ['Sagittarius Dwarf', 24000, 4.5, 24000, 4.5],

          ['Ursa Major II Dwarf', 30000, 14.3, 30000, 14.3],

          ['Lg. Magellanic Cloud', 50000, 0.9, 50000, 0.9],

          ['Bootes I', 60000, 13.1, 60000, 13.1]

        ]);

        var options = {

          width: 900,

          chart: {

            title: 'Tooltip Demo',

            subtitle: 'every data column having a tooltip of its own'

          }

        };

      var chart = new google.charts.Bar(document.getElementById('tooltip_div'));

      chart.draw(data, options);

    };

    </script>

  </head>

  <body>

    <div id="tooltip_div" style="width: 900px; height: 500px;"></div>

  </body>

</html>

```

 

Thanks a lot!

[Sergey Grabkovsky]

Hi Tong,

Custom tooltips are not yet supported for the Material Charts. If you want this feature, you should use the CoreCharts.

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

[Tong Sun]

Thanks. I've altered my starter code to use the CoreCharts instead:

```

<html>

  <head>

    <!--Load the AJAX API-->

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

    <script type="text/javascript">

    // Load the Visualization API

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

      google.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var data = new google.visualization.arrayToDataTable([

          ['Galaxy', 'V1', 'T1', 'V2', 'T2'],

          ['Canis Major Dwarf', 8000, 23.3, 8000, 23.3],

          ['Sagittarius Dwarf', 24000, 4.5, 24000, 4.5],

          ['Ursa Major II Dwarf', 30000, 14.3, 30000, 14.3],

          ['Lg. Magellanic Cloud', 50000, 0.9, 50000, 0.9],

          ['Bootes I', 60000, 13.1, 60000, 13.1]

        ]);

        var options = {

          width: 900,

          chart: {

            title: 'Tooltip Demo',

            subtitle: 'every data column having a tooltip of its own'

          }

        };

      var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_div'));

      chart.draw(data, options);

    };

    </script>

  </head>

  <body>

    <div id="tooltip_div" style="width: 900px; height: 500px;"></div>

  </body>

</html>

```

Can somebody help me turn the  T1/T2 to be tooltips for V1/V2 please? 

Thanks

[Sergey Grabkovsky]

Here's a jsfiddle: http://jsfiddle.net/ovxLjqyn/

--

[Tong Sun]

On Thu, Feb 5, 2015 at 11:10 AM, 'Sergey Grabkovsky' via Google Visualization API <google-visua...@googlegroups.com> wrote:

Here's a jsfiddle: http://jsfiddle.net/ovxLjqyn/

Perfect! much simpler than I thought. Thanks!