I want to know if it's possible to do the following:

When I click on a command button I hide/dispaly a chart just below it. I wrote the toggling in JavaScript code but the chart is not displaying.

Here is my Apex code for the function that generate the data of the chart:

public PageReference PIDgraph() {
    Data =  new List<Map<Object,Object>>();
    Competence__c [] comps;
    maxim ='4';
    comps = [select id,Poste__c,Poste__r.name, Name,Objectif__c,Niveau__c,Niveau_Prevue__c, Niveau_bilan__c from Competence__c ];   

    //creates a map of labels and values
    for(Competence__c c : comps){
        if(c.Niveau_bilan__c == null){
            c.Niveau_bilan__c =0;  
        if(c.Poste__r.name == 'PM'){
            maxim ='5';
        String fieldLabel = c.Name;
        String fieldValue = String.valueOf(c.Niveau__c);
        String fieldPrevue = String.valueOf(c.Niveau_Prevue__c);
        String objValue = String.valueOf(c.Objectif__c);
        String bilanValue = String.valueOf(c.Niveau_bilan__c);
        Map<Object, Object> m = new Map<Object,Object>();
        m.put('field', fieldLabel);
        m.put('value', fieldValue);
        m.put('prevue', fieldPrevue);
        m.put('objectif', objValue);
        m.put('Bilan',bilanValue );
        m.put('idd', c.Id);

    return null;

Here is the Visualforce code for the chart and the columns:

<apex:column breakbefore="true" colspan="5" onmouseover="affiche(this);" id="chart" > 
    <div id="{!sr}" style="display:none;">
        <apex:chart name="myChart" height="400" width="950" legend="false" data="{!data}"  >  
            <apex:legend position="bottom" />
            <apex:axis type="Radial" position="radial" minimum="0" maximum="{!maxim}">
                <apex:chartLabel display="insideEnd" font="5px Helvetica, sans-serif" minMargin="100"/> 
            <apex:radarSeries xField="field" yField="value" tips="true" opacity="0.4" markerType="cross" strokeWidth="2" id="idd" title="Validé Manager">
            <apex:chartLabel display="none"/>
            <apex:chartTips rendererFn="rendmnt"/>
                <apex:radarSeries xField="field" yField="prevue" tips="true" opacity="0.3" markerType="cross" strokeWidth="2" title="Prevue">
                <apex:chartLabel display="none"/>
                <apex:chartTips rendererFn="rendmnt"/>
            <apex:radarSeries xField="field" yField="objectif" tips="true" opacity="0.3" markerType="cross" strokeWidth="2" title="Objectif">
                <apex:chartLabel display="none"/>
                <apex:chartTips rendererFn="rendmnt"/>

When I click on the commandButton

<apex:commandButton value="Voir Graph" action="{!PIDgraph}"  onclick="afficher('{!sr}')"  reRender="chart">
    <apex:param name="Posteid" value="{!item.id}" assignTo="{!postid}"/>

the div with the appropriate ID <div id="{!sr}" style="display:none;"> appears but the the chart does not.


Apex:Chart doesn't support to be rendered in apex:repeat, apex:dataTable and apex:pageBlockTable.


Check this Issue.

Known Issues · No Fix

Chart component renders to incorrect container when used in pageBlockTable or repeat. https://success.salesforce.com/issues_view?id=a1p30000000T2AUAA0


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.