<style>
  .standardHeight{
  height:338px;
}
</style>
<?php
$geo = $_GET['geography'];
$st = "";
if($geo == 'hea'){
$st = 'Freedom of Expression';
} else if($geo == 'irr') {
$st = 'Freedom of Association';
} else if($geo == 'pre') {
$st = 'Freedom of Assembly';
} else if($geo == 'lock') {
$st = 'Solidarity and Diversity';
} else if($geo == 'qua') {
$st = 'Dialogue and Consultation';
} else if($geo == 'rel') {
$st = 'Personal Safety and Well Being';
} 
?>
<div class="card card-success">
                <div class="card-header">
                  
                  <h3 class="card-title" style="display:inline-block;"><strong>Violent/Non Violent Incidents<?php if($geo != 'all'){
                    echo ' - '.$st;
                  }?></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 violent = [];
  var nonViolent = [];

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

    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success: function(response) {
      var result = response;
     
      violent = result[0];   
      nonViolent = result[1];   
      
    },

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

    }
  });
var barChartData = {
    labels: ['October22','November22','December22','January23','February23','March23'],
    datasets: [{
        label: 'Violent',
        backgroundColor: "#B20909",
        data:violent
    }, {
        label: 'Non Violent',
        backgroundColor: "#03771E",
        data: nonViolent
    }]

};

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>
