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.
