<style>
  .standardHeight{
  height:338px;
}
</style>
<div class="card card-success">
                <div class="card-header">
                  <h3 class="card-title"><strong><?php if($_GET['code'] == 'lock'){
  echo 'Solidarity and Diversity';
} else if($_GET['code'] == 'qua'){
   echo 'Dialogue and Consultation';
} else if($_GET['code'] == 'rel'){
   echo 'Personal Safety and Well Being';
} else if($_GET['code'] == 'irr'){
   echo 'Freedom of Association';
} else if($_GET['code'] == 'pre'){
   echo 'Freedom of Assembly';
} 
 else if($_GET['code'] == 'all'){
   echo 'All Incidents Affecting Civic Space';
}  else if($_GET['code'] == 'hea'){
   echo 'Freedom of Expression';
}
 ?></strong></h3>
                </div>
                <div class="card-body standardHeight" >
                  <div class="chart">
                    <canvas
                      id="barChart"
                      style="
                        min-height: 299px;
                        height: 299px;
                        max-height: 299px;
                        max-width: 100%;
                      "
                    ></canvas>
                  </div>
                </div>
               
              </div>

              <script>
                 var datas = "<?php echo $_GET['code']; ?>";
                 //alert(datas);
 var numberArray = []; // method 1
  var caseArray = []; // method 1

 $.ajax({
    url: 'returnBarArray.php?code='+datas,
    type: 'get',
    data: "{}",
    async: false,

    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success: function(response) {
      //alert(response);
      var result = response;
      //alert(1);
      //mainArray = JSON.parse(result);
      // alert(result);
      //JSON.parse($result);
      //alert(2);
      numberArray = result[0];
      caseArray = result[1];
     
    },

    error: function(xmlHttpRequest, textStatus, errorThrown) {
       //alert(errorThrown);
       //alert(textStatus);

    }
  });
  var ctx = document.getElementById("barChart").getContext("2d");

  var data = {
    labels: caseArray,
    datasets: [
 /*     {
        label: "Clash/Assault",
        backgroundColor: "#eec524",
       
        data: clashArray,
      },*/
      
      {
        label: "Incidents",
        backgroundColor: "#e71d26",
        
        data: numberArray,
      },
    ],
  };

   var myBarChart = new Chart(ctx, {
    type: "bar",
    title: "Hakunamatata",
    data: data,
    options: {
        legend: {
            display: false
         },
      responsive: true,
      display: true,

      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
            },
          },
        ],
      },
    },
  });
</script>