function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
anuj huriaanuj huria 

make the segment of pie chaet clickable in vf page

hi guys 

im using chart.js in vf page to show the opportunity on the basis of there stage
i want the different segments to be click able

 

here is my vf page

<apex:page controller="oppCharJS" >
    <head>
        <apex:includeScript value="{!URLFOR($Resource.charJs,'Chart.js-2.1.6/dist/Chart.bundle.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.charJs,'Chart.js-2.1.6/dist/Chart.bundle.min.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.charJs,'Chart.js-2.1.6/dist/Chart.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.charJs,'Chart.js-2.1.6/dist/Chart.min.js')}"/>
    </head>
    <canvas id="myChart" width="500" height="200"></canvas>
    <script>
     var arr=new Array();
     <apex:repeat value="{!label}" var="l">
         arr.push("{!l}");
     </apex:repeat>
      
     var arr1=new Array();
     <apex:repeat value="{!data}" var="l">
         arr1.push("{!l}");
     </apex:repeat>
     var arr2= new Array();
     var arr3= new Array();
     for(var i=0;i<arr.length;i++)
     {
     var w,x,y,z;  
     w=parseInt(Math.random()*255);
     x=parseInt(Math.random()*255);
     y=parseInt(Math.random()*255);
     z=Math.random();
     
     arr2.push('rgba('+w+','+x+','+y+','+z+')');
     arr3.push('rgba('+w+','+x+','+y+',1)');
     }
     var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels:arr,
            datasets: [{
                label: '# of Votes',
                data: arr1,
                backgroundColor: arr2,
                borderColor: arr3,
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
    
    </script>
    
</apex:page>
 

here is my controller

 

public class oppCharJS 
{
    
    public list<string> label{get;set;}
    public list<integer> data{get;set;}
    
    public oppCharJS()
    {
        
         label=new list<string>();
         data= new list<integer>();      
        generateData();
    }
    
    public void generateData(){
   
   
    AggregateResult[] groupedResults  = [SELECT StageName, Count(Id) cnt FROM Opportunity group by StageName];

        for (AggregateResult ar : groupedResults)  
        {
             label.add((string)ar.get('StageName'));
             data.add((integer)ar.get('cnt'));
        }
        
    }
}

and this is the output im getting right now

User-added image