BTW I can also use* setRefreshInterval* instead of the AJAX call if
someone could show me how to use it!
On Monday, May 26, 2014 8:07:08 PM UTC-4, phi16181 wrote:
>
> Ok thanks for the input; here is what I have so far:
>
>
> *I am trying to use the following AJAX call to update a google chart when
> a user clicks on a button:*
>
> function drawChart() {
> $.ajax({
> url: 'includes/cust_view_det/customer_view_det_chartsql.php',
> 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);
> }
> });
> }
> $("#update").click(drawChart);
>
> *Here is the file that feeds the AJAX URL:*
>
> $result_accept = "SELECT * FROM mgap_orders WHERE mgap_accept = 1 AND
> account_manager_id = '" . $_SESSION['account_manager_id'] . "' ";
> $stmtacc = $pdo->prepare($result_accept);
> $stmtacc->execute();
> $rowsaccepted = $stmtacc->rowCount();
>
> $result_decline = "SELECT * FROM mgap_orders WHERE mgap_decline = 2
> AND account_manager_id = '" . $_SESSION['account_manager_id'] . "' ";
> $stmtdec = $pdo->prepare($result_decline);
> $stmtdec->execute();
> $rowsdeclined = $stmtdec->rowCount();
>
> $result_nreview = "SELECT * FROM mgap_orders WHERE mgap_nr = 3 AND
> account_manager_id = '" . $_SESSION['account_manager_id'] . "' ";
> $stmtnr = $pdo->prepare($result_nreview);
> $stmtnr->execute();
> $rowsnreview = $stmtnr->rowCount();
>
> $myData = array(
> array('Customers', 'Status'),
> array('Accepted', $rowsaccepted),
> array('Declined', $rowsdeclined),
> array('Not Reviewed', $rowsnreview)
> );
> echo json_encode($myData, JSON_NUMERIC_CHECK);
>
> *and here is the button:*
>
> <button type="button" id="update">Update Chart</button>
>
> The chart updates just as it should if the page is refreshed, but I cannot
> single out the issue with my AJAX call to make it work when the button is
> clicked.
>
>
> Any help is appreciated.
>
>
>
> On Sunday, May 18, 2014 9:56:53 PM UTC-4, Andrew Gallant wrote:
>>
>> 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.
