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.

1 Answer 1


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


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .