<style>
  .standardHeight{
  height:338px;
}
</style>
<?php
$geo = $_GET['geography'];
if($_GET['geography'] == '1'){
   $province = 'Province 1';
} else if($_GET['geography'] == '2'){
   $province = 'Province 2';
} else if($_GET['geography'] == '3'){
   $province = 'Bagmati';
} else if($_GET['geography'] == '4'){
   $province = 'Gandaki';
} else if($_GET['geography'] == '5'){
   $province = 'Province 5';
} else if($_GET['geography'] == '6'){
   $province = 'Karnali';
} else if ($_GET['geography'] == '7'){
   $province = 'Sudur Paschim';
}
?>
<div class="card card-success">
                <div class="card-header">
                  
                  <h3 class="card-title" style="display:inline-block;"><strong>Suicide Cases in Nepal<?php if($geo != 'all'){
                    echo ' - '.$province;
                  }?></strong>
                   
                </h3>
                
                </div>
                <div class="card-body standardHeight">
                  <canvas
                    id="pieChart"
                    style="
                      min-height: 299px;
                      height: 299px;
                      max-height: 299px;
                      max-width: 100%;
                    "
                  ></canvas>
                </div>
              
</div>

              <script>
                 /*
  //line for suicide
  var ctx = document.getElementById("pieChart").getContext("2d");

  var myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: [     
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
         "August",
        "September",
        "October",
        "November",
        "December",
      ],
      datasets: [
        {
          label: "Suicide Cases", // Name the series
          data: caseArray, // Specify the data values array
          fill: false,
          borderColor:  "rgb(252, 178, 22)",
          backgroundColor: "rgb(252, 178, 22)", // Add custom color background (Points and Fill)
          borderWidth: 2, // Specify bar border width
        }
      ],
    },
  });*/
</script>
<script>
  var datas = "<?php echo $_GET['geography']; ?>";
                // alert(datas+"hey");
   // method 1
  var caseArrayMale = [];
  var caseArrayFemale = [];
  var caseArrayOthers = []; 
  var arrayMonth = [];

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

    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success: function(response) {
      var result = response;
      arrayMonth = result[0];   
      caseArrayMale = result[1];   
      caseArrayFemale = result[2];   
      caseArrayOthers = result[3];
      caseTotal = result[4];     
    },

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

    }
  });
var barChartData = {
    labels: arrayMonth,
    datasets: [{
        label: 'Male',
        backgroundColor: "#2EA88B",
        data:caseArrayMale
    }, {
        label: 'Female',
        backgroundColor: "#4CAF50",
        data: caseArrayFemale
    }, {
        label: 'Others',
        backgroundColor: "rgba(82,154,190,1)",
        data: caseArrayOthers
    }, {
        label: 'Total',
        backgroundColor: "#a9c8ec",
        data: caseTotal
    }]

};

var ctx = document.getElementById("pieChart").getContext("2d");
var myBar = new Chart(ctx, {
    type: 'line',
    data: barChartData,
    options: {
        title: {
            display: true,
            /*text: "Suicide Data"*/
        },
        /*tooltips: {
            mode: 'label',
        callbacks: {
                label: function(tooltipItem, data) {
                    var corporation = data.datasets[tooltipItem.datasetIndex].label;
                    var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    var total = 0;
                    for (var i = 0; i < data.datasets.length; i++)
                        total += data.datasets[i].data[tooltipItem.index];
                    if (tooltipItem.datasetIndex != data.datasets.length - 1) {
                        return corporation + " : " + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '1,');
                    } else {
                        return [corporation + " : " + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '1,'), "Total : " + Math.trunc(total)];
                    }
                }
            }
        },*/
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});
</script>