Google Charts: Chart within tooltip not displaying

Question

I am trying to display a chart within a chart using Google Charts and have been using this link for assistance under the section: Placing charts in tooltips

https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

I am almost finished but the issue I have is that when I hover over my main chart, the image for my tooltip chart isn't displaying, the actual src= link is displaying instead. For example:

<img src"="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiAAAYw0lEQ…DyBSCAAALpESBA0uPOVRFAAIHICxAgkR9CvgAEEEAgPQL/A4rwLGxfU1B2AAAAAElFTkSuQmCC">"

is appearing where the image should be. Using console.log I printed the links displayed in the image out and clicked on the links. The graphs displayed fine so they are just not showing within the tooltip. This is my current code:

    var data6Array = [
    [auditsTotal, <?php echo $audits_total;?>, 'blue'],
    [auditsInProgess, <?php echo $audits_inprogress;?>, 'orange'],
    [auditsCompleted, <?php echo $audits_completed;?>, 'green']
    ];

    <?php }?>

    var data6ToolTipArray = [['User','auditsTotal', 'auditsInProgress', 'auditsComplete']];

    var products = <?php echo json_encode($convertedAuditDataObjectsToArrays) ?>;
    for (var i =0; i < products.length; i++){
       var product = products[i];
       var tempArray = [product["userName"], product["auditsTotal"], product["auditsInProgress"], product["auditsComplete"]];
       data6ToolTipArray.push(tempArray);
    }

    var options6= {'title':'Audits',
                    hAxis: {title: 'Audits', titleTextStyle: {color: 'green'}},
                    vAxis: {title: 'Amount', titleTextStyle: {color: 'green'}},
                   'width':900,
                   'height':600,
                   tooltip: {isHTML: true}};

    var tooltipOptions = {
        title: 'User Audits',
        legend: 'none'
    };

    var data6ToolTipData = new google.visualization.arrayToDataTable(data6ToolTipArray);
    var data6ToolTipView = new google.visualization.DataView(data6ToolTipData);

     for (var i = 0; i < data6Array.length; i++) {

      // Set the view for each event's data
      data6ToolTipView.setColumns([0, i + 1]);

      var hiddenDiv = document.getElementById('chart_div6_hidden_div');
      var tooltipChart = new google.visualization.ColumnChart(hiddenDiv);

      google.visualization.events.addListener(tooltipChart, 'ready', function() {

        // Get the PNG of the chart and set is as the src of an img tag.
        console.log(tooltipChart.getImageURI());
        var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

        // Add the new tooltip image to your data rows.
        data6Array[i][3] = tooltipImg;

      });
      tooltipChart.draw(data6ToolTipView, tooltipOptions);
    }


    var data6 = new google.visualization.DataTable();
    data6.addColumn('string', 'Audits3');
    data6.addColumn('number', 'Audits2');
    data6.addColumn({type:'string', role: 'style'});

    // Add a new column for your tooltips.
    data6.addColumn({
      type: 'string',
      label: 'Tooltip Chart',
      role: 'tooltip',
      'p': {'html': true}
    });
    data6.addRows(data6Array);

  var chart6 = new google.visualization.ColumnChart(document.getElementById('chart_div6'));
      chart6.draw(data6, options6);

Just need to figure out why the tooltip graph isn't displaying when I hover over my original graph, its been driving me crazy!

Try escaping the double quotes in the statement setting the img tag src. using \ before the double quote. e.g var tooltipImg = '<img src=\" ' + tooltipChart.getImageURI() + ' \" >'; — Nasir T

WhiteHat WhiteHat · Accepted Answer · 2016-11-28T13:32:38

in the chart options, isHTML is the wrong case

it should be --> tooltip: {isHtml: true}

Google Charts: Chart within tooltip not displaying

1 Answers