asked on

Tooltip actions on Google Visualization Line Chart

Hello!

I have a Google API line graph with two lines and clickable tooltips. On the click, a hidden div is shown that displays a pie chart with further details about the point on the graph. This is working fine using a switch statement. However, I'm having difficulty getting unique onclick events for both line points. Currently, for the month of Jan 18, it's showing the same pie chart for both lines. Not sure what I can do to fix this and have each bullet display their respective chart.

You can check out my code here: https://jsfiddle.net/Error_423/g4gz279e/35/
I was using this as a reference: https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltip-actions

I've added comments in the JS and HTML to further explain what I'm trying to accomplish.

Any help would be greatly appreciated!

zephyr_hex (Megan)

One problem is here:

document.getElementById('container').style.display = "block";

Open in new window

You don't have any HTML elements with the id = "container".

I'll poke at it a bit further to see what I think should happen when See Pie Chart is clicked...

ASKER CERTIFIED SOLUTION

zephyr_hex (Megan)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Annie Kay

ASKER

Hi Megan,

Yes, the container items are there as filler :)

Thanks! That's exactly what I was looking for -- so I would remove the switch statement then?

See my changes to the fiddle here: https://jsfiddle.net/Error_423/g4gz279e/51/

I removed the case 13 and added the getElementbyId to the if statement. Should I do this for all the cases?

Thanks!

zephyr_hex (Megan)

The switch statement can be taken out. I believe this is more along the lines of what you're looking for:

https://jsfiddle.net/g4gz279e/53/

          action: function() {
            selection = chart.getSelection();
            if(selection[0].column === 1) {
            document.getElementById('containerSAVI').style.display = "block";
            document.getElementById('containerEAVI').style.display = "none";
            } else {
            document.getElementById('containerEAVI').style.display = "block";
            document.getElementById('containerSAVI').style.display = "none";
            }
          }

Open in new window

Annie Kay

ASKER

So the switch statement allowed me to change the pie charts for each month. How would I do that with this if/else?

Thanks!!

zephyr_hex (Megan)

If you are hard-coding this by month, you'll still need a switch statement. You could keep your previous switch and inside each case, check for the line color, or, check for the line color and have a switch statement inside each clause of the if / else.

Ideally, this would not be hard-coded, but would instead have one pie chart function that accepts the type and month as parameters. This would reduce the repetition of code and simplify the logic by eliminating the need for conditional statements.

Annie Kay

ASKER

Hi Megan,

That makes complete sense - I'll look into that.

Any suggestions on how I can move all the JS into the JS section and just call it from the HTML?

zephyr_hex (Megan)

It looks like you need to use unique variable names in order to move the JS out of the HTML. I also would recommend that you use jQuery events to trigger your actions, rather than calling JS from HTML.

Here's an example, using the last Fiddle Update I posted above:

https://jsfiddle.net/ufcfc7vg/3/

Annie Kay

ASKER

THANK YOU!

Last question -- I've been struggling to figure out how to remove the text See Pie Chart for dots on the line graph that don't have pie charts associated with them. Since I'm setting the text to be See Pie Chart here: text: 'See Pie Chart', I'm wondering what I could do? I'm okay with making it a manual display none, since I will be manually putting in the numbers as the pie chart data flows in.

Thanks!
Anisah