Change tooltip content in chart

hi all

I am creating material line chart with google charts

I want to change the information in the tooltip that gets visible when you hover any pointer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      
      data.addColumn('number', 'Visits');
      data.addColumn('number', 'Hours');
    data.addColumn({type: 'string', role: 'tooltip'});

      data.addRows([
            [1, 04,'1 visits at 04 hours'], 
[3, 08,'3 visits at 08 hours'], 
[4, 07,'4 visits at 07 hours'], 
[5, 01,'5 visits at 01 hours'], 
[6, 06,'6 visits at 06 hours'], 

      ]);

      var options = {
        chart: {
          title: 'User Sessions hourly',
          subtitle: ''
        },
        width: 900,
        height: 300
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));
      

      chart.draw(data, options);
    }
    
    </script>

     <div id="linechart_material"></div>
</body>
</html>

i want to modify the information in the tooltip when you hover over pointer.

In the docs they say we should use

data.addColumn({type: 'string', role: 'tooltip'});

I tried it but the tooltip content is not changing.

vineet

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.