CODEWITHSUNDEEP
javascriptjquery
oshirowanen
oshirowanen

Reputation: 15925

Execute a function on click

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();
    });
});

Upvotes: 0

Views: 1524

Answers (4)

bcm
bcm

Reputation: 5500

$(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'});
    }

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65254

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>

Upvotes: 5

Espen Herseth Halvorsen
Espen Herseth Halvorsen

Reputation: 6265

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

Upvotes: 1

Dror
Dror

Reputation: 7305

Try putting just the function call in the onclick:

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

Upvotes: 0

Related Questions