Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tooltips for multiple lines Google Line Chart

I am wondering if anyone knows how you would go about adding tooltips to multiple lines of data with Google Line Charts using DataTable, addColumn and addRow?

I've seen it done using other methods, but that is quite hard in my project and I feel like dumbass for not figuring this out. Anyways, I've dumbed down my code to present the essentials of my problem.

As you see, the tooltip shows for Line 2, but not for Line 1. My question is this: How do I add a tooltip to Line 1 using this method? My code: http://jsfiddle.net/Qquse/550/

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'y');
        data.addColumn('number', 'Line 1');
        data.addColumn('number', 'Line 2');
        data.addColumn({type: 'string', role: 'tooltip'});
        data.addRow([1, 1, 2, "Some fancy tooltip"]);
        data.addRow([2, 2, 4, "Some fancy tooltip"]);
        data.addRow([3, 3, 6, "Some fancy tooltip"]);
        data.addRow([4, 4, 8, "Some fancy tooltip"]);
        data.addRow([5, 5, 10, "Some fancy tooltip"]);
        var options = {
            title: 'Graph'
        };

       var chart = new google.visualization.LineChart(document.getElementById('chart'));
       chart.draw(data, options);
    }
    google.load("visualization", "1", {packages: ["corechart"]});
    google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
like image 710
Leakim Avatar asked Mar 24 '14 04:03

Leakim


People also ask

How do I add a chart in tooltips?

To achieve this, we first add a table within the tooltip. The first column contains the categories ("women", "men"), and the second one contains the bars. In this second column, we then add HTML <div> tags and define the width of these boxes with our numerical columns.

Is Google Charts deprecated?

While the dynamic and interactive Google Charts are actively maintained, we officially deprecated the static Google Image Charts way back in 2012. This gives us the right to turn it off without notice, which may happen soon.

What is tooltip in Datastudio?

Tooltips are a user interface element that pops up when you hover over a component on the screen. They display additional information for the component, and they're a great way to create meaningful yet decluttered data visualizations.


1 Answers

I tried adding both DataColumns first, then the tooltips. Turns out it had to be in this order:

data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});

instead of

data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'tooltip'});

Updated working fiddle: http://jsfiddle.net/Qquse/1207/

like image 97
Leakim Avatar answered Sep 28 '22 09:09

Leakim