Showing chart and a table side by side

Question

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.

Ganesh Bhosle · Accepted Answer · 2014-01-27 04:29:24Z

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>

JimRae · Accepted Answer · 2014-01-27 14:15:26Z

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>

have you try resize the browser?my case the alignment is ruining when I resize browser smaller? — unidha, Jul 5, 2017 at 7:27

Stack Exchange Network

Showing chart and a table side by side

2 Answers 2

You must log in to answer this question.

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

Hot Network Questions

Showing chart and a table side by side

2 Answers 2

You must log in to answer this question.

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

Related

Hot Network Questions

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