You need to set up a data source on your server that serves up the data for
your chart. Something like this should work:
// code to access database and populate the $rowsaccepted, $rowsdeclined,
and $rowsnreview variables up here
$myData = array(
array('Customers', 'Status'),
array('Accepted', $rowsaccepted),
array('Declined', $rowsdeclined),
array('Not Reviewed', $rowsnreview)
);
echo json_encode($myData, JSON_NUMERIC_CHECK);
Rewrite your chart function like this:
function drawChart() {
$.ajax({
url: '/path/to/data/source/',
dataType: 'json',
success: function (json) {
var data = google.visualization.arrayToDataTable(json);
var options = {
width: 200,
height: 200,
backgroundColor: '#474747',
legend: 'none',
chartArea: {left: 20, top: 0, width: 250, height: 250},
colors: ['#ef8200', '#007fc2', '#41cf0f'],
fontSize: 14
};
var chart = new
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
});
}
You can then call the drawChart function whenever you want to redraw the
chart.
On Sunday, May 18, 2014 7:07:12 PM UTC-4, phi16181 wrote:
>
> I am using the following pie chart code that is being fed data from a
> query:
>
> <script type="text/javascript" src="https://www.google.com/jsapi
> "></script>
> <script type="text/javascript">
> google.load("visualization", "1", {packages:["corechart"]});
> google.setOnLoadCallback(drawChart);
> function drawChart() {
> var data = google.visualization.arrayToDataTable([
> ['Customers', 'Status'],
> ['Accepted', <?php echo $rowsaccepted ;?>],
> ['Declined', <?php echo $rowsdeclined;?>],
> ['Not Reviewed', <?php echo $rowsnreview;?>]
> ]);
>
> var options = {
> 'width':200,
> 'height':200,
> 'backgroundColor':'#474747',
> 'legend': 'none',
> 'chartArea':{left:20,top:0,width:250,height:250},
> colors: ['#ef8200', '#007fc2', '#41cf0f'],
> fontSize:14,
>
> };
>
> var chart = new
> google.visualization.PieChart(document.getElementById('piechart'));
> chart.draw(data, options);
> }
> </script>
>
>
> and the following AJAX call that updates my DB upon clicking a button;
> therefore updating the cart data, but I must refresh the page for the chart
> to refresh:
>
> <script type="text/javascript">
> $(function() {
> $(".decline").click(function(){
>
> var element = $(this);
> var del_id = element.attr("id1");
> var order_id = element.attr("data-order1");
> $.ajax({
> type: "POST",
> url: "decline.php",
> data: {id1:del_id,order_id1:order_id},
> success: function(){cache: false}
> });
> $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
> .animate({ opacity: "hide" }, "slow");
>
> });
> });
> </script>
>
> Is there any way I can add a call in my AJAX function that will refresh
> and redraw the pie chart without requiring the page to be refreshed?
>
> Thanks!
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
