I'm trying to integrate Google Charts with Wordpress, using Advanced Custom Fields input to populate the data. After just one iteration in the Javascript, it crashes, despite proper data formatting.
From other questions I gathered google.visualization must not be loading in time since it's undefined, but the authors of those questions didn't use setOnLoadCallback. I have, which should address that. What am I misunderstanding?
functions.php:
function create_chart(){
if( have_rows('chart') ){
wp_enqueue_script( 'google-charts', 'https://www.gstatic.com/charts/loader.js' );
$chart_data = array();
while( have_rows('chart') )
array_push( $chart_data, the_row(true) );
wp_register_script( 'chart-generator', get_stylesheet_directory_uri() . '/js/chart-generator.js' );
wp_enqueue_script( 'chart-generator', true );
wp_localize_script( 'chart-generator', 'chart_data', $chart_data);
}
}
add_action( 'wp_head', 'create_chart');
chart-generator.js
(function($){
google.charts.load('current', {packages: ['corechart']});
for(i=0; i<chart_data.length; i++){
// Reencodes objects as arrays
next_chart = chart_data[i];
for(j=0; j<next_chart.entry.length; j++)
next_chart.entry[j] = Object.values( next_chart.entry[j] );
console.log(next_chart);
google.charts.setOnLoadCallback(
drawPieChart(
next_chart.title,
next_chart.id,
next_chart.colors,
next_chart.entry));
}
})(jQuery);
function drawPieChart( title, id, colors, entries) {
// Appends to beginning of array
entries.unshift( ['title', 'quantity'] );
var wrapper = new google.visualization.ChartWrapper({
chartType: 'PieChart',
dataTable: google.visualization.arrayToDataTable(entries),
options: {
'title': title,
pieHole: 0.4,
},
containerId: id
});
wrapper.draw();
}
HTML:
<div id="onechart" style="width:200px; height: 200px;"></div>
<div id="twochart" style="width:200px; height: 200px;"></div>
<div id="redchart" style="width:200px; height: 200px;"></div>
<div id="vis_div" style="width:200px; height: 200px;"></div>
<div id="burger" style="width:200px; height: 200px;"></div>