0

I want to create a Google graph in Wordpress, using data that I collect from Google Datastore with a Wordpress plugin (i.e. with PHP). I have followed this, but getting the code to work in Wordpress requires a little more. I have a Javascript file, and a PHP file (the Wordpress plugin, where I want the graph to be displayed).

Javascript is working and Ajax works when sending data from Javascript to PHP, so I have at least made the necessary adjustments in Wordpress for this basic functionality. But I need to get the data from PHP to the Javascript functions for drawing the graph, which isn't working. (The Ajax error function gets called.)

javascript.js

createGraph();

function createGraph() {
    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(drawGraph);
}

function drawGraph() {
    jQuery(document).ready(function($) {
    var jsonData = null;
    var json = jQuery.ajax({
        url: ajax_object.ajax_url,
        data: {
        'action': 'ajax_request'
        },
        dataType:"json",
        async: false,
        success:function(data) {
            console.log(data);
            jsonData = data;
            var data = new google.visualization.DataTable(jsonData);        

            // Instantiate and draw our chart, passing in some options.
            var options = {
                hAxis: {
                    title: 'Time',
                    logScale: true
                },
                vAxis: {
                    title: 'Popularity',
                    logScale: false
                },
                colors: ['#a52714', '#097138']
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        },
        error: function(errorThrown){
            console.log(data);
        }
    });
    }).responseText;
}

plugin.php

...

// Getting jQuery/Javascript/Ajax to work
function my_enqueue() {
   // Only works on specific page
   if(is_page (151)) {
      wp_enqueue_script('javascript', plugins_url() . '/embed_cloud_datastore/js/javascript.js', array('jquery'), '1.0.0', true);

      // We can define the AJAX url with using wp_localize_script
      wp_localize_script( 'javascript', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
   }
}
add_action('wp_enqueue_scripts', 'my_enqueue');
add_action( 'wp_ajax_ajax_request', 'ajax_request' );

function ajax_request() {

$table = array();
$table['cols'] = array(
    /* define your DataTable columns here
     * each column gets its own array
     * syntax of the arrays is:
     * label => column label
     * type => data type of column (string, number, date, datetime, boolean)
     */
    // I assumed your first column is a "string" type
    // and your second column is a "number" type
    // but you can change them if they are not
    array('label' => 'Date', 'type' => 'string'),
    array('label' => 'Variable', 'type' => 'number')
);

$rows = array();
$temp = array();
// each column needs to have data inserted via the $temp array
$temp[] = array('v' => "2019-08-26");
$temp[] = array('v' => (int) 3); 
$temp[] = array('v' => "2019-08-24");
$temp[] = array('v' => (int) 5); 
// insert the temp array into $rows
$rows[] = array('c' => $temp);


// populate the table with rows of data
$table['rows'] = $rows;

// encode the table as JSON
$jsonTable = json_encode($table);
echo $jsonTable;

// To return to the front page, always finish after echoing the desired content.
wp_die();
}

This test function works, i.e. sending from Javascript to PHP.

function testAjax() {
    jQuery(document).ready(function($) {
    //We'll pass this variable to the PHP function example_ajax_request
    var car = 'BMW';
    // This does the ajax request
    jQuery.ajax({
    url: ajax_object.ajax_url,
    data: {
        'action':'ajax_request',
        'car' : car
    },
    success:function(data) {
        // The OutPut after successfully receiving content
        console.log(data);
        window.alert("Working test function!");
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
    });
});
}

I am new to Ajax and I guess there is something in that code which is the problem. I seem to need the data: {'action': 'ajax-request'} for Wordpress, but this is for sending data if I have understood correctly. So where to put this when retrieving data?

9
  • That ajax request is asynchronous, you need to move all the chart code that uses jsonData inside the success callback. Commented Aug 28, 2019 at 10:33
  • Possible duplicate of How do I return the response from an asynchronous call? Commented Aug 28, 2019 at 10:33
  • Ah, will edit this. Although it doesn't solve my problem, as the error function is called. Commented Aug 28, 2019 at 11:20
  • Ok, to the test function works, as in, the success callback is called? But the real one doesn't work and error is called? Do you see an error message in the console? If you change the error callback to function(xhr, textStatus, textError) { console.log(textError); } what do you get? Commented Aug 28, 2019 at 13:06
  • 1
    Ok, so that sounds like there's an error in your PHP code that causes more than just JSON to get sent back. Try removing dataType: "json" from the request and simply console.log() the reply to narrow down the error. Commented Aug 28, 2019 at 13:26

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.