0

I have a drop down menu where it has all the months in it, once selecting a month, it will show a pie chart with delivery statuses (delivered/not delivered). I think it glitches because the past pie charts that were selected are still present being shown in the background maybe? but i'm not sure how to stop that from happening. How it glitches is that let's say I first select february, then march. when hovering over march's pie chart, it tends to switch between february and march's pie chart

This is my script

$(document).ready(function () {
            Chart.defaults.global.defaultFontSize = 18;

            $(".mon").change(function(){
                var month = $(this).val();
                $.ajax({
                    url: "data.php",
                    type: "post",
                    data: {
                    val: month
                    },
                    success: function(data){
                        $("#container").show();
                        console.log(data);
            var stat = [];
            var tots = [];

            for (var i in data) {
                stat.push(data[i].Status);
                tots.push(data[i].Total);
            }

            var chartdata = {
                labels: stat,
                datasets: [{
                    label: stat,
                    backgroundColor:[
                        "rgba(24, 255, 78, 0.7)",
                        "rgba(255, 99, 132, 0.8)"
                    ],
                    borderColor: [
                        "rgba(24, 255, 78, 2)",
                        "rgba(255, 99, 132, 2)"
                    ],
                    borderWidth: 3,
                    data: tots
                }]
            };

            var graphTarget = $("#graphCanvas");

            var barGraph = new Chart(graphTarget, {
                type: 'pie',
                data: chartdata,
                option: { 
                    responsive: true, 
                    maintainAspectRatio: false
                }
            });
}

This is my data.php:

<?php
header('Content-Type: application/json');

$conn = mysqli_connect("localhost","root","","oatdistribution");

isset($_POST["val"]) ? $val = $_POST["val"] : $val = "";

$sqlQuery = "SELECT Status, count(*) as Total FROM `".$val."` GROUP BY Status";

$result = mysqli_query($conn,$sqlQuery);

$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

mysqli_close($conn);

echo json_encode($data);
?>
Allysha April
  • 23
  • 3
  • I have not executed the code but looking at it I might suggest it is creating multiple charts in the same element. Just a suggestion. Use the browser inspector tools to see how many child elements there are in `#graphCanvas` and if new ones are getting appended every time the month value changes then that might be the reason. Good luck. – Martin Joiner May 19 '21 at 14:49

1 Answers1

0

Thank you, it was appending every time the month value changed. I just looked up on the forum for similar glitches and found the solution here: ChartJs mouse hover bug (showing previous charts)

Allysha April
  • 23
  • 3