[Answer]-Google charts – graph within a tooltip

Solved the problem by using the graph to png technique as suggested by JeremyFaller. My answer involves some Django, but I believe most people will get the general idea for php etc.

I have only included the relevant parts for getting graphs to show up in tooltips. Likewise, there is important information in the comments of the code. Scroll across to you don’t miss any.

This first bit is just a default chart (not dynamically created from a DB).

var encoded_img;
var copy_of_data_list;
google.load("visualization", "1", {packages: ["corechart", "table"]});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
        ['A', 1, 1, 0.5],
        ['B', 2, 0.5, 1],
        ['C', 4, 1, 0.5],
        ['D', 8, 0.5, 1],
        ['E', 7, 1, 0.5],
        ['F', 7, 0.5, 1],
        ['G', 8, 1, 0.5],
        ['H', 4, 0.5, 1],
        ['I', 2, 1, 0.5],
        ['J', 3.5, 0.5, 1],
        ['K', 3, 1, 0.5],
        ['L', 3.5, 0.5, 1],
        ['M', 1, 1, 0.5],
        ['N', 1, 0.5, 1]
    ]);

    // Create and draw the visualization.
    var chart_divB = document.getElementById('chart_divB'); //chart_divB is hidden
    var chartB = new google.visualization.LineChart(chart_divB)
    google.visualization.events.addListener(chartB, 'ready', function () {
        encoded_img = '<p><img src="' + chartB.getImageURI() + '"></p>'; //Creates the encoded img
    });
    var options = {title: 'Something random and cutsie about cats',
        width: 600,
        height: 400
    };

    chartB.draw(data, options); //Draws it in the hidden div (required for the png trick)
    copy_of_data_list ={{ main_graph_list_of_lists|safe }} //My Django data from a db
    for (var i = 0; i < copy_of_data_list.length; i++) {
        copy_of_data_list[i][2 * i + 2] += encoded_img; //Adds the encoded png image to the correct tooltip columns (most people will just have one, but I have other things going on)
    }
}

This is the second ‘proper’ chart which is visible and has tooltips.

google.load("visualization", "1", {packages: ["corechart", "table"]});
    google.setOnLoadCallback(drawChart);
    var data;
    function drawChart() {
        data = new google.visualization.DataTable();

        data.addColumn('number', 'X');
        {% for column in num_columns %} //More stuff that is not specifically related to this problem
            data.addColumn('number', 'Y');
            data.addColumn({type: 'string', label: 'Probe Details', role: 'tooltip', 'p': {'html': true}});//It is essential that the tooltip column/s is html enabled
        {% endfor %}
        data.addRows(copy_of_data_list); //The modified data thanks to the last 'chart'

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

Taking this beyond just one tooltip chart

This technique of using the png encoded images can be used to create different charts for each of the tooltips. By creating N hidden divs, each with their own unique id – a small modification on what I have done above can be used to achieve this. Hint: loop from the getting of the element by ID to the drawing of the chart N times (number of tooltips you have). For each of these hidden divs, with their own unique ids, you can then basically just draw hidden graphs and then convert them to pngs.

Note: if people want a better example, I will make one upon request if they can’t get different tooltip charts working.