0

Now, i'm currently using google visualisation charts to draw out the data from my database. I have a dropdown box for users to select the year and I want to change the chart data based on the year WITHOUT refreshing the whole page.

I'm not really clear on exactly how to make use of ajax do redraw the chart from the option the user select.

<script>
$(document).ready(function()
    {
        var txt = $(this).val();
        $.ajax({
           url:"index.php",
           method:"post",
           data:{search:txt},
           dataType:"text",
           success:function(data)
           {
               $('#result').html(data);
           }
        });

        $('#year').onchange(function()
        {
            var txt=$(this).val();

            $.ajax({
                url:"index.php",
                method:"post",
                data:{search:txt},
           dataType:"text",
           success:function(data)
           {
               $('#result').html(data);
           }
           });
        });
    });
</script>

I am using a session variable to store the value of what the user select - 

<form method="post">
   <?php
   if (isset($_POST['year']))
            {              
            $_SESSION['year'] = $_POST['test'];              
            }
   ?>
Sean
  • 63
  • 1
  • 8
  • This should get you going: https://jsfiddle.net/t05h36ox/2/ otherwise please describe better where you are stuck. – surfmuggle Jun 19 '16 at 08:45
  • Hi surfmuggle, I am stuck because the data which i want to display on a chart is from mysql database. So I would need to incorporate PHP to get my data from the database. Hence, from what I researched, I should use ajax to do so without refreshing the whole page. I'm stuck because I can't seem to activate the ajax portion of my codes as shown above. – Sean Jun 19 '16 at 08:59
  • To learn how to use ajax with php you can find hints [jQuery Ajax POST example with PHP](http://stackoverflow.com/questions/5004233/) or [beginners-guide-to-ajax-development-with-php](http://blog.teamtreehouse.com/beginners-guide-to-ajax-development-with-php) – surfmuggle Jun 19 '16 at 09:10
  • Thanks surfmuggle! :) another difficulty i face is after the ajax and php calling portion, i have to redraw my chart again. its quite easy with hardcoded values but it is not versatile. Do you mind guiding me about that area? Thankss! – Sean Jun 19 '16 at 09:19
  • You wrote `I can't seem to activate the ajax portion of my codes as shown above` what happens after `$('#year').onchange(...` was fired? Use [ajax error](http://api.jquery.com/jquery.ajax/) and log the message to the console. Also describe what is not working. To redraw the chart your chart must be given data and must be recalled `chart.draw(data, options);` The data from your ajax request is most likely not in the correct format. Without more details this is fishing in the dark. – surfmuggle Jun 19 '16 at 13:13

0 Answers0