[Resolved] Unable to plot data in chart after passing variable through php

[Author]

Posts

[mikeS-30]

I am trying to: I am trying to take data that lives in a custom field on a custom post and use that data to plot a chart. I found documentation on your support page but the topic was closed and the solution doesn't work for me. The custom fields are in place with data populated. I've created a "View" to display the data which is working fine. I then need to bring the data into javascript via the Layout CSS & Javascript editor so I can plot my chart. I define a dataset variable using "document.getElementById" to pull in the value from the view. Unfortunately, the variable is not working in the dataset although I did add console.log and it is displaying the data properly in the console.

Link to a page where the issue can be seen: hidden link

I expected to see: I expect to see "10" plotted on the chart for January.

Instead, I got: No data has been plot.

My HTML that displays the view data is as follows:

<div id="jansales">
[types field='january-sales' output='raw'][/types]</div>

My javascript for the chart is as follows:

/*Layouts js goes here*/

var jantotal = document.getElementById('jansales').innerHTML;

console.log(jantotal);

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        datasets: [{
            label: 'Monthly Sales',
            data: [jantotal],
            backgroundColor: [
                'rgba(0, 47, 109, .7)',
                'rgba(137, 141, 141, .7)',
                'rgba(0, 47, 109, .7)',
                'rgba(137, 141, 141, .7)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
suggestedMax: "[types field='quota'][/types]"
                }
            }]
        }
    }
});

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

First of all - After checking to debug information you shared with us, I found that you are using outdated Toolset plugins. We always recommend running your site with latest stable release plugin version.

*** Please make a FULL BACKUP of your database and website.***
Could you please update ALL Toolset plugins to it's latest official released version. You can download the latest Toolset plugin release from your accounts page:
=> https://toolset.com/account/downloads/

In addition to that, I also see that you are using outdated WordPress version. Please update WordPress to it's latest version 5.1.1.

Once you update Toolset and WordPress to the latest version, please share access details so I can check how you setup your view and it's associated content.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Can you please check now.

I've created the following view:
=> hidden link

And added the following JS to the view's Loop Editor JS box:

jQuery(document).ready(function(){
   var chartobj = new Chart(document.getElementById("myChart"), {
    type: 'bar',
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      datasets: [
        {
          label: "Monthly Sales",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [10,20,30,40,50,60,70,80,90,100,110,120],
        }
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Predicted world population (millions) in 2050'
      }
    }
});
   x = jQuery('#chartdata').html()
  chartobj.data.datasets[0].data = x.split(",").map(Number);
  chartobj.update();
  
});

I can see now chart is plotted with the values inputted in backend:
=> hidden link

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Can you please confirm that solution I shared works for you and help you to resolve your issue.

[mikeS-30]

My issue is resolved now. Thank you!