'Chart.JS add dataset from hidden input

I'm trying to add a dataset which are stored in a hidden input in a form.

Here are the inputs, which are set using ajax , and I extract to create a table but now want to add this dataset to a chart.js

<input type="hidden" name="graphlabels" id="graphlabels" value="'Job 1 Year 1 $51,390.00','Job 1 Year 2 $91,845.00','Job 1 Year 3 $98,667.00','Job 2 Year 1 $88,886.40','Job 2 Year 2 $124,406.40','Job 2 Year 3 $136,675.20','Job 2 Promotion Year 4 $222,585.60','Job 2 Promotion Year 5 $224,688.00','Job 2 Promotion Year 6 $226,944.00','Job 2 Promotion Year 7 $229,670.40','Job 2 Promotion Year 8 $234,566.40','Job 2 Promotion Year 9 $239,664.00','Job 2 Promotion Year 10 $246,556.80','Job 2 Promotion Year 11 $250,310.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40'"></input>
<input type="hidden" name="graphdata" id="graphdata" value="51390,91845,98667,88886.4,124406.4,136675.2,222585.6,224688,226944,229670.4,234566.4,239664,246556.8,250310.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4"></input>

Then I use this function to add the dataset but it doesn't work.

function addgraphdata()
{
    var labeld= "[" + $('#graphlabels').val() + "]";
    var datad = "[" + $('#graphdata').val() + "]";
    console.log ("Labels:"+labeld);
    console.log ("Data:"+datad);
    var newDataset = {
        labels: labeld,
        data: datad
    }
    data.datasets.push(newDataset);
    console.log(newDataset);
    myPayChart.update();
};

I've toyed around with it for a while now and got nowhere does anyone have any ideas?

chart.js


Solution 1:[1]

labels must not be placed inside the dataset but one level higher, inside data. Also the hidden values must be properly converted into arrays. Note that for labels, I first remove the leading and trailing quotes , then split the string by ','.

Please take a look at your amended code below and see how it can be done.

function addgraphdata() {
  var labeld = $('#graphlabels').val().replace(/^'(.+(?='$))'$/, '$1').split('\',\'');
  var datad = $('#graphdata').val().split(',')
  var newDataset = {
    label: 'Amount',
    data: datad,
    backgroundColor: 'rgb(0, 0, 255)'
  }
  myPayChart.data.labels = labeld;
  myPayChart.data.datasets.push(newDataset);
  myPayChart.update();
};

const myPayChart = new Chart('chart', {
  type: 'bar',
  data: {
    datasets: []
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

addgraphdata();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="chart"></canvas>
<input type="hidden" name="graphlabels" id="graphlabels" value="'Job 1 Year 1 $51,390.00','Job 1 Year 2 $91,845.00','Job 1 Year 3 $98,667.00','Job 2 Year 1 $88,886.40','Job 2 Year 2 $124,406.40','Job 2 Year 3 $136,675.20','Job 2 Promotion Year 4 $222,585.60','Job 2 Promotion Year 5 $224,688.00','Job 2 Promotion Year 6 $226,944.00','Job 2 Promotion Year 7 $229,670.40','Job 2 Promotion Year 8 $234,566.40','Job 2 Promotion Year 9 $239,664.00','Job 2 Promotion Year 10 $246,556.80','Job 2 Promotion Year 11 $250,310.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40','Job 2 Promotion Year 12 $255,638.40'"></input>
<input type="hidden" name="graphdata" id="graphdata" value="51390,91845,98667,88886.4,124406.4,136675.2,222585.6,224688,226944,229670.4,234566.4,239664,246556.8,250310.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4,255638.4"></input>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 uminder

Related Questions