Re: Tooltips with 2 charts

89 views
Skip to first unread message

asgallant

unread,
Jan 8, 2013, 2:14:10 PM1/8/13
to google-visua...@googlegroups.com
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>

Justawebbie

unread,
Jan 8, 2013, 2:26:42 PM1/8/13
to google-visua...@googlegroups.com
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!

asgallant

unread,
Jan 8, 2013, 3:42:48 PM1/8/13
to google-visua...@googlegroups.com
You can use whatever you want for the label.  I just called it "Foo" as a placeholder.

Justawebbie

unread,
Jan 9, 2013, 4:43:29 PM1/9/13
to google-visua...@googlegroups.com
I am not sure I am understanding where to place it correctly to use it.  I am sorry.  I will get this sooner or later. Would you mind showing how to place it within my code above? Thank you so much for the help you have been giving me.

Thanks again!

asgallant

unread,
Jan 9, 2013, 5:07:10 PM1/9/13
to google-visua...@googlegroups.com
Are you looking to integrate this alongside the changing bar colors in the other thread?  If so, it may be more productive to handle all of this in one thread, so I don't get different sets of code mixed up; as I frequently lose track of who is asking what around here >;o)

Justawebbie

unread,
Jan 10, 2013, 12:43:09 PM1/10/13
to google-visua...@googlegroups.com
I am sorry I can be confusing at times.  No this is a different set of charts for a totally different page.  I even forget sometimes what I am doing and asking. :oP

I am just not sure how to add the view you showed me on this set of code because it is set up a bit different than the other thread.

Take care, justawebbie

asgallant

unread,
Jan 10, 2013, 12:57:08 PM1/10/13
to google-visua...@googlegroups.com
Ok, the simple way for you is to use the ChartWrapper#setView method.  Call this before you call wrap.draw();:

wrap.setView({
    // 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)};
        }
    }]
});
Reply all
Reply to author
Forward
0 new messages