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
rich1115rich1115 

Chart disappears after rerender

I have a commandButton to reprocess a set of filters and on clicking Go, the page redraws the charts and tables. When the page first loads I process and display the charts on the page with no problem. When I click Go, all the charts and tables display except the bar chart.

 

I get this error in my browser console:

Visualforce Chart: Error loading configuration for chart 'jid0jid29jid55jid56jid57jid64': Did not find required field 'ftRev,tgtRev' in data for chart 'jid0jid29jid55jid56jid57jid64'. Make sure field was queried and/or provided and has a value.

 

 

Here are extracts from the page code:

...

<apex:commandButton action="{!updatePage}" value="Go" id="theButtonCM"/>

...

<apex:outputPanel id="barchart">
<apex:pageBlock >
<apex:pageBlockTable value="{!perfSummList}" var="d" align="center">
<apex:column value="{!d.ftRev}" headerValue="FT"/>
<apex:column value="{!d.tgtRev}" headerValue="tgt"/>
<apex:column value="{!d.monthYYYYMM}" headerValue="mth"/>
<apex:column value="{!d.monthStr}" headerValue="mth"/>
</apex:pageBlockTable>
<b>ft revenue vs target</b><br/>
<apex:chart data="{!perfSummList}" height="300" width="500">
<apex:legend position="bottom" spacing="10" padding="2" font="10px Helvetica"/>
<apex:axis type="Category" position="bottom" fields="monthStr">
<apex:chartLabel />
</apex:axis>
<apex:axis type="Numeric" position="left" fields="tgtRev,ftRev" minimum="0" >
<apex:chartLabel />
</apex:axis>
<apex:barSeries axis="left" orientation="vertical" xField="monthStr" yField="ftRev,tgtRev" title="F+T,Target">
<apex:chartLabel />
</apex:barSeries>
</apex:chart>
</apex:pageBlock>
</apex:outputPanel>

 

The data in the table is from the same list and shows up just fine - the fields reported have values as surely the table would show if they did not. Something is going on under the hood for the charts and I can find out the issue here.

 

Any ideas?

 

 

Best Answer chosen by Admin (Salesforce Developers) 
cwall_sfdccwall_sfdc

You've found a bug!  The source was helpful.

 

As a workaround, please remove your barSeries's <apex:chartLabel /> element.  Currently VF charting doesn't support labels on barSeries having >1 bar (data point).  Notice on initial render that the data value is not displayed along w/ the bar.  On re-render, charting doesn't handle multiple yFields well.

 

If you feel strongly that this needs to be fixed soon, please create a support case.

 

Thanks again for uncovering.

All Answers

cwall_sfdccwall_sfdc

To help debug, output the chart's data to the page.  Eg, place the following w/ the re-rended element.  On re-render, you should see updated data.  Make sure that is expected.

 

<br/>Data&colon;<br/>{!perfSummList}

 

Also, use Firebug or similar to review the re-rendered response.  The postback response should contain a load() call having the updated data.  Make sure that's present and the referenced fields exist.

 

PS: In your code snippet, I don't see that commandButton.reRender is defined.
rich1115rich1115

Thanks, but no solution yet. I put in a rerender but no effect - I assumed that without it it just refreshes the whole page, which is what I want anway.

 

This is the output, but no chart is displayed.

Data&colon;
[perfSummObj:[ftRev=100000.0, monthStr=Jan, tgtRev=120000.0], perfSummObj:[ftRev=100000.0, monthStr=Feb, tgtRev=120000.0], perfSummObj:[ftRev=100000.0, monthStr=Mar, tgtRev=120000.0], perfSummObj:[ftRev=100000.0, monthStr=Apr, tgtRev=120000.0], perfSummObj:[ftRev=100000.0, monthStr=May, tgtRev=120000.0], perfSummObj:[ftRev=100000.0, monthStr=Jun, tgtRev=120000.0], perfSummObj:[ftRev=100000.0, monthStr=Jul, tgtRev=120000.0], perfSummObj:[ftRev=100000.0, monthStr=Aug, tgtRev=120000.0], perfSummObj:[ftRev=100000.0, monthStr=Sep, tgtRev=120000.0], perfSummObj:[ftRev=100000.0, monthStr=Oct, tgtRev=120000.0], perfSummObj:[ftRev=100000.0, monthStr=Nov, tgtRev=120000.0], perfSummObj:[ftRev=100000.0, monthStr=Dec, tgtRev=120000.0]]

I checked the console for the 'load()' output. I found this...

SfdcApp.Visualforce.chart.VFChartMgrInst.load(
{
    "cid": "jid0summFormjid3jid4jid7",
    "animate": true,
    "height": "300",
    "renderTo": "j_id0:summForm:j_id3:j_id4:j_id7",
    "theme": "Salesforce",
    "width": "500",
    "data": {
        "ns": "",
        "eval": false,
        "value": [
            {
                "ftRev": 100000,
                "monthStr": "Jan",
                "tgtRev": 120000
            },
            {
                "ftRev": 100000,
                "monthStr": "Feb",
                "tgtRev": 120000
            },
            {
                "ftRev": 100000,
                "monthStr": "Mar",
                "tgtRev": 120000
            },
            {
                "ftRev": 100000,
                "monthStr": "Apr",
                "tgtRev": 120000
            },
            {
                "ftRev": 100000,
                "monthStr": "May",
                "tgtRev": 120000
            },
            {
                "ftRev": 100000,
                "monthStr": "Jun",
                "tgtRev": 120000
            },
            {
                "ftRev": 100000,
                "monthStr": "Jul",
                "tgtRev": 120000
            },
            {
                "ftRev": 100000,
                "monthStr": "Aug",
                "tgtRev": 120000
            },
            {
                "ftRev": 100000,
                "monthStr": "Sep",
                "tgtRev": 120000
            },
            {
                "ftRev": 100000,
                "monthStr": "Oct",
                "tgtRev": 120000
            },
            {
                "ftRev": 100000,
                "monthStr": "Nov",
                "tgtRev": 120000
            },
            {
                "ftRev": 100000,
                "monthStr": "Dec",
                "tgtRev": 120000
            }
        ],
        "reqFields": [
            "monthStr",
            "tgtRev",
            "ftRev,tgtRev",
            "ftRev"
        ]
    },
    "axes": [
        {
            "position": "bottom",
            "type": "Category",
            "fields": [
                "monthStr"
            ],
            "label": {
                "field": "name"
            }
        },
        {
            "minimum": 0,
            "position": "left",
            "type": "Numeric",
            "fields": [
                "ftRev",
                "tgtRev"
            ],
            "label": {
                "field": "name"
            }
        }
    ],
    "legend": {
        "labelFont": "10px Helvetica",
        "padding": 2,
        "position": "bottom",
        "itemSpacing": 10
    },
    "series": [
        {
            "axis": "left",
            "colorsProgressWithinSeries": false,
            "highlight": true,
            "orientation": "vertical",
            "showInLegend": true,
            "title": [
                "FT",
                "Target"
            ],
            "type": "column",
            "tips": {
                "trackMouse": true,
                "height": 20,
                "width": 100,
                "value": "ftRev,tgtRev",
                "label": "monthStr"
            },
            "label": {
                "field": "ftRev,tgtRev"
            },
            "xField": "monthStr",
            "yField": [
                "ftRev",
                "tgtRev"
            ]
        }
    ]
})

 

 

Here is the code that shows the error after Go is clicked.

 

public with sharing class RWTestController {

    public ROIF__c roif {get; set;}

    public List<perfSummObj> perfSummList {get; set;}
    //
    public class perfSummObj {
        public String monthStr  {get; set;}
        public Decimal ftRev {get; set;}
        public Decimal tgtRev {get; set;}
                       
        public perfSummObj(String mthMMM, Double fRev, Double tRev) {
            monthStr=mthMMM;
            ftRev=fRev;
            tgtRev=tRev;
        }
    }
    List<perfSummObj> premPerfSummList; 
    //
    // Constructor
    public RWTestController(ApexPages.StandardController stdController) { 
        roif = (ROIF__c)stdController.getRecord(); 
        updateView();
    } 
    //
    // Go button - re-query results
    public PageReference updatePage() {
        updateView();
        return null;
    }
    //
    public void updateView() {
        premPerfSummList=new List<perfSummObj>();
        List<String> months=new List<String>{'Jan','Feb','Mar','Apr','May','Jun',
            'Jul','Aug','Sep','Oct','Nov','Dec'};
        for(Integer i=0; i<12; i++) {
            String mthMMM=months.get(i); 
            premPerfSummList.add(new perfSummObj(mthMMM, 100000, 120000));
        }
        perfSummList=premPerfSummList;
    }
}

 

<apex:page standardController="ROIF__c" extensions="RWTestController" title="Summary">

<apex:form id="summForm">

<apex:pageBlock title="Summary">
        <apex:commandButton action="{!updatePage}" value="Go" id="theButton" rerender="resultPanel"/>
</apex:pageBlock>

<apex:outputPanel id="resultPanel">
<apex:pageBlock >
    <apex:pageBlockSection columns="1" title="Performance">
        <apex:outputPanel >
        
            <br/>Data&colon;<br/>{!perfSummList}<br/>

            <apex:chart data="{!perfSummList}" height="300" width="500">
                <apex:legend position="bottom" spacing="10" padding="2" font="10px Helvetica"/>
                <apex:axis type="Category" position="bottom" fields="monthStr">
                    <apex:chartLabel />
                </apex:axis>
                <apex:axis type="Numeric" position="left" fields="ftRev,tgtRev" minimum="0" >
                    <apex:chartLabel />
                </apex:axis>
                <apex:barSeries axis="left" orientation="vertical" xField="monthStr" yField="ftRev,tgtRev" title="FT,Target">
                    <apex:chartLabel />
                </apex:barSeries>
            </apex:chart>
    
        </apex:outputPanel>
    </apex:pageBlockSection>
</apex:pageBlock>
</apex:outputPanel>

</apex:form>
</apex:page>

 
cwall_sfdccwall_sfdc

You've found a bug!  The source was helpful.

 

As a workaround, please remove your barSeries's <apex:chartLabel /> element.  Currently VF charting doesn't support labels on barSeries having >1 bar (data point).  Notice on initial render that the data value is not displayed along w/ the bar.  On re-render, charting doesn't handle multiple yFields well.

 

If you feel strongly that this needs to be fixed soon, please create a support case.

 

Thanks again for uncovering.

This was selected as the best answer
rich1115rich1115

Thank you so much!

 

It would be embarassing to explain to my boss why the chart does not appear. The label they can probably live without.

 

The other workaround with the axis minimum="0" attribute is another gotcha to look out for, without this only one from the bar series yField appears.

 

It appears visulaforce charting has some issues - I really hope they get sorted soon.

 
cwall_sfdccwall_sfdc

Thanks for the feedback.  Your noted issue(s) will be resolved in the next release.

 

Please continue to provide feedback and post questions and issues w/ Visualforce charting.
axtria.alignmax1.3922801576877412E12axtria.alignmax1.3922801576877412E12
what is the fix ? 
Brent StangerBrent Stanger
Wrap it in a div and use the following inline style:

<div style="display: {!IF([your field here]==[your criteria here], 'always', 'none')};">