+ Start a Discussion
Carter85Carter85 

Need help getting multiple visualforce charts on one page

Fairly new to visualforce charting with dynamic data, and I'm running into an issue regarding getting multiple charts on the same page to display.  At the moment only one is.  It's a little frustrating, as I'm guessing I'm missing something fairly simple.

Here's my controller code for the chart that is displaying:
public List<Data> getData() {
        return CM_MCMReport.getChartData(monthCurr, monthCurrm1, monthCurrm2, monthCurrm3, monthCurrm4, monthCurrm5, monthMsgsSnt, monthm1MsgsSnt, monthm2MsgsSnt, monthm3MsgsSnt, monthm4MsgsSnt, monthm5MsgsSnt, monthm5MsgsOpnd, monthm4MsgsOpnd, monthm3MsgsOpnd, monthm2MsgsOpnd, monthm1MsgsOpnd, monthMsgsOpnd, monthCurrClicks, monthCurrm1Clicks, monthCurrm2Clicks, monthCurrm3Clicks, monthCurrm4Clicks, monthCurrm5Clicks);
    	}
    
    @RemoteAction
    public static List<Data> getRemoteData(string monthCurr, string monthCurrm1, string monthCurrm2, string monthCurrm3, string monthCurrm4, string monthCurrm5, integer monthMsgsSnt, integer monthm1MsgsSnt, integer monthm2MsgsSnt, integer monthm3MsgsSnt, integer monthm4MsgsSnt, integer monthm5MsgsSnt, integer monthm5MsgsOpnd, integer monthm4MsgsOpnd, integer monthm3MsgsOpnd, integer monthm2MsgsOpnd, integer monthm1MsgsOpnd, integer monthMsgsOpnd,integer monthCurrClicks, integer monthCurrm1Clicks, integer monthCurrm2Clicks, integer monthCurrm3Clicks, integer monthCurrm4Clicks, integer monthCurrm5Clicks) {
        return CM_MCMReport.getChartData(monthCurr, monthCurrm1, monthCurrm2, monthCurrm3, monthCurrm4, monthCurrm5, monthMsgsSnt, monthm1MsgsSnt, monthm2MsgsSnt, monthm3MsgsSnt, monthm4MsgsSnt, monthm5MsgsSnt, monthm5MsgsOpnd, monthm4MsgsOpnd, monthm3MsgsOpnd, monthm2MsgsOpnd, monthm1MsgsOpnd, monthMsgsOpnd, monthCurrClicks, monthCurrm1Clicks, monthCurrm2Clicks, monthCurrm3Clicks, monthCurrm4Clicks, monthCurrm5Clicks);
    	}

    public static List<Data> getChartData(string monthCurr, string monthCurrm1, string monthCurrm2, string monthCurrm3, string monthCurrm4, string monthCurrm5, integer monthMsgsSnt, integer monthm1MsgsSnt, integer monthm2MsgsSnt, integer monthm3MsgsSnt, integer monthm4MsgsSnt, integer monthm5MsgsSnt, integer monthm5MsgsOpnd, integer monthm4MsgsOpnd, integer monthm3MsgsOpnd, integer monthm2MsgsOpnd, integer monthm1MsgsOpnd, integer monthMsgsOpnd, integer monthCurrClicks, integer monthCurrm1Clicks, integer monthCurrm2Clicks, integer monthCurrm3Clicks, integer monthCurrm4Clicks, integer monthCurrm5Clicks) {
        List<Data> data = new List<Data>();
        data.add(new Data(monthCurrm5, monthm5MsgsSnt, monthm5MsgsOpnd, monthCurrm5Clicks));
        data.add(new Data(monthCurrm4, monthm4MsgsSnt, monthm4MsgsOpnd, monthCurrm4Clicks));
        data.add(new Data(monthCurrm3, monthm3MsgsSnt, monthm3MsgsOpnd, monthCurrm3Clicks));
        data.add(new Data(monthCurrm2, monthm2MsgsSnt, monthm2MsgsOpnd, monthCurrm2Clicks));
        data.add(new Data(monthCurrm1, monthm1MsgsSnt, monthm1MsgsOpnd, monthCurrm1Clicks));
        data.add(new Data(monthCurr, monthMsgsSnt, monthMsgsOpnd, monthCurrClicks));
        return data;
    	}
    
    public class Data{
        public String name {get;set;}
        public Integer Sent {get;set;}
        public Integer Opened {get;set;}
        public Integer Clicks {get;set;}
        public Data(String name, Integer data1, integer data2, integer data3) {
            this.name = name;
            this.Sent = data1;
            this.Opened = data2;
            this.Clicks = data3;
        	}
    }
And the visualforce snippet displaying it:
<apex:chart height="400" width="700" data="{!data}">
    	  <apex:axis type="Numeric" position="left" fields="Sent,Opened,Clicks" 
            title="Messages Sent" grid="true"/>
    	  <apex:axis type="Category" position="bottom" fields="name" 
            title="Month">
    	  </apex:axis>
    	  <apex:lineSeries axis="left" xField="name" yField="Sent"
        	  markerType="circle" markerSize="4" markerFill="#3fae3f"/>
    	  <apex:lineSeries axis="left" xField="name" yField="Opened" 
            markerType="circle" markerSize="4" markerFill="#3f63ae"/>
          <apex:lineSeries axis="left" xField="name" yField="Clicks" 
            markerType="circle" markerSize="4" markerFill="#000000"/>
            <apex:legend position="right"/>  
    </apex:chart>
Now, regarding the second, problematic chart, this is the controller snippet:
public List<Chart> getData1(integer monthCurrCons, integer monthCurrm1Cons, integer monthCurrm2Cons, integer monthCurrm3Cons, integer monthCurrm4Cons, integer monthCurrm5Cons, string monthCurr, string monthCurrm1, string monthCurrm2, string monthCurrm3, string monthCurrm4, string monthCurrm5, integer monthcurrm5ConsTot, integer monthcurrm4ConsTot, integer monthcurrm3ConsTot, integer monthcurrm2ConsTot, integer monthcurrm1ConsTot, integer monthcurrConsTot) {
        return CM_MCMReport.getChartData1(monthCurrCons, monthCurrm1Cons, monthCurrm2Cons, monthCurrm3Cons, monthCurrm4Cons, monthCurrm5Cons, monthCurr, monthCurrm1, monthCurrm2, monthCurrm3, monthCurrm4, monthCurrm5, monthcurrm5ConsTot, monthcurrm4ConsTot, monthcurrm3ConsTot, monthcurrm2ConsTot, monthcurrm1ConsTot, monthcurrConsTot);
    	}
    
    @RemoteAction
    public static List<Chart> getRemoteData(integer monthCurrCons, integer monthCurrm1Cons, integer monthCurrm2Cons, integer monthCurrm3Cons, integer monthCurrm4Cons, integer monthCurrm5Cons, string monthCurr, string monthCurrm1, string monthCurrm2, string monthCurrm3, string monthCurrm4, string monthCurrm5, integer monthcurrm5ConsTot, integer monthcurrm4ConsTot, integer monthcurrm3ConsTot, integer monthcurrm2ConsTot, integer monthcurrm1ConsTot, integer monthcurrConsTot) {
        return CM_MCMReport.getChartData1(monthCurrCons, monthCurrm1Cons, monthCurrm2Cons, monthCurrm3Cons, monthCurrm4Cons, monthCurrm5Cons, monthCurr, monthCurrm1, monthCurrm2, monthCurrm3, monthCurrm4, monthCurrm5, monthcurrm5ConsTot, monthcurrm4ConsTot, monthcurrm3ConsTot, monthcurrm2ConsTot, monthcurrm1ConsTot, monthcurrConsTot);
    	}

     public static List<Chart> getChartData1(integer monthCurrCons, integer monthCurrm1Cons, integer monthCurrm2Cons, integer monthCurrm3Cons, integer monthCurrm4Cons, integer monthCurrm5Cons, string monthCurr, string monthCurrm1, string monthCurrm2, string monthCurrm3, string monthCurrm4, string monthCurrm5, integer monthcurrm5ConsTot, integer monthcurrm4ConsTot, integer monthcurrm3ConsTot, integer monthcurrm2ConsTot, integer monthcurrm1ConsTot, integer monthcurrConsTot) {
        List<Chart> charts = new List<Chart>();
        charts.add(new Chart(monthCurrm5, monthCurrm5Cons, monthcurrm5ConsTot));
        charts.add(new Chart(monthCurrm4, monthCurrm4Cons, monthcurrm1ConsTot));
        charts.add(new Chart(monthCurrm3, monthCurrm3Cons, monthcurrm1ConsTot));
        charts.add(new Chart(monthCurrm2, monthCurrm2Cons, monthcurrm1ConsTot));
        charts.add(new Chart(monthCurrm1, monthCurrm1Cons, monthcurrm1ConsTot));
        charts.add(new Chart(monthCurr, monthCurrCons, monthcurrConsTot));
        return charts;
    	}
    
    public class Chart{
        public String name {get;set;}
        public Integer Installed {get;set;}
        public Integer notInstalled {get;set;}
        public Chart(String name, Integer data1, integer data2) {
            this.name = name;
            this.Installed = data1;
            this.notInstalled = data2;
            }
    }
And the visualforce:
<apex:chart height="400" width="700" animate="true" data="{!charts}">
    	<apex:legend position="right"/>
    	<apex:axis type="Numeric" position="left" fields="Installed, notInstalled" 
        	title="Customers" grid="true">
        <apex:chartLabel />
    	</apex:axis>
    	<apex:axis type="Category" position="bottom" fields="name" title="Month">
        	<apex:chartLabel rotate="315"/>
    	</apex:axis>
    	<apex:areaSeries axis="left" xField="name" tips="true" 
        	yField="installed,notInstalled" title="Installed, Did Not Install"  />
	</apex:chart>
The issue I'm getting at the moment is that for some reason the page cannot access the 'charts' variable, claiming it's an unknow property of the standard controller, but I didn't have to make any changes to get the 'data' chart to display from my custom controller, so I'm sort of scratching my head at the moment and any help would be appreciated.



 
Deepak GulianDeepak Gulian
<apex:chart height="400" width="700" data="{!ChartData}">
    	  <apex:axis type="Numeric" position="left" fields="Sent,Opened,Clicks" 
            title="Messages Sent" grid="true"/>
    	  <apex:axis type="Category" position="bottom" fields="name" 
            title="Month">
    	  </apex:axis>
    	  <apex:lineSeries axis="left" xField="name" yField="Sent"
        	  markerType="circle" markerSize="4" markerFill="#3fae3f"/>
    	  <apex:lineSeries axis="left" xField="name" yField="Opened" 
            markerType="circle" markerSize="4" markerFill="#3f63ae"/>
          <apex:lineSeries axis="left" xField="name" yField="Clicks" 
            markerType="circle" markerSize="4" markerFill="#000000"/>
            <apex:legend position="right"/>  
    </apex:chart>
<apex:chart height="400" width="700" animate="true" data="{!ChartData1}">
    	<apex:legend position="right"/>
    	<apex:axis type="Numeric" position="left" fields="Installed, notInstalled" 
        	title="Customers" grid="true">
        <apex:chartLabel />
    	</apex:axis>
    	<apex:axis type="Category" position="bottom" fields="name" title="Month">
        	<apex:chartLabel rotate="315"/>
    	</apex:axis>
    	<apex:areaSeries axis="left" xField="name" tips="true" 
        	yField="installed,notInstalled" title="Installed, Did Not Install"  />
	</apex:chart>

Try to modify your VF code with the above.
Carter85Carter85
Thanks for the suggestion, and sorry for my delayed response.  Unfortunately that does not solve it, making that change then leads the error to occur for both charts, claiming the variables are invalid, but if you had any other thoughts I would certainly try them.