I am just a bit confused but not to bad. The label: 'Foo' what would i
really use there? All my data is pulled from a spreadsheet. I am going to
give it a go and hope I can do this.
Thanks so much for the help! here I go wish me luck!
On Tuesday, January 8, 2013 10:14:10 AM UTC-9, asgallant wrote:
>
> 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/-/eiSeD449PywJ.
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.
