<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
document.body.appendChild(canvas);

function filterData(apiData, n1, n2) {
  var dataPoints;

  for (var i = 0; i < apiData.length; i = i + 1) {
    if (apiData[i].meta.n1 == n1 && apiData[i].meta.n2 == n2) {
      dataPoints = apiData[i].data.results[0].values;
    }
  }

  return dataPoints;
}

fetch("https://cors-anywhere.herokuapp.com/http://satyrium.pl:8080/work/media-3.0-datavis-course/data.json")
  .then(function(data) {
    return data.json();
  })
  .then(function(result) {
    var women = filterData(result, "ogółem", "kobiety");
    var men = filterData(result, "ogółem", "mężczyźni");

    var labels = [];

    for (var i = 0; i < women.length; i = i + 1) {
      labels.push(women[i].year);
    }

    var womenData = [];
    var menData = [];

    for (var i = 0; i < women.length; i = i + 1) {
      womenData.push(women[i].val);
      menData.push(men[i].val);
    }

    new Chart(context, {
      type: "bar",
      data: {
        labels: labels,
        datasets: [
          {
            label: "Kobiety",
            data: womenData,
            backgroundColor: "#ff0000"
          },
          {
            label: "Mężczyźni",
            data: menData,
            backgroundColor: "#0000ff"
          }
        ]
      }
    });
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.