Click here to Skip to main content
15,917,174 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am trying to get a specific div to toggle open if a certain segment from my Pie Chart is clicked but I am not sure what code is supposed to be used in this instance.

Here is the pie chart's script

```
window.onload = function () {
    
    var chart = new CanvasJS.Chart("chartContainer",
    {
      
      animationEnabled: true,
      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"

      },
      data: [{
        click: onClick,
        indexLabel: "{label} ({y} people)",
        yValueFormatString: "#,##0.\"\"",
       indexLabelFontSize: 17,
       indexLabelFontFamily: "Garamond",
       indexLabelFontColor: "black",
       indexLabelLineColor: "black",
       indexLabelPlacement: "outside",
       type: "pie",
       showInLegend: true,
       legendText: "{label}",
       dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
     }]
   });
   chart.render();
}
   
function onClick(e){
      if( e.dataPoint.dataPoints == "Delivered"){
        $("#DevJan").show();
        $("#NotDevJan").hide();
      }
      else{
        $("#DevJan").hide();
        $("#NotDevJan").show();
      }
      chart.render();
    }


The table that is being showed is only the #NotDevJan

What I have tried:

I tried changing the code to

function onClick(e){
      if( e.dataPoint.dataPoints == "Not Delivered"){
        $("#DevJan").hide();
        $("#NotDevJan").show();
      }
      else{
        $("#DevJan").hide();
        $("#NotDevJan").hide();
      }
      chart.render();
    }


To see whether to see if the if statement is a problem and confirmed that it was the problem
Posted
Updated 28-Mar-21 20:45pm
Comments
Richard MacCutchan 28-Mar-21 10:25am    
Check exactly what is returned in e.dataPoint.dataPoints.
Allysha April 28-Mar-21 10:31am    
It returns nothing, I think that is where the problem lies but I am not sure what I should put for it to read the pie chart's data. I have tried searching around but there were no examples or articles about it
RedDk 28-Mar-21 13:35pm    
SQL ... mySQL ... two different things. As in Old MacDonald's farm, many animals and no clear way to know one from another; until they make a noise.

Quote:
To see whether to see if the if statement is a problem and confirmed that it was the problem

trying random changes to see what is going on is not a solution. The only way to go is to display e and check if contain is as expected.

Your code do not behave the way you expect, or you don't understand why !

There is an almost universal solution: Run your code on debugger step by step, inspect variables.
The debugger is here to show you what your code is doing and your task is to compare with what it should do.
There is no magic in the debugger, it don't know what your code is supposed to do, it don't find bugs, it just help you to by showing you what is going on. When the code don't do what is expected, you are close to a bug.
To see what your code is doing: Just set a breakpoint and see your code performing, the debugger allow you to execute lines 1 by 1 and to inspect variables as it execute.

Debugger - Wikipedia, the free encyclopedia[^]

Mastering Debugging in Visual Studio 2010 - A Beginner's Guide[^]
Basic Debugging with Visual Studio 2010 - YouTube[^]

JavaScript Debugging[^]
Chrome DevTools  |  Web  |  Google Developers[^]

The debugger is here to only show you what your code is doing and your task is to compare with what it should do.
 
Share this answer
 
Since you're using 3rd party component, try reading their Documentation[^] & also use their Support[^] for quick response.

Got below pages(which is related to your question) from above documentation. Explore it.
Data Point Click Event - CanvasJS[^]
HTML5 & JS Pie Charts | CanvasJS[^]
 
Share this answer
 
You can try below approach to fix the issue.

That is, have "onClick" defined as ananymous method in object itself.

<pre lang="Javascript">

... above code no change
     data: [{
       click: function (e) {
                 if(e.dataPoint && e.dataPoint.dataPoints && e.dataPoint.dataPoints == "Delivered") {
                    $("#DevJan").show();
                    $("#NotDevJan").hide();
                 }
                 else {
                    $("#DevJan").hide();
                    $("#NotDevJan").show();
                 }
              },
        indexLabel: "{label} ({y} people)",
... below code no change
 
Share this answer
 
Comments
GSThakur 30-Mar-21 0:37am    
If the solution worked for you, please mark as accepted solution.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900