Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to load Google charts through a jQuery ajax call

    I am trying to write a poll function that loads the results and displays it in the same page without refreshing. I am using google charts api and jquery ajax.

    main page I have this:

    Code:
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1.0', {'packages':['corechart']}); 
        google.setOnLoadCallback(function(){  $("#poll_yes").removeAttr('disabled'); });
        function drawChart(rows) 
        {
            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Answers');
            data.addColumn('number', 'Number');
            data.addRows(rows);
    
            // Set chart options
            var options = 
            {
                'title'             :'Do you Like my poll?',
            };
    
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);              
        }       
    
        jQuery(document).ready(function() {
            $.ajaxSetup ({  
                cache: false  
            }); 
            var ajax_load = "<img src='images/loading.gif' alt='loading...' />";  
    
            $("#poll_yes").click(function(){
                $("#result").html(ajax_load); 
                $.post(
                    "query.php",  
                    {answer: "yes", poll_id: 5},  
                    function(response){ 
                        drawChart(response);
                    }
                );
            });                 
        }); 
    </script>
    <input type="submit" value="yes" disabled="disabled" id="poll_yes"/>
    <div id="result"><div id="chart_div">&nbsp;</div></div>
    At the momemnt in my query.php page I just have it spitting out fake JSON data:

    Code:
    <?php 
    if(isset($_POST['answer']))
    {
        echo "{\"yes\": 14,\"no\": 9}";
    }
    else
    {
        echo "{\"yes\": 9,\"no\": 14}";
    }
    ?>
    After I hit the 'yes' button all it does is show the ajaxloader.gif image.

    I'm feeling very frustrated and cannot for the life of me figure out why this is happening. Any help is appreciated =)

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    If I run your code in Firebug it throws an error on this line:

    Code:
    data.addRows(rows)
    because addRows is expecting a number or an array.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •