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:
JS code in a text widget:
var jsvar1 = ”;
var jsvar2 = ”;
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)’
],
}]
},
});
Hi Anna,
Unfortunately, we’re only really able to provide very limited assistance with this as custom coding is outside of our scope of support. With that said, I can provide some general advice based on what I can see. The provided JavaScript appears to use jsvar1 and jsvar2 as the data sources. If jsvar1 and jsvar2 are being set elsewhere, you’ll need to not set them in the text widget as that will override any previously set values.
Personally, I recommend creating a custom a custom widget that includes both the data source and the JavaScript in one central widget. This will make it much easier to manage. You can find our documentation for creating widgets here: https://siteorigin.com/docs/widgets-bundle/getting-started/creating-a-widget/
If you need some more hands-on assistance, consider hiring someone through Codeable to lend a hand.
Kind regards,
Alex