Smith Stanley Smith Stanley - 1 year ago 121
Javascript Question

Can not read property 'Concat' of Undefined

I am attempting to use the charts.js plug-in and do a combo chart, but I want the line to be on top of the bar. This is the syntax that I am using, and both my arrays

linedata & bardata
are populated but whenever I run this syntax I get an error of


Uncaught TypeError: Cannot read property 'concat' of undefined

at n (Chart.min.js:11)

at t.update (Chart.min.js:11)

at t.construct (Chart.min.js:11)

at new t (Chart.min.js:12)

at trends:507



This is the syntax I utulize - where is the error?

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
data: {
labels: labelsarr,
datasets: [{
type: 'line',
fill: false,
label: 'Line Example',
backgroundColor: 'rgba(255,0,0,1)',
borderColor: 'rgba(255,0,0,1)',
data: linedata

}, {
type: 'bar',
label: 'Bar Example',
backgroundColor: 'rgba(0, 129, 214, 0.8)',
data: bardata
}]
},
options: {
tooltips: {
callbacks: {
label: function (t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
}
},
plugins: [{
beforeDraw: function(chart) {
var labels = chart.data.labels;
}
}]
});


Edit

This is how the arrays are being populated - values passed from php

var ldata = <?php echo $ldata; ?>;
var values = [];
for (var i = 0; i < ldata.length; i++) {
values.push(ldata[i]);
}
var bdata = <?php echo $bdata; ?>;
var values1 = [];
for (var i = 0; i < bdata.length; i++) {
values1.push(bdata[i]);
}

Answer Source

You would have to set the chart type in the main chart option, not inside the dataset (the second one) :

var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      ...

Here is the working version of your code :

var labelsarr = ['A', 'B', 'C'];
var linedata = [2, 5, 3];
var bardata = [4, 2, 6];

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
   type: 'bar', //<-- set here
   data: {
      labels: labelsarr,
      datasets: [{
         type: 'line',
         fill: false,
         label: 'Line Example',
         backgroundColor: 'rgba(255,0,0,1)',
         borderColor: 'rgba(255,0,0,1)',
         data: linedata

      }, {
         label: 'Bar Example',
         backgroundColor: 'rgba(0, 129, 214, 0.8)',
         data: bardata
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(t, d) {
               var xLabel = d.datasets[t.datasetIndex].label;
               var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
               return xLabel + ': ' + yLabel;
            }
         }
      },
      legend: {
         display: false,
         position: 'top',
      },
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               callback: function(value, index, values) {
                  if (parseInt(value) >= 1000) {
                     return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  } else {
                     return '$' + value;
                  }
               }
            }
         }]
      }
   },
   plugins: [{
      beforeDraw: function(chart) {
         var labels = chart.data.labels;
      }
   }]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download