[![enter image description here](https://i.stack.imgur.com/VQmLY.png)](https://i.stack.imgur.com/VQmLY.png)

In the picture above you can see that I have 1 dataset and 2 different things I want to see of that same dataset.

```js
var opties = [];
function geselecteerdeOpties(){
  opties = [];
  for(var i = 0; i <= 7; i++){
    var id = "#checkbox" + i;
    if($(id).is(':checked') == 1){
      opties.push(i);
    }
  }
}

var datasetLabels = [];
function getChartData() {
  leeftijden = $("#slider").slider('getValue');
  var xmlhttp = new XMLHttpRequest();
  var leeftijd;
  if (leeftijden[0] == leeftijden[1]) {
    leeftijd = leeftijden[0];
    var url = "http://" + ip + ":8181/measurementsMasterT/getGraphData/" + String(userId) +"/" + String(experimentID) +"/" + leeftijd;
  }
  else {
    var url = "http://" + ip + ":8181/measurementsMasterT/getGraphData/" + String(userId) +"/" + String(experimentID);
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      data = JSON.parse(xmlhttp.responseText);
      geselecteerdeOpties();
      for (var i = 0; i <= 8; i++) {
        barChartData.labels.splice(-1, 1); // remove the label first
        barChartData.datasets.forEach(function(dataset, datasetIndex) {
        dataset.data.pop();
        });
      }
      theChart.update();
      console.log("datasetLabels " + datasetLabels + " leeftijd " + leeftijd);
      if (jQuery.inArray(leeftijd, datasetLabels) == -1) {
        console.log("test test test");
      }
      if (leeftijd != null && (jQuery.inArray(leeftijd, datasetLabels) == -1)) {
        console.log("wel");
        for (var i = 0; i <= barChartData.datasets.length; i++) {
          barChartData.datasets.pop();
        }
        for (var i = leeftijden[0]; i <= leeftijden[1]; i++) {
          nieuweDataSet(leeftijd);
          datasetLabels += leeftijd;
        }
      }
      for(var i = 0; i<opties.length; i++){
        switch (opties[i]) {
          case 0:
          barChartData.labels.push("Gemiddelde Afstand");
          nieuweData("Gemiddelde Afstand", data, opties[i]);
          console.log("dataset0");
          break;
          case 1:
          barChartData.labels.push("Variantie Afstand");
          nieuweData("Variantie Afstand", data, opties[i]);
          console.log("dataset1");
          break;
          case 2:
          barChartData.labels.push("Stdev Afstand");
          nieuweData("Stdev Afstand", data, opties[i]);
          console.log("dataset2");
          break;
          case 3:
          barChartData.labels.push("Stdev Snelheid");
          nieuweData("Stdev Snelheid", data, opties[i]);
          console.log("dataset3");
          break;
          case 4:
          barChartData.labels.push("Variantie Snelheid");
          nieuweData("Variantie Snelheid", data, opties[i]);
          console.log("dataset4");
          break;
          case 5:
          barChartData.labels.push("Gemiddelde SnelheidVerandering");
          nieuweData("Gemiddelde SnelheidVerandering", data, opties[i]);
          console.log("dataset5");
          break;
          case  6:
          barChartData.labels.push("Tijd in Doel");
          nieuweData("Tijd in Doel", data, opties[i]);
          console.log("dataset6");
          break;
          case 7:
          barChartData.labels.push("Keren uit Doel");
          nieuweData("Keren uit Doel", data, opties[i]);
          console.log("dataset7");
        }
      }
    }
  };
  // $.ajax({
  //   url: url,
  //
  //   dataType: "json",
  //   data: initialserverData,
  //   success: function(data, textStatus, jqXHR) {
  //     geselecteerdeOpties();
  //     console.log("getChardata opties: " + opties);
  //     for (var i = 0; i <= barChartData.datasets.length; i++) {
  //       barChartData.datasets.pop();
  //     }
  //     for(var i = 0; i<opties.length; i++){
  //       switch (opties[i]) {
  //         case 0:
  //         nieuweDataSet("Gemiddelde Afstand");
  //         console.log("dataset0");
  //         break;
  //         case 1:
  //         nieuweDataSet("Variantie Afstand");
  //         console.log("dataset1");
  //         break;
  //         case 2:
  //         nieuweDataSet("Stdev Afstand");
  //         console.log("dataset2");
  //         break;
  //         case 3:
  //         nieuweDataSet("Stdev Snelheid");
  //         console.log("dataset3");
  //         break;
  //         case 4:
  //         nieuweDataSet("Variantie Snelheid");
  //         console.log("dataset4");
  //         break;
  //         case 5:
  //         nieuweDataSet("Gemiddelde SnelheidVerandering");
  //         console.log("dataset5");
  //         break;
  //         case  6:
  //         nieuweDataSet("Tijd in Doel");
  //         console.log("dataset6");
  //         break;
  //         case 7:
  //         nieuweDataSet("Keren uit Doel");
  //         console.log("dataset7");
  //       }
  //     }
  //     nieuweData(data);
  //   }
  // });
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

var barChartData = {labels: [], datasets: []};
window.onload = loadGraph();

function reload(){
  console.log("reload");
  // theChart.destroy();
  geselecteerdeOpties();
  // $('#barChart').remove(); // this is my <canvas> element
  // $('#chart').append('<canvas id="barChart" width="100%" height="30" class="chartjs-render-monitor"></canvas>');
  loadGraph();
}
function loadGraph() {
  var ctx = document.getElementById("barChart").getContext("2d");
  theChart = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
      responsive: true,
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Data'
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }
  });
  getChartData();
};

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function nieuweDataSet(naam){
  var kleur = getRandomColor();
  var newDataset = {
    label: naam,
    backgroundColor:[kleur],
    borderColor: [kleur],
    borderWidth: 1,
    data: []
  };
  barChartData.datasets.push(newDataset);
  theChart.update();
}

function nieuweData(naam, gegevens, j) {
  //geselecteerdeOpties();
  console.log("nieuweData " + naam + "/" + j);
  console.log(barChartData.datasets.length);
  if (barChartData.datasets.length > 0) {
    console.log("naam pushed");
    //barChartData.labels.push(naam);
    for (var index = 0; index < barChartData.datasets.length; ++index) {
      //for (var i = 0; i < opties.length; i++) {
      console.log("test1");
      switch (j) {
        case 0:
          barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].gemiddleAfstand))).toFixed(4));
          theChart.update();
        break;
        case 1:
          console.log("test2");
          barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].variantieAfstand))).toFixed(4));
          theChart.update();
        break;
        case 2:
          barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].stdevAfstand))).toFixed(4));
          theChart.update();
        break;
        case 3:
          barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].stdevSnelheidVeranderingen))).toFixed(4));
          theChart.update();
        break;
        case 4:
          barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].variantieSnelheidVeranderingen))).toFixed(4));
          theChart.update();
        break;
        case 5:
          barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].snelheidVeranderingenGemiddelde))).toFixed(4));
          theChart.update();
        break;
        case  6:
          barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].tijdInHetDoel))).toFixed(4));
          theChart.update();
        break;
        case 7:
          barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].aantalKeerUitDoel))).toFixed(4));
          theChart.update();
      }
      //}
    }
    theChart.update();
    //theChart.destroy();
  }
};
```

This is the script that purely handles the chart and everything around it. The code might be a bit messy as I am trying a lot of things to find out what is wrong but to no avail.

In the function nieuweData you can see how I add data to datasets. This function gets called in a for loop. Opties stands for an array that contains the value of different checkboxes, only the checked ones. So with that I know which data the user wants to see on the chart.

The for loop calls the nieuweData functie once for every checkbox that is clicked. In that function we will take the right part out of the JSON to push into the data of all datasets (hence the for loop in nieuweData()). 

What might cause the chart to not give the second data the same color as the dataset? Btw I know that the code is messy and somethings might be weird like the jQuery.inArray() -> that didn't work properly and is still in the code