Execute a function on click

Question

I have the script below which works well, i.e. it generates a chart on the screen when the page loads:

<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChartAjax);

    function drawChartAjax() {
        $.ajax({ 
            url: 'json_data.aspx', 
            type: 'POST', 
            dataType: 'json', 
            success: function(data) { 
                drawChart(data); 
            } 
        });
    }

    function drawChart(json) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'did');
        data.addColumn('number', '09/10'); 

        data.addRows(json.length);  

        var l = json.length, i, x = 0, y = 0; 
        for(i = 0; i < l; i++) { 
            data.setValue(y, x, json[i].did); x++; 
            data.setValue(y, x, json[i].v1); x=0; 
            y++; 
        } 

        var chart = new google.visualization.BarChart( document.getElementById('chart_div') );
        chart.draw(data, {width: 300, height: 400, legend: 'bottom', title: 'title goes here'});
    }
</script>

What do I have to do to get this to load when a link is clicked?

I know I can display an alert like this:

$(document).ready(function(){
    $("a.display_chart").click(function(event){
        alert("display the chart");
        event.preventDefault();
    });
});

Reigel Gallarde · Accepted Answer · 2010-09-21 09:27:45Z

5

latest answer.

after searching what .setOnLoadCallback() does,

It turned out you just have to call the function on click

$(document).ready(function(){
    $("a.display_chart").click(function(event){
        drawChartAjax();
        event.preventDefault();
    });
});

previous answer.

move google.setOnLoadCallback(drawChartAjax); inside your click event.

like this,

$(document).ready(function(){
    $("a.display_chart").click(function(event){
        google.setOnLoadCallback(drawChartAjax); // this line should not appear anymore there at the top
        event.preventDefault();
    });
});

<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    //google.setOnLoadCallback(drawChartAjax);

    function drawChartAjax() {
        $.ajax({ 
            url: 'json_data.aspx', 
            type: 'POST', 
            dataType: 'json', 
            success: function(data) { 
                drawChart(data); 
            } 
        });
    }

    function drawChart(json) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'did');
        data.addColumn('number', '09/10'); 

        data.addRows(json.length);  

        var l = json.length, i, x = 0, y = 0; 
        for(i = 0; i < l; i++) { 
            data.setValue(y, x, json[i].did); x++; 
            data.setValue(y, x, json[i].v1); x=0; 
            y++; 
        } 

        var chart = new google.visualization.BarChart( document.getElementById('chart_div') );
        chart.draw(data, {width: 300, height: 400, legend: 'bottom', title: 'title goes here'});
    }

    $(document).ready(function(){
        $("a.display_chart").click(function(event){
            google.setOnLoadCallback(drawChartAjax); // this line should not appear anymore there at the top
            event.preventDefault();
        });
    });
</script>

edited Sep 21, 2010 at 9:27

answered Sep 21, 2010 at 9:06

Reigel Gallarde

65.5k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

oshirowanen Over a year ago

That does not seem to work. It stops the chart generating on page load, but when the link is clicked, nothing seems to happen, i.e. the chart does not display.

Reigel Gallarde Over a year ago

try moving also google.load("visualization", "1", {packages:["corechart"]}); on the click event

Dror Over a year ago

shouldn't you just call drawChartAjax() in the click event handler?

Reigel Gallarde Over a year ago

@Dror - I'm not really sure. ;) I'm not really familiar with google, I don't know what .setOnLoadCallback() does, I'm lazy to search for it. But that two line codes of google started the trigger, so just have to move it on the click event.

Reigel Gallarde Over a year ago

@Dror, @oshirowanen, see latest answer above.

Espen Herseth Halvorsen · Accepted Answer · 2010-09-21 09:20:57Z

1

Can't you just call drawChartAjax() where you in your example calls the alert?

answered Sep 21, 2010 at 9:20

Espen Herseth Halvorsen

6,3357 gold badges39 silver badges40 bronze badges

Comments

Dror · Accepted Answer · 2010-09-21 09:19:08Z

0

Try putting just the function call in the onclick:

$(document).ready(function(){
    $("a.display_chart").click(function(event){
        drawChartAjax();
        event.preventDefault();
    });
});

answered Sep 21, 2010 at 9:19

Dror

7,3133 gold badges42 silver badges44 bronze badges

Comments

bcm · Accepted Answer · 2010-09-21 09:36:03Z

$(function(){
    $("a.display_chart").click(function(e){
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChartAjax);
        e.preventDefault();
    });
});

function drawChartAjax() {
        $.ajax({ 
            url: 'json_data.aspx', 
            type: 'POST', 
            dataType: 'json', 
            success: function(data) { 
                drawChart(data); 
            } 
        });
    }

    function drawChart(json) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'did');
        data.addColumn('number', '09/10'); 

        data.addRows(json.length);  

        var l = json.length, i, x = 0, y = 0; 
        for(i = 0; i < l; i++) { 
            data.setValue(y, x, json[i].did); x++; 
            data.setValue(y, x, json[i].v1); x=0; 
            y++; 
        } 

        var chart = new google.visualization.BarChart( document.getElementById('chart_div') );
        chart.draw(data, {width: 300, height: 400, legend: 'bottom', title: 'title goes here'});
    }

Collectives™ on Stack Overflow

Execute a function on click

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related