With PieCharts, you can only change the formatted value of the data
presented to the chart (which will change what gets displayed in the
tooltip), you can't create fully custom tooltips (yet?). If changing the
formatted value is what you want, then you can do that by using the "view"
parameter of the ChartWrapper to modify the data presented to the chart.
Use it like this:
view: {
// set the chart to use column 0 for the slice labels, column 1 for the
slice values, and column 2 for the tooltip display
columns: [0, {
label: 'Foo',
type: 'number',
calc: function (dt, row) {
return {v: dt.getValue(row, 1), f: dt.getFormattedValue(row,
2)};
}
}]
}
On Tuesday, January 8, 2013 1:20:52 PM UTC-5, Justawebbie wrote:
>
> I have two charts feeding onto one page using google spreadsheets. I want
> to add a column to my spreadsheets and have them feed to the charts as
> well. How can I add the tooltips for each chart using my spreadsheets.
>
> here is my working code so far:
>
> <!DOCTYPE html>
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=UTF-8"></meta>
> <title>Home Page</title>
> <!--Load the AJAX API-->
> <script type="text/javascript" src="http://www.google.com/jsapi
> "></script>
> <script type="text/javascript">
> //Load the Visualization API and the ready-made Google table
> visualization
> google.load('visualization', '1', {'packages':['corechart']});
> </script>
>
> <script type='text/javascript'>
>
> function drawA() {
> // Define the chart using setters:
> var wrap = new google.visualization.ChartWrapper();
> wrap.setChartType('PieChart');
> wrap.setDataSourceUrl('
> http://spreadsheets.google.com/tq?key=0AjlSK7_zXoNHdE5oOHE0cTlNd2pQbzF0T3RsbE9PZ3c&pub=1'
> );
> wrap.setContainerId('energy-source-1');
> wrap.setOptions({'legend':['right',
> 'end'],'colors':['#5dbbeb','#f39f28','#aedfe9', '#528dcc'],
> 'is3D':'True','width':515,'height':400});
> wrap.draw();
> wrap.getChart();
> }
>
> function drawB() {
> // Define the chart using setters:
> var wrap = new google.visualization.ChartWrapper();
> wrap.setChartType('PieChart');
> wrap.setDataSourceUrl('
> http://spreadsheets.google.com/tq?key=0AjlSK7_zXoNHdDl1TXBPVGdoWmpIVFF2Z0xkTzhHSWc&pub=1'
> );
> wrap.setContainerId('energy-source-2');
>
> wrap.setOptions({'legend':'none','colors':['#5dbbeb','#f39f28','#aedfe9',
> '#528dcc'], 'is3D':'True','width':315,'height':315});
> wrap.draw();
> }
>
>
>
> function drawVisualization() {
> drawA();
> drawB();
>
> }
>
>
> google.setOnLoadCallback(drawVisualization);
> </script>
> </head>
> <body>
>
> <div style="width:95%; height:auto; float:left; margin:0; padding:0;">
>
> <div id="energy-source-1" style="float:left;"></div>
> <div id="energy-source-2" style="float:left;margin-top:50px;
> margin-left:-150px;" ></div>
> </div>
> </body>
> </html>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/p1wmDzgZp_kJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
