[Chartjs]-Generate a bar chart using chartjs

by

1👍

✅

You’re missing data because you’re grouping wrong.

Tried to fix it, but couldn’t get it working, so I started over. Let me explain (the working snippet below).

You were pushing into dataset for each object inside your json, expect
since you’re using grouped chars, you need to group based on the labels of all your datasets, what I call dataLabel, so not the x-axis, but in in your case the Refurbrish NAGRIC & DB Semen Lab etc

Since you’re dealing with encoded JSON, lets first decode that:

var json = sampleData.data1;
for (let o in json) {
    json[o].js = JSON.parse(json[o].js).reduce((p, c) => ({ ...p, [c.cat_item]: c.ng_value}), {})
}

This loops over each item in the json array, then decode (JSON.parse()) that, and use reduce() to change the arrays of object, into an object that looks like:

{
    "ng_fy": "2019/20",
    "js": {
      "Refurbrish NAGRIC & DB Semen Lab": "10",
      "Semen Bulls Purchased": "7",
      "No. Semen doses Procured": "8",
      "No. of Sexed Embryos Procured": "9",
      "Liquid nitrogen s*m*n storage tanks procured": "11"
    }
  }

Now we can start creating the dataset ChartJS wants:

var dataLabels = Object.keys(json[0].js);
var dataset = dataLabels.map(dl => ({
    label: dl,
    data: json.map(o => o.js[dl])
}));

First, get dataLabels from the first object we have.
Then loop over those, now we just have to loop (map()) over json to get the all the datalabel‘s (from above) to get a structure like:

{
    "label": "Semen Bulls Purchased",
    "data": [
      "7",
      "15",
      "13",
      "19"
    ]
},
...

var ctx = document.getElementById("bar_chart").getContext('2d');
var sampleData = {"data1": [{"ng_fy": "2019/20", "js": "[{\"cat_item\": \"Refurbrish NAGRIC & DB Semen Lab\", \"ng_value\": \"10\"}, {\"cat_item\": \"Semen Bulls Purchased\", \"ng_value\": \"7\"}, {\"cat_item\": \"No. Semen doses Procured\", \"ng_value\": \"8\"}, {\"cat_item\": \"No. of Sexed Embryos Procured\", \"ng_value\": \"9\"}, {\"cat_item\": \"Liquid nitrogen s*m*n storage tanks procured\", \"ng_value\": \"11\"}]"}, {"ng_fy": "2020/21", "js": "[{\"cat_item\": \"Refurbrish NAGRIC & DB Semen Lab\", \"ng_value\": \"5\"}, {\"cat_item\": \"Semen Bulls Purchased\", \"ng_value\": \"15\"}, {\"cat_item\": \"No. Semen doses Procured\", \"ng_value\": \"18\"}, {\"cat_item\": \"No. of Sexed Embryos Procured\", \"ng_value\": \"7\"}, {\"cat_item\": \"Liquid nitrogen s*m*n storage tanks procured\", \"ng_value\": \"1\"}]"}, {"ng_fy": "2021/22", "js": "[{\"cat_item\": \"Refurbrish NAGRIC & DB Semen Lab\", \"ng_value\": \"10\"}, {\"cat_item\": \"Semen Bulls Purchased\", \"ng_value\": \"13\"}, {\"cat_item\": \"No. Semen doses Procured\", \"ng_value\": \"11\"}, {\"cat_item\": \"No. of Sexed Embryos Procured\", \"ng_value\": \"6\"}, {\"cat_item\": \"Liquid nitrogen s*m*n storage tanks procured\", \"ng_value\": \"14\"}]"}, {"ng_fy": "2022/23", "js": "[{\"cat_item\": \"Refurbrish NAGRIC & DB Semen Lab\", \"ng_value\": \"25\"}, {\"cat_item\": \"Semen Bulls Purchased\", \"ng_value\": \"19\"}, {\"cat_item\": \"No. Semen doses Procured\", \"ng_value\": \"17\"}, {\"cat_item\": \"No. of Sexed Embryos Procured\", \"ng_value\": \"23\"}, {\"cat_item\": \"Liquid nitrogen s*m*n storage tanks procured\", \"ng_value\": \"16\"}]"} ] }

var json = sampleData.data1;
for (let o in json) {
    json[o].js = JSON.parse(json[o].js).reduce((p, c) => ({ ...p, [c.cat_item]: c.ng_value}), {})
}

var labels = json.map(j => j.ng_fy);
var dataLabels = Object.keys(json[0].js);
var dataset = dataLabels.map(dl => ({
    label: dl,
    data: json.map(o => o.js[dl])
}));

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
      datasets: dataset
    },
});
#bar_chart {
  width: 100%;
  height: 600px
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <canvas id="bar_chart"></canvas>
    </div>
  </div>
</div>

Leave a comment