Chartjs-Why doesn't Chart.js display my output (result of a const function)?

by

1👍

✅

There is no reason to use Codepen for hosting your sample code. SO snippets can do the same:

var myArr = [{
    "": 0,
    "Comune": "BONDENO",
    "PUNTEGGIOSCUOLA1516": 4.25,
    "Value 1": 63,
    "Value 2": 8,
    "Value 3": 17,
    "DANNO": 6,
    "Somma valori": 88 },
  { "": 1,
    "Comune": "CAVEZZO",
    "PUNTEGGIOSCUOLA1516": 3.75,
    "Value 1": 23,
    "Value 2": 2,
    "Value 3": 9,
    "DANNO": 8,
    "Somma valori": 34 }];
                         // you need to supply "labels" for each value!
var datiedu3 = {"labels": ['Somma lavori incompiuti','1','2','3','4','5','6'], 
              "datasets": [{label: 'EEE',
                         // data: myArr.map(itm=>itm['Value 1']+itm['Value 2']/itm.DANNO), 
                            data: [2,4,8,16,32,64,10], // enter any array you like!
                            backgroundColor: 'rgb(255, 99, 132)',
                            borderWidth: 1}] 
               };
function grafo2(dati, opzioni) {
  var grafoline = document.getElementById('Chartline').getContext('2d');
  new Chart(grafoline, {type: 'line',data: dati,options: opzioni});
};
// display the data used in dataset[0]:
// console.log(datiedu3.datasets[0].data)
grafo2(datiedu3)
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<div id="linechartContainer">
<canvas id="Chartline"></canvas>
</div>

I replaced your function createPlotArray() with a simple .map() method applied to your input array myArr. Yes, it actually is an Array and not a JSON string.

The chart you specify is of {type: 'line'...}, so you should not be surprised that you don’t get a bar-chart.

And, btw., I removed the []around your data array uno. In my code I did not even generate this intermediate variable but placed the generated array directly into the datiedu3 object as data-property.

Leave a comment