How to plot google chart after clicking a button using a jquery

Question

I'm able to plot following chart just out of the box (https://developers.google.com/chart/interactive/docs/gallery/piechart), but when I try to load it via jquery after clicking a button it doesn't work. I read a lot of questions/answers here in stackoverflow and elsewhere in the Internet, but somehow they didin't work to me and I was unable to solve the issue. Nothing is plotted on the screen after clicking the button.

Here the last code I tried:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script>

            $(document).ready(function(){
                $(".btn").click(function(){


                    google.load("visualization", "1", {packages:["corechart"]});
                    google.setOnLoadCallback(drawChart);

                    function drawChart() {

                        var data = google.visualization.arrayToDataTable([
                            ['Task', 'Hours per Day'],
                            ['Work',     11],
                            ['Eat',      2],
                            ['Commute',  2],
                            ['Watch TV', 2],
                            ['Sleep',    7]
                        ]);

                        var options = {
                            title: 'My Daily Activities'
                        };

                        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

                        chart.draw(data, options);
                    }


                });
            });
        </script>
    </head>
    <body>

        <button class="btn">Plot chart!</button>
        <div id="piechart" class="piechart">Chart would be plotted here</div>

    </body>
</html>

I would appreciate any help!

You don't have an element on the page with an id of "piechart". — Tieson T., Nov 15 '14 at 17:20

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

Looking at this very briefly, I'd say the problem is with the following line:

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

You don't appear to have an element with ID piechart in your markup. Try this line instead:

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

For reference, this isn't a jQuery AJAX call, but an event handler.

EDIT: You've also (quite crucially) not loaded in the Google Charts API:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

EDIT 2: Right, I've actually had a play now, and this should do the trick: http://codepen.io/OneToughCookie/pen/WbNyVg

The problem was the use of the google.setOnLoadCallback function together with jQuery's $(document).ready function. For more info, see: google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?

The google.load function has a callback argument that can be used instead of setOnLoadCallback, as in:

google.load("visualization", "1", {packages:["corechart"], callback: drawChart});

edited May 23 '17 at 12:15

Community

1
1

answered Nov 15 '14 at 17:24

OneToughCookie

1
3

It was an error by copy and paste. In the original it's OK. I edited the question. But it doesn't work. Thanks for the explanation about event handler... – Aloysia de Argenteuil Nov 15 '14 at 17:32
@AloysiadeArgenteuil "doesn't work" is less than helpful - are you seeing errors in the JavaScript console (typically activated by hitting your F12 key on a Windows PC), or does it simply not display anything? – Tieson T. Nov 15 '14 at 17:35
Thanks for the explanation about JavaScript console: there I can see the following: Uncaught ReferenceError: google is not defined douglas2.html:11(anonymous function) douglas2.html:11m.event.dispatch jquery.min.js:3r.handle. Have no idea what I could do. I have no experience with jquery... – Aloysia de Argenteuil Nov 15 '14 at 17:38
Please see my edit above -- after looking at your code again, I noticed you haven't actually called in the Google Charts API. Let us know if this does the trick. – OneToughCookie Nov 15 '14 at 17:46
Damned! I wrote everything so fast and that's why I made this simple errors... I edited the question. But now when I click on the button, it disappears and nothing more is on the screen... no error in the console as well :( – Aloysia de Argenteuil Nov 15 '14 at 17:55

score 0 · Answer 2 · answered Nov 15 '14 at 18:19

In this case we cannot forget following parameter: "callback": drawChart after ** packages:["corechart"] ** in

google.load("visualization", "1", {packages:["corechart"]});

Here the complete code. This will do the trick:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script>

            $(document).ready(function(){
                $(".btn").click(function(){

                    google.load("visualization", "1", {packages:["corechart"], "callback": drawChart});
                    google.setOnLoadCallback(drawChart);

                    function drawChart() {

                        var data = google.visualization.arrayToDataTable([
                            ['Task', 'Hours per Day'],
                            ['Work',     11],
                            ['Eat',      2],
                            ['Commute',  2],
                            ['Watch TV', 2],
                            ['Sleep',    7]
                        ]);

                        var options = {

                            chartArea: {width:'100%',height:'100%'},

                            forceIFrame: 'false',

                            is3D: 'true',

                            pieSliceText: 'value',

                            sliceVisibilityThreshold: 1/20, // Only > 5% will be shown.

                            titlePosition: 'none'

                        };


                        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

                        chart.draw(data, options);
                    }


                });
            });
        </script>
    </head>
    <body>

        <button class="btn">Plot chart!</button>
        <div id="piechart" style="width: 900px; height: 500px;">The chart would be plotted here.</div>

    </body>
</html>

Thank you all that helped!

How to plot google chart after clicking a button using a jquery

2 Answers2