2 Charts In Single Row, One After Another-Side By Side

[Ranen]

Hello,

 

I want to display 2 charts - 1 pie chart and 1 column chart inside one <tr>

 

But it comes one under another.

 

Can someone tell me how to solve this problem, here is my code snippet and also I put the image file of the chart

 

<tr>
<td align="left">
		<tags:template2>
		<fc:render chartId="${purRedNetBean.chartIdPie}" swfFilename="/ChartHandler-portlet/FusionCharts/Pie2D.swf"
		 width="450" height="200" debugMode="false" registerWithJS="false" xmlData="${purRedNetBean.pieXml}" />
		
		</tags:template2>
	</td>
	<td align="right">
		<tags:template2>
		<fc:render chartId="${purRedNetBean.chartIdColumn}" swfFilename="/ChartHandler-portlet/FusionCharts/Column2D.swf"
		 width="450" height="200" debugMode="false" registerWithJS="false" xmlData="${purRedNetBean.columnPurRedNetXml}" />
		</tags:template2>
	</td>
</tr>

 

 

[Ranen]

Here is the image 

[Guest Sashibhusan]

Hi,

 

I am afraid, we are not able to replicate the issue using your code snippet, from our end.

 

Could you please provide the complete code to test and replicate the issue from our end?

 

Also, please try once by removing styles (if any) applied on the table.

 

Hope this helps!

 

Awaiting your response.

[Ranen]

Hello,

 

Thanks for the reply, see mine is a portlet, I have one portlet which needs to display 4 charts - in 2 rows(say<tr><td>1 chart</td><td> 2 chart</td></tr> - this is the first row), now when user clicks the 1st chart, it has to display another charts just under the first row, basically its drill down charts, now my problem is to display 2 charts in one row, I am not using any styles yet, my env is Liferay portal server, I am attaching one war, but the 2nd one(.war) I can't, its a web service call.

 

Let me know if you have a solution for this problem.

Regards,

Ranen

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects/>
<c:set var="folderPath" value="/ChartHandler-portlet/FusionCharts/"/>
<c:set var="title" value="FusionCharts - Array Example using Single Series Column 3D Chart" scope="request"/>
<c:set var="header1" value="FusionCharts - Examples" scope="request"/>
<c:set var="header2" value="Displaying Transaction Data for Column Chart" scope="request"/>
<c:set var="jsPath" value="${folderPath}" scope="request"/>
<c:set var="assetCSSPath" value="/ChartHandler-portlet/JSP/assets/ui/css/" scope="request"/>
<c:set var="assetJSPath" value="/ChartHandler-portlet/JSP/assets/ui/js/" scope="request"/>
<c:set var="assetImagePath" value="/ChartHandler-portlet/JSP/assets/ui/images/" scope="request"/>
<%@page import="com.bfds.web.bean.PurRedNetBean"%>

<%
	System.out.println("this is the new JSP for TransactionBarChartBean  >>> ");
	PurRedNetBean purRedNetBean = (PurRedNetBean)renderRequest.getAttribute("purRedNetBean");
			
	System.out.println("JSP>>>>this is the new JSP for purRedNetBean  >purRedNetBean>> "+ purRedNetBean);
%>

<div>
<div class="left">
		<tags:template2>
		<fc:render chartId="${purRedNetBean.chartIdPie}" swfFilename="/ChartHandler-portlet/FusionCharts/Pie2D.swf"
		 width="450" height="300" debugMode="false" registerWithJS="false" xmlData="${purRedNetBean.pieXml}" />
		
		</tags:template2>
	</div>
	<div class="right">
		<tags:template2>
		<fc:render chartId="${purRedNetBean.chartIdColumn}" swfFilename="/ChartHandler-portlet/FusionCharts/Column2D.swf"
		 width="450" height="300" debugMode="false" registerWithJS="false" xmlData="${purRedNetBean.columnPurRedNetXml}" />
		</tags:template2>
	</div>
</div>

package com.bfds.web.bean;

import java.util.List;

import com.fusioncharts.sampledata.ChartType;

public class PurRedNetBean {
	private String heightPie = "300";
	private String widthPie = "450";
	
	private String heightColumn = "300";
	private String widthColumn = "450";
	private String pieXml;	
	private String columnPurRedNetXml;
	private String purCntXml;
	private String purSumXml;
	private String redCntXml;
	private String redSumXml;
	private String netSumXml;
	private String netCntXml;
	private String chartIdPie = "transactionPie";
	private String chartIdColumn = "transactionColumn";
	private String url = null;		
	private String filename = ChartType.COLUMN3D.getFileName();
	
	public PurRedNetBean(){
		
	}
	
	public String getHeightPie() {
		return heightPie;
	}
	public void setHeightPie(String heightPie) {
		this.heightPie = heightPie;
	}
	public String getWidthPie() {
		return widthPie;
	}
	public void setWidthPie(String widthPie) {
		this.widthPie = widthPie;
	}
	
	public String getPieXml() {
		return pieXml;
	}

	public void setPieXml(String pieXml) {
		this.pieXml = pieXml;
	}

	public String getColumnPurRedNetXml() {
		return columnPurRedNetXml;
	}
	public void setColumnPurRedNetXml(String columnPurRedNetXml) {
		this.columnPurRedNetXml = columnPurRedNetXml;
	}
	public String getPurCntXml() {
		return purCntXml;
	}
	public void setPurCntXml(String purCntXml) {
		this.purCntXml = purCntXml;
	}
	public String getPurSumXml() {
		return purSumXml;
	}
	public void setPurSumXml(String purSumXml) {
		this.purSumXml = purSumXml;
	}
	public String getRedCntXml() {
		return redCntXml;
	}
	public void setRedCntXml(String redCntXml) {
		this.redCntXml = redCntXml;
	}
	public String getRedSumXml() {
		return redSumXml;
	}
	public void setRedSumXml(String redSumXml) {
		this.redSumXml = redSumXml;
	}
	public String getNetSumXml() {
		return netSumXml;
	}
	public void setNetSumXml(String netSumXml) {
		this.netSumXml = netSumXml;
	}
	public String getNetCntXml() {
		return netCntXml;
	}
	public void setNetCntXml(String netCntXml) {
		this.netCntXml = netCntXml;
	}
	
	public String getChartIdPie() {
		return chartIdPie;
	}

	public void setChartIdPie(String chartIdPie) {
		this.chartIdPie = chartIdPie;
	}

	public String getChartIdColumn() {
		return chartIdColumn;
	}

	public void setChartIdColumn(String chartIdColumn) {
		this.chartIdColumn = chartIdColumn;
	}

	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public String getFilename() {
		return filename;
	}
	public void setFilename(String filename) {
		this.filename = filename;
	}
	
	
	public String getHeightColumn() {
		return heightColumn;
	}

	public void setHeightColumn(String heightColumn) {
		this.heightColumn = heightColumn;
	}

	public String getWidthColumn() {
		return widthColumn;
	}

	public void setWidthColumn(String widthColumn) {
		this.widthColumn = widthColumn;
	}

	public void constructPieColumnXml(PurRedNetForZoomlineChartRecords purRedNetForZoomlineChartRecords){
		System.out.println("<<<<<<<<<<< contsructing Pie Column chart >>>>>>>");
		List<PurRedNetForZoomlineChartRecord> purRedNetForZoomlineChartRecordList = null;
		Integer purCnt = 0;
		Integer redCnt = 0;
		Integer netCnt = 0;
				
		purRedNetForZoomlineChartRecordList = purRedNetForZoomlineChartRecords.getPurRedNetForZoomlineChartRecord();
       	for(PurRedNetForZoomlineChartRecord prn:purRedNetForZoomlineChartRecordList){
       		
       		purCnt +=prn.getPurCnt();
       		redCnt +=prn.getRedCnt();
       		netCnt +=prn.getNetCnt();
       		
       	}
	    
		pieXml ="<chart caption='2012 Transaction Data in Pie Chart' showPercentValues='1'>";
		pieXml +="<set label='PurCnt' value='"+purCnt+"'/>"; //link="newchart-xmlurl-Data2004.xml"
		pieXml +="<set label='RedCnt' value='"+redCnt+"'/>";
		pieXml +="<set label='NetCnt' value='"+netCnt+"'/>";
		pieXml +="</chart>";
		
		columnPurRedNetXml="<chart caption='2012 Transaction Data in Column Chart' xAxisName='PurRedNet' yAxisName='Number' numberPrefix='' showValues='0'>";
		columnPurRedNetXml +="<set label='PurCnt' value='"+purCnt+"'/>";
		columnPurRedNetXml +="<set label='RedCnt' value='"+redCnt+"'/>";
		columnPurRedNetXml +="<set label='NetCnt' value='"+netCnt+"'/>";
		columnPurRedNetXml +="</chart>";
		
	}
	
	
	public void constructColumnPurRedNetXml(PurRedNetForZoomlineChartRecords purRedNetForZoomlineChartRecords){
		
	}
		
	public void constructPurCntXml(PurRedNetForZoomlineChartRecords purRedNetForZoomlineChartRecords){
		
	}

	public void constructpurSumXml(PurRedNetForZoomlineChartRecords purRedNetForZoomlineChartRecords){
	
	}

	public void constructRedCntXml(PurRedNetForZoomlineChartRecords purRedNetForZoomlineChartRecords){
	
	}

	public void constructRedSumXml(PurRedNetForZoomlineChartRecords purRedNetForZoomlineChartRecords){
	
	}

	public void constructNetSumXml(PurRedNetForZoomlineChartRecords purRedNetForZoomlineChartRecords){
	
	}

	public void constructNetCntXml(PurRedNetForZoomlineChartRecords purRedNetForZoomlineChartRecords){
	
	}
	
	
	
	
	

}

[Ranen]

This attached image is what I am looking for, and how can I achieve my target

[Ranen]

no rresponses?

[Haritha]

Hi Ranen,

 

We have tried to have two charts in one row using the code that you have sent us and it seems to be working fine at our end.

 

We have used the code that you have pasted above that is instead of using divs, we used the charts inside a table.

<table>

<tr>

<td>

        <tags:template2>

        <fc:render chartId="${purRedNetBean.chartIdPie}" swfFilename="/ChartHandler-portlet/FusionCharts/Pie2D.swf"

         width="450" height="200" debugMode="false" registerWithJS="false" xmlData="${purRedNetBean.pieXml}" />

        </tags:template2>

    </td>

    <td>

        <tags:template2>

        <fc:render chartId="${purRedNetBean.chartIdColumn}" swfFilename="/ChartHandler-portlet/FusionCharts/Column2D.swf"

         width="450" height="200" debugMode="false" registerWithJS="false" xmlData="${purRedNetBean.columnPurRedNetXml}" />

        </tags:template2>

    </td>

 </tr>

</table>

 

The above code displays the charts in a row.  Please find the attached screenshot of the same.

 

Could you please send us a scaled down sample along with all the files needed to render FusionCharts, placed in a zip file so that we can test it here?

 

Awaiting your response.

[Ranen]

Hey Thanks for the reply.

 

Did you guys try in liferay portal server, mine is a liferay portal and I tried the way you are saying in the very first time, it did not come. Thanks

[Ranen]

Hey Guys,

 

Its fixed, actually tamplate tag has to be outside the table tag,just like this

 

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects/>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<c:set var="folderPath" value="/ChartHandler-portlet/FusionCharts/"/>
<c:set var="title" value="FusionCharts - Array Example using Single Series Column 3D Chart" scope="request"/>
<c:set var="header1" value="FusionCharts - Examples" scope="request"/>
<c:set var="header2" value=" " scope="request"/>
<c:set var="jsPath" value="${folderPath}" scope="request"/>
<c:set var="assetCSSPath" value="/ChartHandler-portlet/JSP/assets/ui/css/" scope="request"/>
<c:set var="assetJSPath" value="/ChartHandler-portlet/JSP/assets/ui/js/" scope="request"/>
<c:set var="assetImagePath" value="/ChartHandler-portlet/JSP/assets/ui/images/" scope="request"/>
<%@page import="com.bfds.web.bean.PieColumnChartBean"%>
<%@page import="com.bfds.web.bean.PieDetailBean"%>

<%
	PieColumnChartBean pieColumnChartBean = (PieColumnChartBean)renderRequest.getAttribute("pieColumnChartBean");
	PieDetailBean pieDetailBean = (PieDetailBean)renderRequest.getAttribute("pieDetailBean");
%>

  <SCRIPT LANGUAGE="JavaScript">
      function myJS(myVar){
    	  window.alert(myVar);          
          var url = '<portlet:renderURL></portlet:renderURL>';
          jQuery.post(url,{tradeOrigin : myVar},function() {          
         	});    
      }
  </SCRIPT>

		<tags:template2>
		<table>
			<tr>
				<td>
					<fc:render chartId="${pieColumnChartBean.chartIdPie}" swfFilename="/ChartHandler-portlet/FusionCharts/Pie2D.swf"
					width="450" height="300" debugMode="false" registerWithJS="false" xmlData="${pieColumnChartBean.pieXml}" />		
				</td>
				<td>
					<fc:render chartId="${pieColumnChartBean.chartIdColumn}" swfFilename="/ChartHandler-portlet/FusionCharts/MSColumn2D.swf"
					width="450" height="300" debugMode="false" registerWithJS="false" xmlData="${pieColumnChartBean.columnXml}" />
				</td>
			</tr>
		</table>
		
		</tags:template2>
	

 

 

 

Thanks for your time

[Haritha]

Hi Ranen,

 

The charts get rendered fine in a row even when <tags:template2> tag  is used inside the table tag. 

 

I have attached screenshots of both the scenarios that is <tags:template2> tag used inside the table and outside the table. Both these approaches can be used as alternates of each other.

 

Hope this helps.