Накопительный график стека с использованием chart.min.js с данными MySQL - PullRequest
0 голосов
/ 13 мая 2019

Я хочу отобразить накопленный график с данными MySQL.

Я могу получить данные за конкретный месяц, но у меня нет логики, где и как применять для отображения кумулятивного графика. Вот мой код-

<?php
    $timezone = 'Asia/Manila';
    date_default_timezone_set($timezone);
     $today = date('Y-m-d');
    $year = date('Y');
    if(isset($_GET['year'])){
    $year = $_GET['year'];
  }
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="bar-chart" width="800" height="450"></canvas>
 <?php
    $conn = new mysqli('localhost', 'root', '', 'finalcms');

    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

?>
    <?php $and = 'AND YEAR(regDate) = '.$year;
  $months = array();
  $Ravalue = array();
  $noidentification = array();
  $oversize = array();
  $outofrange = array();

  for( $m = 1; $m <= 12; $m++ ) 
  {

        $sql = "SELECT * FROM tblcomplaints WHERE MONTH(regDate) = '$m'  AND status='Registered' $and";
        $oquery = $conn->query($sql);
        array_push($Ravalue , $oquery->num_rows);

        $sql = "SELECT * FROM tblcomplaints WHERE MONTH(closeddate) = '$m' AND status ='Closed' $and";
        $pquery = $conn->query($sql);
        array_push($noidentification, $pquery->num_rows);


        $sql = "SELECT * FROM tblcomplaints WHERE MONTH(underanalysisdate) = '$m' AND status ='Under Analysis' $and";
        $lquery = $conn->query($sql);
        array_push($oversize , $lquery->num_rows);

        $sql = "SELECT * FROM tblcomplaints WHERE MONTH(analysiscompleteddate) = '$m' AND status ='Analysis Completed' $and";
        $mquery = $conn->query($sql);
        array_push($outofrange, $mquery->num_rows);




    $num = str_pad( $m, 4, 0, STR_PAD_LEFT );
    $month =  date('M', mktime(0, 0, 0, $m,3));
    array_push($months, $month);

}
  $months = json_encode($months);
  $Ravalue= json_encode($Ravalue);
  $noidentification= json_encode($noidentification);
  $oversize= json_encode($oversize);
  $outofrange= json_encode($outofrange);
?>
<script>
new Chart(document.getElementById("bar-chart"), {
  type: 'bar',
  data: {
    labels: <?php echo $months; ?>,
    datasets: [{ 
        data: <?php echo $Ravalue; ?>,
        label: "Registered",
        backgroundColor: "orange",
        fill: false
      },
      { 
        data: <?php echo $oversize; ?>,

        label: "Under Process",
        backgroundColor: "yellow",
        fill: false
      },
      { 
        data: <?php echo $outofrange; ?>,

        label: "Analysis Completed",
        backgroundColor: "#05ACED",
        fill: false
      }, { 
        data: <?php echo $noidentification; ?>,
        label: "Closed",
        backgroundColor: "#5BB75B",
        fill: false
      }, 

    ]
  },
 options: {
                    title: {
                        display: true,
                        text: ''
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true,
                            gridLines : 
                             {
                             display : false
                             }  
                        }],
                        yAxes: [{
                            stacked: true,
                             gridLines : 
                             {
                             display : false
                             }  
                            }]
                    }
                }});
</script>
<script>
$(function(){
  $('#select_year').change(function(){
    window.location.href = 'dashboard.php?year='+$(this).val();
  });
});
</script>

Здесь regDate - столбец базы данных, из этого столбца я выбираю месяц для отображения на x-axis. С помощью этого я хочу отобразить кумулятивный график

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...