<style>
  .standardHeight{
  height:338px;
}
</style>

<?php 
$province = 'Province';
if($_GET['value'] == '1'){
   $province = 'Province 1';
} else if($_GET['value'] == '2'){
   $province = 'Province 2';
} else if($_GET['value'] == '3'){
   $province = 'Bagmati';
} else if($_GET['value'] == '4'){
   $province = 'Gandaki';
} else if($_GET['value'] == '5'){
   $province = 'Province 5';
} else if($_GET['value'] == '6'){
   $province = 'Karnali';
} else if ($_GET['value'] == '7'){
   $province = 'Sudur Paschim';
}
 ?>

<div class="card card-success">
                <div class="card-header">
                  <h3 class="card-title"><strong><?php if($_GET['code'] == 'lock'){
  echo 'Solidarity and Diversity - '.$province;
} else if($_GET['code'] == 'qua'){
   echo 'Dialogue and Consultation -'.$province;
} else if($_GET['code'] == 'rel'){
   echo 'Personal Safety and Well Being-'.$province;
} else if($_GET['code'] == 'irr'){
   echo 'Freedom of Association-'.$province;
} else if($_GET['code'] == 'pre'){
   echo 'Freedom of Assembly-'.$province;
} 
 else if($_GET['code'] == 'all'){
   echo 'All Incidents affecting Civic Space-'.$province;
}  else if($_GET['code'] == 'hea'){
   echo 'Freedom of Expression-'.$province;
}
 ?></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']; ?>";
                 var value = "<?php echo $_GET['value']; ?>";
                // alert(province);
                 //alert(datas)
 var numberArray = []; // method 1
  var caseArray = []; // method 1

 $.ajax({
    url: 'returnBarArrayProvinceWise.php?code='+datas+'&value='+value,
    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>
