+ Start a Discussion
MellowRenMellowRen 

Visualforce chart won't render (I am going insane)

In the past few weeks I have put together a number of visualforce chart based pages with dynamic controls and everything, all with no problem. Suddenly one won't render the actual chart. After hours of trying to debug the controller, I slowly paired everything back until I am now pretty sure the problem in in my visualforce code.

 

But I can't see the mistake.

 

Anyone able to keep me out of the big white house with padded walls?

 

Visualforce 
===============================
<apex:page controller="TEST_TableLine_ActivitySummary" >
    <apex:form > 
    <apex:pageBlock title="Test">
    <!-- The Chart -->
    <apex:pageBlockSection >
    Begin
    <apex:chart height="800"  width="1200"  data="{!teDat}" id="actCh">
        <apex:legend position="right"/>
        <apex:axis type="Numeric" position="left" fields="rowAnum, rowBnum" title="Meetings Calls"/>
        <apex:axis type="Category" position="bottom" fields="pLab" title="Date" >
            <apex:chartLabel rotate="315"/>
        </apex:axis>
        <apex:lineSeries title="Jo" axis="left" xField="pLab" yField="rowAnum" strokeColor="#190710" strokeWidth="2" markerFill="#190710" markerType="cross" markerSize="4"/>
        <apex:lineSeries title="not Jo" axis="left" xField="pLab" yField="rowBnum" strokeColor="#BBAACC" strokeWidth="2" markerFill="#BBAACC" markerType="cross" markerSize="4" />
    </apex:chart>
    End
    <apex:dataTable value="{!teDat}" var="a" >
        <apex:column headerValue="Period" value="{!a.pLab}"/>
        <apex:column headerValue="NumA" value="{!a.rowAnum}"/>
        <apex:column headerValue="NumB" value="{!a.rowBnum}"/>
    </apex:dataTable>
    </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:form>  
</apex:page>

Even here, the "Begin", "End" and the dataTable are things I added back in just to see if the render (they do). If I remove them, all I get is the page title. The table also shows the data is correct.

 

In case it helps, although I am pretty certain the error is not here, this is my test controller:

 

Controller 
===============================
public with sharing class TEST_TableLine_ActivitySummary {

    public List<ActivityGraph> teDat;
    
    //Constructor
    public TEST_TableLine_ActivitySummary() {
     
    }
    
    // -- The Activity Graph
    public List<ActivityGraph> getteDat() {
        
       List<ActivityGraph> activityFinalGraph = new List<ActivityGraph>();
        
        activityFinalGraph.add(new ActivityGraph('Day 1'));
        activityFinalGraph[0].addUserMeetings(0,5);
        activityFinalGraph[0].addUserMeetings(1,9);
        activityFinalGraph.add(new ActivityGraph('Day 2'));
        activityFinalGraph[1].addUserMeetings(0,8);
        activityFinalGraph[1].addUserMeetings(1,3);
        

System.debug('aFG: '+activityFinalGraph);
        return activityFinalGraph;
    }

    
    public class ActivityGraph
    {
        //STRUCT   -- Going to assume no team will ever have more than 13 people
        public String pLab { get; set; }
        public Integer rowAnum { get; set; } 
        public Integer rowBnum { get; set; } 

        //Constructors
        public ActivityGraph(String pl) 
        {
                   pLab = pl;
                rowAnum = 0;
                rowBnum = 0;
        }
        
        //Utility Methods
        public void addUserMeetings(Integer row, Integer nMtg) 
        {
            if(row == 0)  rowAnum = nMtg;
            if(row == 1)  rowBnum = nMtg;
        }
    }
}

Again the System.debug call shows that the data being returned is correct.

 

What is wrong with my chart? I am assuming it is staring me in the face but it is alluding me.

 

Regards

MellowRen

Sonali BhardwajSonali Bhardwaj

I am not sure if you can have two fields on same Axis.

I did some changes in VF code, see if its what you are looking for:

 

<apex:page controller="Your_Class" >
    <apex:form > 
    <apex:pageBlock title="Test">
    <!-- The Chart -->
    <apex:pageBlockSection >
    
    <apex:chart height="400"  width="400"  data="{!teDat}" id="actCh">
        <apex:legend position="right"/>
        <apex:axis type="Numeric" position="left" fields="rowAnum" title="Meetings Calls"/>
        <apex:axis type="Numeric" position="right" fields="rowBnum" title="Meetings Calls"/>
        <apex:axis type="Category" position="bottom" fields="pLab" title="Date" >
            <apex:chartLabel rotate="315"/>
        </apex:axis>
        <apex:lineSeries title="Jo" axis="left" xField="pLab" yField="rowAnum" strokeColor="#190710" strokeWidth="2" markerFill="#190710" markerType="cross" markerSize="4"/>
        <apex:lineSeries title="not Jo" axis="right" xField="pLab" yField="rowBnum" strokeColor="#BBAACC" strokeWidth="2" markerFill="#BBAACC" markerType="cross" markerSize="4" />
    </apex:chart>
   
    <apex:dataTable value="{!teDat}" var="a" >
        <apex:column headerValue="Period" value="{!a.pLab}"/>
        <apex:column headerValue="NumA" value="{!a.rowAnum}"/>
        <apex:column headerValue="NumB" value="{!a.rowBnum}"/>
    </apex:dataTable>
    </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:form>  
</apex:page>