Chart.js dinamically populate data in Oracle Application Express

Question

Hi I am suing the library chart.js 2.7 with Oracle application express and I am facing issue with passing data array.

I set up same variable fields to store the the array for the chart, but the chart is not displayed/rendered.

note: P79_.. are item of the page (text field) containing the array from ad hoc queries.

Any suggestions? thanks in advance

here's my code

<script>


var BUDGET1 =[document.getElementById("P79_BUDGET1_AC").value]
var BUDGET2 =[document.getElementById("P79_BUDGET2_AC").value]

var ACTUAL1 =[document.getElementById("P79_ACTUAL1_AC").value]
var ACTUAL2 =[document.getElementById("P79_ACTUAL2_AC").value]

new Chart(document.getElementById("mixed-chart"), {
    type: 'bar',
    data: {
      labels: ["P01", "P02", "P03", "P04","P05", "P06", "P07", "P08", "P09", "P10", "P11", "P12"],
      datasets: [{
          label: "Plan1",
          type: "line",
          borderColor: "#c45850",
          data: BUDGET1,
          fill: false
        }, {
          label: "Plan2",
          type: "line",
          borderColor: "#3e95cd",
          data: BUDGET2,
          fill: false
        }, {
          label: "Actual1",
          type: "bar",
          backgroundColor: "#ffbb99",
          backgroundColorHover: "#ff9933",
          data: ACTUAL1,
        }, {
          label: "Actual2",
          type: "bar",
          backgroundColor: "#99ffbb",
          backgroundColorHover: "#00ff40",
          data: ACTUAL2
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Plan Trend'
      },
          tooltips: {
      callbacks: {
        // this callback is used to create the tooltip label
        label: function(tooltipItem, data) {
          // get the data label and data value to display
          // convert the data value to local string so it uses a comma seperated number
          var dataLabel = data.labels[tooltipItem.index];
          var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

          // make this isn't a multi-line label (e.g. [["label 1 - line 1, "line 2, ], [etc...]])
          if (Chart.helpers.isArray(dataLabel)) {
            // show value on first line of multiline label
            // need to clone because we are changing the value
            dataLabel = dataLabel.slice();
            dataLabel[0] += value;
          } else {
            dataLabel += value;
          }

          // return the text to display on the tooltip
          return dataLabel;
        }
      }
    },
      legend: { display: true}     
    }
});

</script>

Don't use the Salesforce `apex` tag for `oracle-apex` questions. — Tony Andrews, Apr 09 '18 at 11:51

score 0 · Answer 1 · answered Apr 07 '18 at 03:59

I do not know if these instructions to create these arrays works. Could try to use console.log in these values to check if works?

var BUDGET1 =[document.getElementById("P79_BUDGET1_AC").value]
var BUDGET2 =[document.getElementById("P79_BUDGET2_AC").value]
console.log(BUDGET1);
console.log(BUDGET2);
var ACTUAL1 =[document.getElementById("P79_ACTUAL1_AC").value]
var ACTUAL2 =[document.getElementById("P79_ACTUAL2_AC").value]
console.log(ACTUAL1);
console.log(ACTUAL2);

*You can execute this code on console. On chrome press F12, go to console.

Look at this post to see how convert a string with commas to array. Convert string with commas to array

Chart.js dinamically populate data in Oracle Application Express

1 Answers1