I answered this over on stackoverflow as well, but the two ways that come to mind are to use Google Image Charts to render an image to display, or to use Google Charts and the PNG printing option to get an image of the chart, and use that in the HTML. Again, neither will result in interactive charts.
On Thursday, July 10, 2014 2:35:11 AM UTC-4, Jack Pendlebury wrote: > > I currently have a scatter chart that has the html tooltips turned on. > According to the API you can use any javascript (and html) in the tooltips. > What I would like to do is allow the user to not only hover over a data > point and see more information on it, but to also see another graph within > the tooltip. > > > <script type="text/javascript" src="https://www.google.com/jsapi > "></script> > <script type="text/javascript"> > var aPart = (4 - 16) / ({{ lowest_velocity }} - {{ > highest_velocity }}); > var bPart = 4 - {{ lowest_velocity }} * aPart; > var options = {width: {{ img_width }}, height: {{ img_height > }}, title: 'Results for model: {{ current_model_selection }}, build: {{ > current_build_selection }}', chartArea: {left: 50, top: 100}, > backgroundColor: 'transparent', colors: ['#3cb521'], legend: 'none', > > hAxis: {viewWindow: {min: {{ tunnelminx }}, max: {{ > tunnelmaxx }}}, agridlines: {count: 0}}, pointSize: 8, fontName: '"Arial"', > vAxis: {viewWindow: {min: {{ tunnelminy }}, max: {{ > tunnelmaxy }}}, agridlines: {count: 0}}, tooltip: { isHtml: true }, > series: [ > {% for lst in velocity_pressure_list %} > {% if lst.1 == 0%} {# If pressure == 0 #} > {color: 'red', pointSize: aPart * {{lst.0}} + > bPart}, > {% else %} {# Else is pressure so change size #} > {pointSize: aPart * {{lst.0}} + bPart}, > {% endif %} > {% endfor %} > ] > }; > 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 %} > data.addColumn('number', 'Y'); > data.addColumn({type: 'string', label: 'Probe > Details', role: 'tooltip', 'p': {'html': true}}); > {% endfor %} > data.addRows({{ vtime_cd_list_of_lists|safe }}); > > var chart = new > google.visualization.ScatterChart(document.getElementById('chart_div')); > chart.draw(data, options); > > google.visualization.events.addListener(chart, 'select', > function () { > table.setSelection([ > {row: chart.getSelection()[0].row} > ]); > }); > var table = new > google.visualization.Table(document.getElementById('table_div')); > table.draw(data, {showRowNumber: true}); > } > </script> > > The parts enclosed with {{ }} are simply Django variables and likewise, {% > %} are Django logic statements. If anyone has any ideas about how to go > about this I'd greatly appreciate it. > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
