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?