4

I have following VF page, in which I want to show chart and table adjacent to each other. I have placed them in same pageblock still the table is coming below the chart and there is lot of void space next to chart. Sorry if this is a very silly question.

VF page:

    <apex:pageblock>
<apex:chart height="350" width="1000" data="{!osrtrend}" background="#FFFFFF">
    <apex:legend position="right"/>
    <apex:axis type="Numeric" position="left" fields="Revenue,Goal" title="Revenue (In $ '000)" minimum="0"/>
    <apex:axis type="Category" position="bottom" fields="monthString" title="Month of the Year">
        <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:barSeries title="Actual, Goal" orientation="vertical" axis="left" xField="monthString" yField="Revenue,Goal" colorset="#FFD700,#1E90FF" groupGutter="10">
        <apex:chartTips height="20" width="120"/>
    </apex:barSeries>
    <apex:axis type="Numeric" position="right" fields="Attnmnt" title="Attainment (%)" grid="true" minimum="0"/>
   <apex:lineSeries title="Attnmnt(%)" axis="right" xField="monthString" yField="Attnmnt" fill="false" strokeColor="#000080" strokeWidth="2" Smooth="3" markerType="circle" markerSize="3" markerFill="#FF0000"/>
</apex:chart>
  <apex:dataTable value="{!SalesReps1}" var="test" border="1" cellpadding="3" cellspacing="2" align="center" bgcolor="#F5FFFA">
    <apex:column headerValue="Month">
    <apex:outputLabel value="{!IF (test.Month_Number__c = 1 , 'Jan', IF(test.Month_Number__c = 2,'Feb', IF(test.Month_Number__c = 3,'Mar', IF(test.Month_Number__c = 4,'Apr', IF(test.Month_Number__c = 5,'May', IF(test.Month_Number__c = 6,'Jun', IF(test.Month_Number__c = 7,'Jul', IF(test.Month_Number__c = 8,'Aug', IF(test.Month_Number__c = 9,'Sep', IF(test.Month_Number__c = 10,'Oct', IF(test.Month_Number__c = 11,'Nob', IF(test.Month_Number__c = 12,'Dec','NA'))))))))))))}"/>
    </apex:column>
    <apex:column headerValue="Goal Revision">
        <apex:inputField value="{!test.Rental_Revenue_Goal__c}"/>
        <apex:commandButton action="{!save}" value="Save"/>
    </apex:column>                  
</apex:dataTable>
    </apex:pageblock>

Thanks.

2 Answers 2

3

One approach is to put elements in table as shown here.

<apex:pageblock>
<table><tr><td>

<apex:chart height="350" width="1000" data="{!osrtrend}" background="#FFFFFF">
    <apex:legend position="right"/>
    <apex:axis type="Numeric" position="left" fields="Revenue,Goal" title="Revenue (In $ '000)" minimum="0"/>
    <apex:axis type="Category" position="bottom" fields="monthString" title="Month of the Year">
        <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:barSeries title="Actual, Goal" orientation="vertical" axis="left" xField="monthString" yField="Revenue,Goal" colorset="#FFD700,#1E90FF" groupGutter="10">
        <apex:chartTips height="20" width="120"/>
    </apex:barSeries>
    <apex:axis type="Numeric" position="right" fields="Attnmnt" title="Attainment (%)" grid="true" minimum="0"/>
   <apex:lineSeries title="Attnmnt(%)" axis="right" xField="monthString" yField="Attnmnt" fill="false" strokeColor="#000080" strokeWidth="2" Smooth="3" markerType="circle" markerSize="3" markerFill="#FF0000"/>
</apex:chart>

</td><td>

  <apex:dataTable value="{!SalesReps1}" var="test" border="1" cellpadding="3" cellspacing="2" align="center" bgcolor="#F5FFFA">
    <apex:column headerValue="Month">
    <apex:outputLabel value="{!IF (test.Month_Number__c = 1 , 'Jan', IF(test.Month_Number__c = 2,'Feb', IF(test.Month_Number__c = 3,'Mar', IF(test.Month_Number__c = 4,'Apr', IF(test.Month_Number__c = 5,'May', IF(test.Month_Number__c = 6,'Jun', IF(test.Month_Number__c = 7,'Jul', IF(test.Month_Number__c = 8,'Aug', IF(test.Month_Number__c = 9,'Sep', IF(test.Month_Number__c = 10,'Oct', IF(test.Month_Number__c = 11,'Nob', IF(test.Month_Number__c = 12,'Dec','NA'))))))))))))}"/>
    </apex:column>
    <apex:column headerValue="Goal Revision">
        <apex:inputField value="{!test.Rental_Revenue_Goal__c}"/>
        <apex:commandButton action="{!save}" value="Save"/>
    </apex:column>                  
</apex:dataTable>

</td></tr></table>
</apex:pageblock>

Alternate approach is to float contents next to each other as shown below.

<style type="text/css">
.container > * {
    float:left;
    margin-right:5px;
}

.container {
    *zoom:1 /* for IE */
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}
</style>


<apex:pageblock>
<div class="container" style="border:1px dashed red;"><div>

<apex:chart height="350" width="1000" data="{!osrtrend}" background="#FFFFFF">
    <apex:legend position="right"/>
    <apex:axis type="Numeric" position="left" fields="Revenue,Goal" title="Revenue (In $ '000)" minimum="0"/>
    <apex:axis type="Category" position="bottom" fields="monthString" title="Month of the Year">
        <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:barSeries title="Actual, Goal" orientation="vertical" axis="left" xField="monthString" yField="Revenue,Goal" colorset="#FFD700,#1E90FF" groupGutter="10">
        <apex:chartTips height="20" width="120"/>
    </apex:barSeries>
    <apex:axis type="Numeric" position="right" fields="Attnmnt" title="Attainment (%)" grid="true" minimum="0"/>
   <apex:lineSeries title="Attnmnt(%)" axis="right" xField="monthString" yField="Attnmnt" fill="false" strokeColor="#000080" strokeWidth="2" Smooth="3" markerType="circle" markerSize="3" markerFill="#FF0000"/>
</apex:chart>

</div><div>

  <apex:dataTable value="{!SalesReps1}" var="test" border="1" cellpadding="3" cellspacing="2" align="center" bgcolor="#F5FFFA">
    <apex:column headerValue="Month">
    <apex:outputLabel value="{!IF (test.Month_Number__c = 1 , 'Jan', IF(test.Month_Number__c = 2,'Feb', IF(test.Month_Number__c = 3,'Mar', IF(test.Month_Number__c = 4,'Apr', IF(test.Month_Number__c = 5,'May', IF(test.Month_Number__c = 6,'Jun', IF(test.Month_Number__c = 7,'Jul', IF(test.Month_Number__c = 8,'Aug', IF(test.Month_Number__c = 9,'Sep', IF(test.Month_Number__c = 10,'Oct', IF(test.Month_Number__c = 11,'Nob', IF(test.Month_Number__c = 12,'Dec','NA'))))))))))))}"/>
    </apex:column>
    <apex:column headerValue="Goal Revision">
        <apex:inputField value="{!test.Rental_Revenue_Goal__c}"/>
        <apex:commandButton action="{!save}" value="Save"/>
    </apex:column>                  
</apex:dataTable>

</div></div>
</apex:pageblock>
0
1

If you want to use standard Visualforce elements to do this, you need to had a 2 column pageblocksection, and add each element as a Pageblocksectionitem, like this:

 <apex:pageblock>
 <apex:pageblockSection columns="2">
 <apex:pageblockSectionItem>
 <apex:chart height="350" width="1000" data="{!osrtrend}" background="#FFFFFF">
 <apex:legend position="right"/>
 <apex:axis type="Numeric" position="left" fields="Revenue,Goal" title="Revenue (In $ '000)" minimum="0"/>
<apex:axis type="Category" position="bottom" fields="monthString" title="Month of the Year">
    <apex:chartLabel rotate="315"/>
</apex:axis>
<apex:barSeries title="Actual, Goal" orientation="vertical" axis="left" xField="monthString" yField="Revenue,Goal" colorset="#FFD700,#1E90FF" groupGutter="10">
    <apex:chartTips height="20" width="120"/>
</apex:barSeries>
<apex:axis type="Numeric" position="right" fields="Attnmnt" title="Attainment (%)" grid="true" minimum="0"/>
<apex:lineSeries title="Attnmnt(%)" axis="right" xField="monthString" yField="Attnmnt" fill="false" strokeColor="#000080" strokeWidth="2" Smooth="3" markerType="circle" markerSize="3" markerFill="#FF0000"/>
</apex:chart>
 </apex:pageblockSectionItem>
 <apex:pageblockSectionItem>
<apex:dataTable value="{!SalesReps1}" var="test" border="1" cellpadding="3" cellspacing="2" align="center" bgcolor="#F5FFFA">
<apex:column headerValue="Month">
<apex:outputLabel value="{!IF (test.Month_Number__c = 1 , 'Jan', IF(test.Month_Number__c = 2,'Feb', IF(test.Month_Number__c = 3,'Mar', IF(test.Month_Number__c = 4,'Apr', IF(test.Month_Number__c = 5,'May', IF(test.Month_Number__c = 6,'Jun', IF(test.Month_Number__c = 7,'Jul', IF(test.Month_Number__c = 8,'Aug', IF(test.Month_Number__c = 9,'Sep', IF(test.Month_Number__c = 10,'Oct', IF(test.Month_Number__c = 11,'Nob', IF(test.Month_Number__c = 12,'Dec','NA'))))))))))))}"/>
</apex:column>
<apex:column headerValue="Goal Revision">
    <apex:inputField value="{!test.Rental_Revenue_Goal__c}"/>
    <apex:commandButton action="{!save}" value="Save"/>
</apex:column>                  
</apex:dataTable>
 </apex:pageblockSectionItem>
 </apex:pageblockSection>
</apex:pageblock>
1
  • have you try resize the browser?my case the alignment is ruining when I resize browser smaller?
    – unidha
    Jul 5, 2017 at 7:27

You must log in to answer this question.

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