I'm trying to build a js chart with the bar values gotten with a plugin API in WordPress with SiteOrigin Page Builder and Vantage theme.
I have placed a PHP snippet widget with a small PHP code to get the information with the plugin API. The PHP snippet is added to WordPress via "XYZ PHP Code" plugin.
In another text widget I've placed the js code for the bar chart where I'm trying to pass the PHP vars to feed a dataset for the bar values. The problem is that I cannot manage to pass the PHP vars to the js vars between widgets. The PHP code echoes the proper values of and I see the bar with value 5 (hardcoded value to confirm that the chart is up), but the bars feed with the values from PHP to js are null.
Is there a proper way to pass the PHP vars to the js vars?
PHP code in the snippet widget:
<?php
$foo1 = pluginAPI($bar1);
$foo2 = pluginAPI($bar2);
echo $foo1;
echo $foo2;
?>
JS code in a text widget:
<canvas id="myChart"></canvas>
<script>
var jsvar1 = '<?php echo $foo1; ?>';
var jsvar2 = '<?php echo $foo2; ?>';
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["a","b","c"],
datasets: [{
label: 'foobar',
data: [jsvar1,jsvar2,5],
backgroundColor: [
'rgba(54, 162, 235, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(54, 162, 235, 0.8)'
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(54, 162, 235, 1)',
'rgba(54, 162, 235, 1)'
],
}]
},
});
</script>