Pie Chart not showing in if else

[Aapril@98]

Here are my piece of code

I am having problems to show each pie chart as I use my slider to select each month. The january data works but when i click next for febuary the pie chart still shows january’s data

[Aapril@98]

https://jsfiddle.net/y9bkz0fv/2/

[Manoj Mohan]

@aapril98,

There are couple of issues in the JSFiddle that you have shared

1. You are passing label2 and y2 instead of label and y in dataPoins2 array. Please replace $dataPoints2[] = array("label2"=>$row['Status'], "y2"=>$row['Total']); with $dataPoints2[] = array("label"=>$row['Status'], "y"=>$row['Total']);

2. In the JSFiddle shared above, you have used multiple window.onload event handler where as there can be only one window.onload event handler in a page. You need to move all slider related functions and chart related code (initialize/updating chart options) inside the window.onload event handler. Also, instead of creating chart on switching the slider every time, you can create the chart instance once and update chart options/data based on slider index. Please take a look at the code snippet below for the same.

window.onload = function() {
  var dataPoints1 = <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>, 
      dataPoints2 = <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>;

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    legend:{
      verticalAlign: "bottom",
      horizontalAlign: "center"
    },
    data: [{
      indexLabel: "{label} ({y} people)",
      yValueFormatString: "#,##0.\"\"",
      indexLabelFontSize: 17,
      indexLabelFontFamily: "Garamond",
      indexLabelFontColor: "black",
      indexLabelLineColor: "black",
      indexLabelPlacement: "outside",
      type: "pie",
      showInLegend: true,
      legendText: "{label}",
      dataPoints: dataPoints1
    }]
  });
  chart.render();

  var slideIndex = 1;
  showSlides(slideIndex);

  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {slideIndex = 1}    
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";

    if(slideIndex == 1) {
      chart.options.dataPoints = dataPoints1;
    } else {
      chart.options.dataPoints = dataPoints2;
    }
    chart.render();

  }
}

Please refer to this StackOverflow thread for more information on adding multiple functions to the window.onload event handler.

If you are still facing issue, kindly create sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with sample data so that we can run it locally at our end to understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS