Eclipse Community Forums: BIRT » client size graph resize

Home » Archived » BIRT » client size graph resize(using javascript to resize graph from JSP)

client size graph resize [message #859482]

Fri, 27 April 2012 13:00

Eclipse User

I currently am running my graph in a birt viewer within my application on a JSP. I give the user the option to minimize/maximize the chart using an onclick js function. I have figured out how to enlarge the birt viewer/iframe, however, the graph/image remains the same size. Is there any way to enlarge the image as well?

here is my current code that works to enlarge/shrink the birt viewer, but as mentioned before, the graph remains the same size within the viewer:

<birt:report
id="blah"
reportDesign="blahblah.rptdesign"
isHostPage="false"
height="250"
width="444"
format="html">
</birt:report>

<script type="text/javascript">
function chartGrow(){
var x = document.getElementsByTagName("iframe");
x[0].style.height = 500 + "px";
x[0].style.width = 888 + "px";
}
function chartShrink(){
var x = document.getElementsByTagName("iframe");
x[0].style.height = 250+"px";
x[0].style.width = 444+"px";
}
</script>

Re: client size graph resize [message #859948 is a reply to message #859482]

Fri, 27 April 2012 17:55

Eclipse User

I am assuming you do not want to execute the report again. The chart is
just an image (Except for SVG output), so you may be able to use various
methods described here:
http://stackoverflow.com/questions/170624/javascript-image-resize

to get a handle on the image use getElementById. To set the id for a
chart select the chart in the designer and then click on the bookmark
property in the properties editor. If you enter "testchart" The
following will be generated in the output html.

<img id="testchart"
src="/viewer/preview?__sessionId=20120427_174940_821&__imageid=custom834c87136f5c7e8361.png"
alt="" style=" width: 427.5pt; height: 262.5pt;display: block;"></img>

If you do not mind re-running the report you can put script in to set
the size:
http://birtworld.blogspot.com/2008/04/birt-resizing-charts.html

Jason

On 4/27/2012 1:00 PM, Missing name Mising name wrote:
> I currently am running my graph in a birt viewer within my application
> on a JSP. I give the user the option to minimize/maximize the chart
> using an onclick js function. I have figured out how to enlarge the birt
> viewer/iframe, however, the graph/image remains the same size. Is there
> any way to enlarge the image as well?
>
> here is my current code that works to enlarge/shrink the birt viewer,
> but as mentioned before, the graph remains the same size within the viewer:
>
>
> <birt:report id="blah"
> reportDesign="blahblah.rptdesign"
> isHostPage="false"
> height="250"
> width="444"
> format="html">
> </birt:report>
>
> <script type="text/javascript">
> function chartGrow(){
> var x = document.getElementsByTagName("iframe");
> x[0].style.height = 500 + "px";
> x[0].style.width = 888 + "px";
> }
> function chartShrink(){
> var x = document.getElementsByTagName("iframe");
> x[0].style.height = 250+"px";
> x[0].style.width = 444+"px";
> }
> </script>

Re: client size graph resize [message #865554 is a reply to message #859948]

Mon, 30 April 2012 09:04

Eclipse User

Jason,

that sounds like exactly what i wanted, however, i am using API to build the image, is there any way to set the image ID name using the API?

thanks,
John

Re: client size graph resize [message #865736 is a reply to message #865554]

Mon, 30 April 2012 10:41

Eclipse User

John,

In your first post it looked like you were using the birt report tag
libraries. How are you calling the API from your JSP?

Jason

On 4/30/2012 9:04 AM, Missing name Mising name wrote:
> Jason,
>
> that sounds like exactly what i wanted, however, i am using API to build
> the image, is there any way to set the image ID name using the API?
>
> thanks,
> John

Re: client size graph resize [message #865791 is a reply to message #865736]

Mon, 30 April 2012 11:19

Eclipse User

Jason,

sorry i should have specified how i was using everything. in my JSP i have the following:

<birt:report
id="blah"
reportDesign="smallChart.rptdesign"
isHostPage="false"
format="html"
height="250"
width="444">
</birt:report>
<script type="text/javascript">
function chartGrow(){
var x = document.getElementsByTagName("iframe");
x[0].style.height = 500 + "px";
x[0].style.width = 888 + "px";
}
</script>

so the HTML output is actually:

<div id="params_blah" style='display:none'>
</div>
<form id="form_blah" method="post"></form>
<script type="text/javascript">
function loadViewerblah(){
var formObj = document.getElementById( "form_blah" );
var paramContainer = document.getElementById("params_blah");
var oParams = paramContainer.getElementsByTagName('input');
if( oParams )
{
for( var i=0;i<oParams.length;i++ )
{
var param = document.createElement( "INPUT" );
param.type = "HIDDEN";
param.name= oParams[i].name;
param.value= oParams[i].value;
formObj.appendChild( param );
}
}
formObj.action = "/progname/preview?__report=smallChart.rptdesign&__masterpage=true&__format=html";
formObj.target = "blah";
formObj.submit( );
}
</script>
<iframe name="blah" frameborder="no" scrolling = "auto" style='height:250px;width:444px;' ></iframe>
<script type="text/javascript">loadViewerblah();</script>

<script type="text/javascript">
function chartGrow(){
var x = document.getElementsByTagName("iframe");
x[0].style.height = 500 + "px";
x[0].style.width = 888 + "px";
}
</script>

and i have a java class that is contructing the graph using the API. since i am not getting an <img> tag i feel like there is no ID name for me to grab a hold of.

thanks
john

[Updated on: Mon, 30 April 2012 11:20] by Moderator

Re: client size graph resize [message #865909 is a reply to message #865791]

Mon, 30 April 2012 12:32

Eclipse User

John,

Where in that code are you calling your class that creates the chart? I
saw this but generates the chart using the normal engine:
"/progname/preview?__report=smallChart.rptdesign

Jason

On 4/30/2012 11:19 AM, Missing name Mising name wrote:
> Jason,
>
> sorry i should have specified how i was using everything. in my JSP i
> have the following:
>
> <birt:report
> id="blah"
> reportDesign="smallChart.rptdesign"
> isHostPage="false"
> format="html"
> height="250"
> width="444">
> </birt:report>
> <script type="text/javascript">
> function chartGrow(){
> var x = document.getElementsByTagName("iframe");
> x[0].style.height = 500 + "px";
> x[0].style.width = 888 + "px";
> }
> </script>
>
>
>
> so the HTML output is actually:
>
>
> <div id="params_blah" style='display:none'>
> </div>
> <form id="form_blah" method="post"></form>
> <script type="text/javascript">
> function loadViewerblah(){
> var formObj = document.getElementById( "form_blah" );
> var paramContainer = document.getElementById("params_blah");
> var oParams = paramContainer.getElementsByTagName('input');
> if( oParams )
> {
> for( var i=0;i<oParams.length;i++ ) {
> var param = document.createElement( "INPUT" );
> param.type = "HIDDEN";
> param.name= oParams[i].name;
> param.value= oParams[i].value;
> formObj.appendChild( param );
> }
> }
> formObj.action =
> "/progname/preview?__report=smallChart.rptdesign&__masterpage=true&__format=html";
>
> formObj.target = "blah";
> formObj.submit( );
> }
> </script>
> <iframe name="classic" frameborder="no" scrolling = "auto"
> style='height:250px;width:444px;' ></iframe>
> <script type="text/javascript">loadViewerblah();</script>
>
>
> <script type="text/javascript">
> function chartGrow(){
> var x = document.getElementsByTagName("iframe");
> x[0].style.height = 500 + "px";
> x[0].style.width = 888 + "px";
> }
> </script>
> and i have a java class that is contructing the graph using the API.
> since i am not getting an <img> tag i feel like there is no ID name for
> me to grab a hold of.
>
> thanks
> john

Re: client size graph resize [message #865964 is a reply to message #865909]

Mon, 30 April 2012 13:11

Eclipse User

Jason,

I have created a method in a java file. in the action class i call that method and build the graph passing in parameters, whch allows me to run it dynamically. it then saves it within my application as a .rptdesign. from there i can call it in the jsp as i mentioned above. here is a cleaned out version of how i am building the graph using the API:

public class ChartBuildAction {
static Logger log = Logger.getLogger(ChartBuildAction.class);
ReportDesignHandle reportDesignHandle = null;
ElementFactory elementFactory = null;
IMetaDataDictionary dict = null;
ComputedColumn cs1, cs2 = null;
public static void main( String[] args ) throws SemanticException, IOException{
String save = "";
String key = "";
new ChartBuildAction( ).createReport(save, key,0,0,0,0,0,0,0);
Platform.shutdown();
log.debug("Finished");
}

public void createReport(String saveClause, String keyword, int num1, int num2, int num3, int num4, int num5, int num6, int num7) throws SemanticException, IOException
{
DesignConfig config = new DesignConfig( );
IDesignEngine engine = null;
try{
Platform.startup( config );
IDesignEngineFactory factory = (IDesignEngineFactory) Platform.createFactoryObject( IDesignEngineFactory.EXTENSION_DESIGN_ENGINE_FACTORY );
engine = factory.createDesignEngine( config );
}catch( Exception ex){
ex.printStackTrace();
}
SessionHandle session = engine.newSessionHandle( ULocale.ENGLISH ) ;
// Create a new report
reportDesignHandle = session.createDesign( );

// Element factory is used to create instances of BIRT elements.
elementFactory = reportDesignHandle.getElementFactory( );
dict = new DesignEngine( null ).getMetaData( );
createDataSources( );
createDataSets(keyword, num1, num2, num3, num4, num5, num6, num7 );
createStyles( );
createBody(keyword );
reportDesignHandle.saveAs( saveClause + "/smallChart.rptdesign" );//$NON-NLS-1$//$NON-NLS-2
}

private void createStyles( ) throws SemanticException{
StyleHandle labelStyle = elementFactory.newStyle( "Label" );//$NON-NLS-1$
labelStyle.setProperty( StyleHandle.FONT_WEIGHT_PROP,DesignChoiceConstants.FONT_WEIGHT_BOLD );
labelStyle.setProperty( StyleHandle.FONT_FAMILY_PROP, "Arial Black" );//$NON-NLS-1$
labelStyle.setProperty( StyleHandle.COLOR_PROP, "#FFFFFF" );//$NON-NLS-1$

StyleHandle dataStyle = elementFactory.newStyle( "Data" );//$NON-NLS-1$
dataStyle.setProperty( StyleHandle.FONT_WEIGHT_PROP,DesignChoiceConstants.FONT_WEIGHT_BOLD );
dataStyle.setProperty( StyleHandle.FONT_FAMILY_PROP, "Century" );//$NON-NLS-1$
dataStyle.setProperty( StyleHandle.COLOR_PROP, "#009B9B" );//$NON-NLS-1$

reportDesignHandle.getStyles( ).add( labelStyle );
reportDesignHandle.getStyles( ).add( dataStyle );
}
private void createBody(String keyword ) throws SemanticException
{
reportDesignHandle.getBody( ).add( createPieChart(keyword ) );
}
private ExtendedItemHandle createPieChart(String keyword){
ExtendedItemHandle eih = elementFactory.newExtendedItem("tinyChart", "Chart" );//$NON-NLS-1$
try
{
eih.setName("tinyChart");
eih.setHeight( "240pt" );//$NON-NLS-1$ used to be 235pt
eih.setWidth( "425pt" );//$NON-NLS-1$ used to be 420pt
eih.setProperty( ExtendedItemHandle.DATA_SET_PROP, "Data Set" );//$NON-NLS-1$
PropertyHandle computedSet = eih.getColumnBindings( );
cs1.setExpression( "dataSetRow[\"Name\"]" );//$NON-NLS-1$
computedSet.addItem( cs1 );
cs2.setExpression( "dataSetRow[\"Amount\"]" );//$NON-NLS-1$
computedSet.addItem( cs2 );
}
catch ( SemanticException e )
{
e.printStackTrace( );
}
ChartWithoutAxes cwoaPie = ChartWithoutAxesImpl.create( );
cwoaPie.setType( "Pie Chart" );//$NON-NLS-1$
cwoaPie.setSubType( "Standard Pie Chart" );//$NON-NLS-1$
cwoaPie.setDimension(ChartDimension.TWO_DIMENSIONAL_LITERAL);

cwoaPie.getPlot().getClientArea().getOutline().setVisible(false);
cwoaPie.getTitle( ).setVisible( true );
cwoaPie.getTitle().getLabel().getCaption().getFont().setSize(14);
cwoaPie.getTitle().getLabel().getCaption().setValue("SNAP");

cwoaPie.getBlock( ).setBounds( BoundsImpl.create( 0, 0, 500, 240 ) ); //DO NOT DELETE!!!!!!
cwoaPie.getBlock( ).setBackground( GradientImpl.create( ColorDefinitionImpl.create( 197, 217, 224 ),ColorDefinitionImpl.create( 255,255,255 ),-30,false ) );
cwoaPie.getPlot( ).getClientArea( ).setBackground( ColorDefinitionImpl.TRANSPARENT( ) );
Legend chartLeg = cwoaPie.getLegend();
chartLeg.getClientArea().getOutline().setVisible(false);
chartLeg.setOrientation(Orientation.HORIZONTAL_LITERAL);
chartLeg.getText().getFont().setWordWrap(true);
chartLeg.getText().getFont().setSize(8);
chartLeg.setPosition(Position.BELOW_LITERAL);
if(keyword.contains("MA")){
chartLeg.getInsets().setLeft( -2 );
chartLeg.getInsets().setRight( 10 );
}else{
chartLeg.getInsets().setLeft( -2 );
chartLeg.getInsets().setRight( -2 );
}
chartLeg.getInsets().setBottom( -2 );
chartLeg.getInsets().setTop(-2);

chartLeg.setBackground( ColorDefinitionImpl.TRANSPARENT( ) );

SampleData sd = DataFactory.eINSTANCE.createSampleData( );
BaseSampleData sdBase = DataFactory.eINSTANCE.createBaseSampleData( );
sdBase.setDataSetRepresentation( "Category-A, Category-B" );//$NON-NLS-1$
sd.getBaseSampleData( ).add( sdBase );

OrthogonalSampleData sdOrthogonal = DataFactory.eINSTANCE.createOrthogonalSampleData( );
sdOrthogonal.setDataSetRepresentation( "4,12" );//$NON-NLS-1$
sdOrthogonal.setSeriesDefinitionIndex( 0 );
sd.getOrthogonalSampleData( ).add( sdOrthogonal );
cwoaPie.setSampleData( sd );

Series seCategory = SeriesImpl.create( );

Query query = QueryImpl.create( "row[\"Name\"]" );//$NON-NLS-1$
seCategory.getDataDefinition( ).add( query );

SeriesDefinition series = SeriesDefinitionImpl.create( );
series.getSeries( ).add( seCategory );
cwoaPie.getSeriesDefinitions( ).add( series );
PieSeries ps = (PieSeries) PieSeriesImpl.create( );

ps.setExplosion(4);
Query query2 = QueryImpl.create( "row[\"Amount\"]" );//$NON-NLS-1$
ps.getDataDefinition( ).add( query2 );
ps.setSliceOutline(ColorDefinitionImpl.BLACK());

cwoaPie.setScript(
"var allnull = true;"+
"function afterDataSetFilled( series, dataSet, icsc ){"+
"if( series.getSeriesIdentifier() == '' ){"+
"var list = dataSet.getValues();"+
"for(i=0;i<list.length;i++){"+
"if( list[i] > 0 && list[i] != null){"+
"allnull = false;"+
"}}}}"+

"function beforeRendering( gcs, icsc ){"+
"var chart = gcs.getChartModel();"+
"if( allnull ){"+
"chart.getPlot().setVisible(false);"+
"var svheight = chart.getPlot().getBounds().getHeight();"+
"var svwidth = chart.getPlot().getBounds().getWidth();"+
"chart.getPlot().getBounds().setHeight(0);"+
"chart.getPlot().getBounds().setWidth(0);"+
"chart.getTitle().getBounds().setHeight(svheight);"+
"chart.getTitle().getBounds().setWidth(svwidth);"+
"}}"+

"function beforeGeneration( cm, icsc ){"+
"if( allnull ){" +
"cm.getPlot().getOutline().setVisible(true);"+
"cm.getTitle().getLabel().getCaption().setValue('There is No Data to Display');"+
"}}"+

"function beforeDrawDataPointLabel( dph, label, icsc ){"+
"if( label.getCaption().getValue() == '0%' ){"+
"label.setVisible(false);"+
"}}"
);

cwoaPie.getTitle().getLabel().getCaption().getFont().setName("Arial");
cwoaPie.getTitle().getLabel().getCaption().setColor(ColorDefinitionImpl.create(6, 55, 95));
cwoaPie.getTitle().getLabel().getCaption().getFont().setWordWrap(true);
ps.getLabel().getCaption().getFont().setSize(9);
ps.getLabel().getCaption().getFont().setBold(true);
ps.getLabel().getCaption().setColor(ColorDefinitionImpl.BLACK());

SeriesDefinition seGroup = SeriesDefinitionImpl.create( );
series.getSeriesDefinitions( ).add( seGroup );
seGroup.getSeries( ).add( ps );

series.getSeriesPalette().getEntries( ).clear( );
series.getSeriesPalette().getEntries().add( ColorDefinitionImpl.create(117,168,250));
series.getSeriesPalette().getEntries().add( ColorDefinitionImpl.create(243,239,100));
series.getSeriesPalette().getEntries().add( ColorDefinitionImpl.create(255,100,100));
series.getSeriesPalette().getEntries().add( ColorDefinitionImpl.create(102,229,142));
series.getSeriesPalette().getEntries().add( ColorDefinitionImpl.create(204,243,255));
series.getSeriesPalette().getEntries().add( ColorDefinitionImpl.create(249,188,236));
series.getSeriesPalette().getEntries().add( ColorDefinitionImpl.create(255,191,0));

DataPointComponent dpc = DataPointComponentImpl.create( DataPointComponentType.PERCENTILE_ORTHOGONAL_VALUE_LITERAL,JavaNumberFormatSpecifierImpl.create( "##%") );//$NON-NLS-1$
ps.getDataPoint( ).getComponents( ).clear( );
ps.getDataPoint( ).getComponents( ).add( dpc );
ps.getLeaderLineAttributes().setVisible(false);
ps.setLabelPosition(Position.INSIDE_LITERAL);

Trigger mouseOver = TriggerImpl.create(TriggerCondition.ONMOUSEOVER_LITERAL,
ActionImpl.create(ActionType.SHOW_TOOLTIP_LITERAL,
TooltipValueImpl.create(150, null)));
ps.getTriggers().add(mouseOver);
try
{
//Add chart instance to IReportItem
eih.getReportItem( ).setProperty( "chart.instance", cwoaPie );//$NON-NLS-1$
}
catch ( ExtendedElementException e )
{
e.printStackTrace( );
}
return eih;
}
private void createDataSources( ) throws SemanticException
{
ScriptDataSourceHandle dataSourceHandle = elementFactory.newScriptDataSource( "Data Source" );//$NON-NLS-1$
reportDesignHandle.getDataSources( ).add( dataSourceHandle );
}
private void createDataSets(String keyword, int num1, int num2, int num3, int num4, int num5, int num6, int num7 ) throws SemanticException
{
if(num1 <= 0){num1 = 0;}
if(num2 <= 0){num2 = 0;}
if(num3 <= 0){num3 = 0;}
if(num4 <= 0){num4 = 0;}
if(num5 <= 0){num5 = 0;}
if(num6 <= 0){num6 = 0;}
if(num7 <= 0){num7 = 0;}
ScriptDataSetHandle dataSetHandle = elementFactory.newScriptDataSet( "Data Set" );//$NON-NLS-1$
dataSetHandle.setDataSource( "Data Source" );//$NON-NLS-1$
int endNum = 0;
endNum = 7;
dataSetHandle.setOpen( "i=0;"//$NON-NLS-1$
+ "sourcedata = new Array( new Array(2), new Array(2), new Array(2), "//$NON-NLS-1$
+ "new Array(2), new Array(2), new Array(2), new Array(2));"//$NON-NLS-1$
+ "sourcedata[0][0] = \"Pending > 90 Days\";"//$NON-NLS-1$
+ "sourcedata[0][1] = "+num1+";"//$NON-NLS-1$

+ "sourcedata[1][0] = \"Pending > 60 Days\";"//$NON-NLS-1$
+ "sourcedata[1][1] = "+num2+";"//$NON-NLS-1$

+ "sourcedata[2][0] = \"Pending > 45 Days\";"//$NON-NLS-1$
+ "sourcedata[2][1] = "+num3+";"//$NON-NLS-1$

+ "sourcedata[3][0] = \"Pending > 30 Days\";"//$NON-NLS-1$
+ "sourcedata[3][1] = "+num4+";"//$NON-NLS-1$

+ "sourcedata[4][0] = \"Pending < 30 Days\";"//$NON-NLS-1$
+ "sourcedata[4][1] = "+num5+";"//$NON-NLS-1$

+ "sourcedata[5][0] = \"Active No Action\";"//$NON-NLS-1$
+ "sourcedata[5][1] = "+num6+";"//$NON-NLS-1$

+ "sourcedata[6][0] = \"Active Needs Action\";"//$NON-NLS-1$
+ "sourcedata[6][1] = "+num7+";" );//$NON-NLS-1$

};

dataSetHandle.setFetch( "if ( i < "+ endNum +" ){"//$NON-NLS-1$
+ "row[\"Name\"] = sourcedata[i][0];"//$NON-NLS-1$
+ "row[\"Amount\"] = sourcedata[i][1];"//$NON-NLS-1$
+ "i++;"//$NON-NLS-1$
+ "return true;}" + "else return false;" );//$NON-NLS-1$//$NON-NLS-2$
cs1 = StructureFactory.createComputedColumn( );
cs1.setName( "Name" );//$NON-NLS-1$
cs1.setExpression( "row[\"Name\"]" );//$NON-NLS-1$
cs1.setDataType( "string" );//$NON-NLS-1$
cs2 = StructureFactory.createComputedColumn( );
cs2.setName( "Amount" );//$NON-NLS-1$
cs2.setExpression( "row[\"Amount\"]" );//$NON-NLS-1$
cs2.setDataType( "integer" );//$NON-NLS-1$
PropertyHandle computedSet = dataSetHandle.getPropertyHandle(
ScriptDataSetHandle.COMPUTED_COLUMNS_PROP );
computedSet.addItem( cs1 );
computedSet.addItem( cs2 );
reportDesignHandle.getDataSets( ).add( dataSetHandle );
}
}

Re: client size graph resize [message #867931 is a reply to message #865964]

Tue, 01 May 2012 10:57

Eclipse User

When you create the chart and have the extended item handle just set the
bookmark on it like:

eih.setBookmark("\"MyChart\"");

Jason

On 4/30/2012 1:11 PM, Missing name Mising name wrote:
> Jason,
>
> I have created a method in a java file. in the action class i call that
> method and build the graph passing in parameters, whch allows me to run
> it dynamically. it then saves it within my application as a .rptdesign.
> from there i can call it in the jsp as i mentioned above. here is a
> cleaned out version of how i am building the graph using the API:
>
>
> public class ChartBuildAction {
> static Logger log = Logger.getLogger(ChartBuildAction.class);
> ReportDesignHandle reportDesignHandle = null;
> ElementFactory elementFactory = null;
> IMetaDataDictionary dict = null;
> ComputedColumn cs1, cs2 = null;
> public static void main( String[] args ) throws SemanticException,
> IOException{
> String save = "";
> String key = "";
> new ChartBuildAction( ).createReport(save, key,0,0,0,0,0,0,0);
> Platform.shutdown();
> log.debug("Finished");
> }
>
> public void createReport(String saveClause, String keyword, int num1,
> int num2, int num3, int num4, int num5, int num6, int num7) throws
> SemanticException, IOException
> {
> DesignConfig config = new DesignConfig( );
> IDesignEngine engine = null;
> try{
> Platform.startup( config );
> IDesignEngineFactory factory = (IDesignEngineFactory)
> Platform.createFactoryObject(
> IDesignEngineFactory.EXTENSION_DESIGN_ENGINE_FACTORY );
> engine = factory.createDesignEngine( config );
> }catch( Exception ex){
> ex.printStackTrace();
> } SessionHandle session = engine.newSessionHandle( ULocale.ENGLISH ) ;
> // Create a new report
> reportDesignHandle = session.createDesign( );
>
> // Element factory is used to create instances of BIRT elements.
> elementFactory = reportDesignHandle.getElementFactory( );
> dict = new DesignEngine( null ).getMetaData( );
> createDataSources( );
> createDataSets(keyword, num1, num2, num3, num4, num5, num6, num7 );
> createStyles( );
> createBody(keyword );
> reportDesignHandle.saveAs( saveClause + "/smallChart.rptdesign"
> );//$NON-NLS-1$//$NON-NLS-2
> }
>
> private void createStyles( ) throws SemanticException{
> StyleHandle labelStyle = elementFactory.newStyle( "Label" );//$NON-NLS-1$
> labelStyle.setProperty(
> StyleHandle.FONT_WEIGHT_PROP,DesignChoiceConstants.FONT_WEIGHT_BOLD );
> labelStyle.setProperty( StyleHandle.FONT_FAMILY_PROP, "Arial Black"
> );//$NON-NLS-1$
> labelStyle.setProperty( StyleHandle.COLOR_PROP, "#FFFFFF" );//$NON-NLS-1$
>
> StyleHandle dataStyle = elementFactory.newStyle( "Data" );//$NON-NLS-1$
> dataStyle.setProperty(
> StyleHandle.FONT_WEIGHT_PROP,DesignChoiceConstants.FONT_WEIGHT_BOLD );
> dataStyle.setProperty( StyleHandle.FONT_FAMILY_PROP, "Century"
> );//$NON-NLS-1$
> dataStyle.setProperty( StyleHandle.COLOR_PROP, "#009B9B" );//$NON-NLS-1$
>
> reportDesignHandle.getStyles( ).add( labelStyle );
> reportDesignHandle.getStyles( ).add( dataStyle );
> }
> private void createBody(String keyword ) throws SemanticException
> {
> reportDesignHandle.getBody( ).add( createPieChart(keyword ) );
> }
> private ExtendedItemHandle createPieChart(String keyword){
> ExtendedItemHandle eih = elementFactory.newExtendedItem("tinyChart",
> "Chart" );//$NON-NLS-1$
> try
> {
> eih.setName("tinyChart");
> eih.setHeight( "240pt" );//$NON-NLS-1$ used to be 235pt
> eih.setWidth( "425pt" );//$NON-NLS-1$ used to be 420pt
> eih.setProperty( ExtendedItemHandle.DATA_SET_PROP, "Data Set"
> );//$NON-NLS-1$
> PropertyHandle computedSet = eih.getColumnBindings( );
> cs1.setExpression( "dataSetRow[\"Name\"]" );//$NON-NLS-1$
> computedSet.addItem( cs1 );
> cs2.setExpression( "dataSetRow[\"Amount\"]" );//$NON-NLS-1$
> computedSet.addItem( cs2 );
> }
> catch ( SemanticException e )
> {
> e.printStackTrace( );
> }
> ChartWithoutAxes cwoaPie = ChartWithoutAxesImpl.create( );
> cwoaPie.setType( "Pie Chart" );//$NON-NLS-1$
> cwoaPie.setSubType( "Standard Pie Chart" );//$NON-NLS-1$
> cwoaPie.setDimension(ChartDimension.TWO_DIMENSIONAL_LITERAL);
>
> cwoaPie.getPlot().getClientArea().getOutline().setVisible(false);
> cwoaPie.getTitle( ).setVisible( true );
> cwoaPie.getTitle().getLabel().getCaption().getFont().setSize(14);
> cwoaPie.getTitle().getLabel().getCaption().setValue("SNAP");
>
> cwoaPie.getBlock( ).setBounds( BoundsImpl.create( 0, 0, 500, 240 ) );
> //DO NOT DELETE!!!!!!
> cwoaPie.getBlock( ).setBackground( GradientImpl.create(
> ColorDefinitionImpl.create( 197, 217, 224 ),ColorDefinitionImpl.create(
> 255,255,255 ),-30,false ) );
> cwoaPie.getPlot( ).getClientArea( ).setBackground(
> ColorDefinitionImpl.TRANSPARENT( ) );
> Legend chartLeg = cwoaPie.getLegend();
> chartLeg.getClientArea().getOutline().setVisible(false);
> chartLeg.setOrientation(Orientation.HORIZONTAL_LITERAL);
> chartLeg.getText().getFont().setWordWrap(true);
> chartLeg.getText().getFont().setSize(8);
> chartLeg.setPosition(Position.BELOW_LITERAL);
> if(keyword.contains("MA")){
> chartLeg.getInsets().setLeft( -2 );
> chartLeg.getInsets().setRight( 10 );
> }else{
> chartLeg.getInsets().setLeft( -2 );
> chartLeg.getInsets().setRight( -2 );
> }
> chartLeg.getInsets().setBottom( -2 );
> chartLeg.getInsets().setTop(-2);
>
> chartLeg.setBackground( ColorDefinitionImpl.TRANSPARENT( ) );
>
> SampleData sd = DataFactory.eINSTANCE.createSampleData( );
> BaseSampleData sdBase = DataFactory.eINSTANCE.createBaseSampleData( );
> sdBase.setDataSetRepresentation( "Category-A, Category-B" );//$NON-NLS-1$
> sd.getBaseSampleData( ).add( sdBase );
>
> OrthogonalSampleData sdOrthogonal =
> DataFactory.eINSTANCE.createOrthogonalSampleData( );
> sdOrthogonal.setDataSetRepresentation( "4,12" );//$NON-NLS-1$
> sdOrthogonal.setSeriesDefinitionIndex( 0 );
> sd.getOrthogonalSampleData( ).add( sdOrthogonal );
> cwoaPie.setSampleData( sd );
>
> Series seCategory = SeriesImpl.create( );
>
> Query query = QueryImpl.create( "row[\"Name\"]" );//$NON-NLS-1$
> seCategory.getDataDefinition( ).add( query );
>
> SeriesDefinition series = SeriesDefinitionImpl.create( );
> series.getSeries( ).add( seCategory );
> cwoaPie.getSeriesDefinitions( ).add( series );
> PieSeries ps = (PieSeries) PieSeriesImpl.create( );
>
> ps.setExplosion(4);
> Query query2 = QueryImpl.create( "row[\"Amount\"]" );//$NON-NLS-1$
> ps.getDataDefinition( ).add( query2 );
> ps.setSliceOutline(ColorDefinitionImpl.BLACK());
>
> cwoaPie.setScript(
> "var allnull = true;"+
> "function afterDataSetFilled( series, dataSet, icsc ){"+
> "if( series.getSeriesIdentifier() == '' ){"+
> "var list = dataSet.getValues();"+
> "for(i=0;i<list.length;i++){"+
> "if( list[i] > 0 && list[i] != null){"+
> "allnull = false;"+
> "}}}}"+
>
> "function beforeRendering( gcs, icsc ){"+
> "var chart = gcs.getChartModel();"+
> "if( allnull ){"+
> "chart.getPlot().setVisible(false);"+
> "var svheight = chart.getPlot().getBounds().getHeight();"+
> "var svwidth = chart.getPlot().getBounds().getWidth();"+
> "chart.getPlot().getBounds().setHeight(0);"+
> "chart.getPlot().getBounds().setWidth(0);"+
> "chart.getTitle().getBounds().setHeight(svheight);"+
> "chart.getTitle().getBounds().setWidth(svwidth);"+
> "}}"+
>
> "function beforeGeneration( cm, icsc ){"+ "if( allnull ){" +
> "cm.getPlot().getOutline().setVisible(true);"+
> "cm.getTitle().getLabel().getCaption().setValue('There is No Data to
> Display');"+
> "}}"+
>
> "function beforeDrawDataPointLabel( dph, label, icsc ){"+
> "if( label.getCaption().getValue() == '0%' ){"+
> "label.setVisible(false);"+
> "}}"
> );
>
> cwoaPie.getTitle().getLabel().getCaption().getFont().setName("Arial");
> cwoaPie.getTitle().getLabel().getCaption().setColor(ColorDefinitionImpl.create(6,
> 55, 95));
> cwoaPie.getTitle().getLabel().getCaption().getFont().setWordWrap(true);
> ps.getLabel().getCaption().getFont().setSize(9);
> ps.getLabel().getCaption().getFont().setBold(true);
> ps.getLabel().getCaption().setColor(ColorDefinitionImpl.BLACK());
>
> SeriesDefinition seGroup = SeriesDefinitionImpl.create( );
> series.getSeriesDefinitions( ).add( seGroup );
> seGroup.getSeries( ).add( ps );
>
> series.getSeriesPalette().getEntries( ).clear( );
> series.getSeriesPalette().getEntries().add(
> ColorDefinitionImpl.create(117,168,250));
> series.getSeriesPalette().getEntries().add(
> ColorDefinitionImpl.create(243,239,100));
> series.getSeriesPalette().getEntries().add(
> ColorDefinitionImpl.create(255,100,100));
> series.getSeriesPalette().getEntries().add(
> ColorDefinitionImpl.create(102,229,142));
> series.getSeriesPalette().getEntries().add(
> ColorDefinitionImpl.create(204,243,255));
> series.getSeriesPalette().getEntries().add(
> ColorDefinitionImpl.create(249,188,236));
> series.getSeriesPalette().getEntries().add(
> ColorDefinitionImpl.create(255,191,0));
>
> DataPointComponent dpc = DataPointComponentImpl.create(
> DataPointComponentType.PERCENTILE_ORTHOGONAL_VALUE_LITERAL,JavaNumberFormatSpecifierImpl.create(
> "##%") );//$NON-NLS-1$
> ps.getDataPoint( ).getComponents( ).clear( );
> ps.getDataPoint( ).getComponents( ).add( dpc );
> ps.getLeaderLineAttributes().setVisible(false);
> ps.setLabelPosition(Position.INSIDE_LITERAL);
>
> Trigger mouseOver =
> TriggerImpl.create(TriggerCondition.ONMOUSEOVER_LITERAL,
> ActionImpl.create(ActionType.SHOW_TOOLTIP_LITERAL,
> TooltipValueImpl.create(150, null)));
> ps.getTriggers().add(mouseOver); try
> {
> //Add chart instance to IReportItem
> eih.getReportItem( ).setProperty( "chart.instance", cwoaPie );//$NON-NLS-1$
> }
> catch ( ExtendedElementException e )
> {
> e.printStackTrace( );
> }
> return eih;
> }
> private void createDataSources( ) throws SemanticException
> {
> ScriptDataSourceHandle dataSourceHandle =
> elementFactory.newScriptDataSource( "Data Source" );//$NON-NLS-1$
> reportDesignHandle.getDataSources( ).add( dataSourceHandle );
> }
> private void createDataSets(String keyword, int num1, int num2, int
> num3, int num4, int num5, int num6, int num7 ) throws SemanticException
> {
> if(num1 <= 0){num1 = 0;}
> if(num2 <= 0){num2 = 0;}
> if(num3 <= 0){num3 = 0;}
> if(num4 <= 0){num4 = 0;}
> if(num5 <= 0){num5 = 0;}
> if(num6 <= 0){num6 = 0;}
> if(num7 <= 0){num7 = 0;}
> ScriptDataSetHandle dataSetHandle = elementFactory.newScriptDataSet(
> "Data Set" );//$NON-NLS-1$
> dataSetHandle.setDataSource( "Data Source" );//$NON-NLS-1$
> int endNum = 0;
> endNum = 7;
> dataSetHandle.setOpen( "i=0;"//$NON-NLS-1$
> + "sourcedata = new Array( new Array(2), new Array(2), new Array(2),
> "//$NON-NLS-1$
> + "new Array(2), new Array(2), new Array(2), new Array(2));"//$NON-NLS-1$
> + "sourcedata[0][0] = \"Pending > 90 Days\";"//$NON-NLS-1$
> + "sourcedata[0][1] = "+num1+";"//$NON-NLS-1$
>
> + "sourcedata[1][0] = \"Pending > 60 Days\";"//$NON-NLS-1$
> + "sourcedata[1][1] = "+num2+";"//$NON-NLS-1$
>
> + "sourcedata[2][0] = \"Pending > 45 Days\";"//$NON-NLS-1$
> + "sourcedata[2][1] = "+num3+";"//$NON-NLS-1$
>
> + "sourcedata[3][0] = \"Pending > 30 Days\";"//$NON-NLS-1$
> + "sourcedata[3][1] = "+num4+";"//$NON-NLS-1$
>
> + "sourcedata[4][0] = \"Pending < 30 Days\";"//$NON-NLS-1$
> + "sourcedata[4][1] = "+num5+";"//$NON-NLS-1$
>
> + "sourcedata[5][0] = \"Active No Action\";"//$NON-NLS-1$
> + "sourcedata[5][1] = "+num6+";"//$NON-NLS-1$
>
> + "sourcedata[6][0] = \"Active Needs Action\";"//$NON-NLS-1$
> + "sourcedata[6][1] = "+num7+";" );//$NON-NLS-1$
>
> };
>
> dataSetHandle.setFetch( "if ( i < "+ endNum +" ){"//$NON-NLS-1$
> + "row[\"Name\"] = sourcedata[i][0];"//$NON-NLS-1$
> + "row[\"Amount\"] = sourcedata[i][1];"//$NON-NLS-1$
> + "i++;"//$NON-NLS-1$
> + "return true;}" + "else return false;" );//$NON-NLS-1$//$NON-NLS-2$
> cs1 = StructureFactory.createComputedColumn( );
> cs1.setName( "Name" );//$NON-NLS-1$
> cs1.setExpression( "row[\"Name\"]" );//$NON-NLS-1$
> cs1.setDataType( "string" );//$NON-NLS-1$
> cs2 = StructureFactory.createComputedColumn( );
> cs2.setName( "Amount" );//$NON-NLS-1$
> cs2.setExpression( "row[\"Amount\"]" );//$NON-NLS-1$
> cs2.setDataType( "integer" );//$NON-NLS-1$
> PropertyHandle computedSet = dataSetHandle.getPropertyHandle(
> ScriptDataSetHandle.COMPUTED_COLUMNS_PROP );
> computedSet.addItem( cs1 );
> computedSet.addItem( cs2 );
> reportDesignHandle.getDataSets( ).add( dataSetHandle );
> }
> }

Re: client size graph resize [message #868009 is a reply to message #867931]

Tue, 01 May 2012 11:45

Eclipse User

Jason,

I am still unable to grab img after setting the bookmark and attempteding to use getElementByID. It claims that there is no object. I noticed earlier you had said doing this would cause the HTML to look like this:

<img id="testchart"
src="/viewer/preview?__sessionId=20120427_174940_821&__imageid=custom834c87136f5c7e8361.png"
alt="" style=" width: 427.5pt; height: 262.5pt;display: block;"></img>

this is in the case that the bookmark is set as "testchart". I am getting a different output than the <img> tags, i am getting the following (even after setting the bookmark as "birtGraph"):

<div id="params_blah" style='display:none'>
</div>
<form id="form_blah" method="post"></form>
<script type="text/javascript">
function loadViewerblah(){
var formObj = document.getElementById( "form_blah" );
var paramContainer = document.getElementById("params_blah");
var oParams = paramContainer.getElementsByTagName('input');
if( oParams )
{
for( var i=0;i<oParams.length;i++ )
{
var param = document.createElement( "INPUT" );
param.type = "HIDDEN";
param.name= oParams[i].name;
param.value= oParams[i].value;
formObj.appendChild( param );
}
}
formObj.action = "/progname/preview?__report=smallChart.rptdesign&__masterpage=true&__format=html";
formObj.target = "blah";
formObj.submit( );
}
</script>
<iframe name="blah" frameborder="no" scrolling = "auto" style='height:250px;width:444px;' ></iframe>
<script type="text/javascript">loadViewerblah();</script>

<script type="text/javascript">
function chartGrow(){
var x = document.getElementsByTagName("iframe");
x[0].style.height = 500 + "px";
x[0].style.width = 888 + "px";
var graph = document.getElementById("birtGraph");
alert("offsetHeight = " + graph.offsetHeight);

}

Re: client size graph resize [message #868064 is a reply to message #868009]

Tue, 01 May 2012 12:19

Eclipse User

Can you try and add reportContainer=div to your birt report tag?

Jason

On 5/1/2012 11:45 AM, Missing name Mising name wrote:
> Jason,
>
> I am still unable to grab img after setting the bookmark and
> attempteding to use getElementByID. It claims that there is no object. I
> noticed earlier you had said doing this would cause the HTML to look
> like this:
>
> <img id="testchart"
> src="/viewer/preview?__sessionId=20120427_174940_821&__imageid=custom834c87136f5c7e8361.png"
> alt="" style=" width: 427.5pt; height: 262.5pt;display: block;"></img>
>
> this is in the case that the bookmark is set as "testchart". I am
> getting a different output than the <img> tags, i am getting the
> following (even after setting the bookmark as "birtGraph"):
>
> <div id="params_blah" style='display:none'>
> </div>
> <form id="form_blah" method="post"></form>
> <script type="text/javascript">
> function loadViewerblah(){
> var formObj = document.getElementById( "form_blah" );
> var paramContainer = document.getElementById("params_blah");
> var oParams = paramContainer.getElementsByTagName('input');
> if( oParams )
> {
> for( var i=0;i<oParams.length;i++ ) {
> var param = document.createElement( "INPUT" );
> param.type = "HIDDEN";
> param.name= oParams[i].name;
> param.value= oParams[i].value;
> formObj.appendChild( param );
> }
> }
> formObj.action =
> "/progname/preview?__report=smallChart.rptdesign&__masterpage=true&__format=html";
>
> formObj.target = "blah";
> formObj.submit( );
> }
> </script>
> <iframe name="blah" frameborder="no" scrolling = "auto"
> style='height:250px;width:444px;' ></iframe>
> <script type="text/javascript">loadViewerblah();</script>
>
>
> <script type="text/javascript">
> function chartGrow(){
> var x = document.getElementsByTagName("iframe");
> x[0].style.height = 500 + "px";
> x[0].style.width = 888 + "px";
> var graph = document.getElementById("birtGraph");
> alert("offsetHeight = " + graph.offsetHeight);
>
> }
>

Re: client size graph resize [message #868141 is a reply to message #868064]

Tue, 01 May 2012 13:10

Eclipse User

Jason,

adding the "reportContainer" tag allowed me to grab both the viewer and the image using getElementByID and the resizing worked as well.

thanks for all your help
john

Re: client size graph resize [message #868373 is a reply to message #868141]

Tue, 01 May 2012 16:54

Eclipse User

Jason,

as i mentioned before i am now able to grab both the image and the frame. The frame enlarges perfectly, however i am still having a slight issue with the image...

here is the JS function i am using:
function chartGrow(){
var x = document.getElementById("blah");
x.style.width = 850+"px";
x.style.height = 400+"px";
var graph = document.getElementById("birtGraph");
graph.style.width = 600+"pt";
graph.style.height = "auto";
}

this function works to enlarge the image, however, it only enlarges the graphics, the bounds of the image still remain the same, so it cuts off. for example the actual image does enlarge, however, the image frame (not the iframe, but the bounds of the actual image itself) stays the same, and the image cuts off halfway through the graph so you only see a portion of it. I believe it is enlargeing the image, but the size of the image is already pre-definied from inside my java class when i use "eih.setHeight()" and "eih.setWidth()". Its hard to describe, but after altering the size, i only see half my image, and the other half is cut off, as if the graphic is too big for the image, so instead of a full pie, im getting a half circle, and my legend is cut off as well.

is there any way that i can alter the eih.setHeight/width size settings using javascript or am i only able to enlarge the actual graphic, but not the image?

thanks,
john

Re: client size graph resize [message #869667 is a reply to message #868141]

Tue, 01 May 2012 16:54

Eclipse User

Re: client size graph resize [message #869669 is a reply to message #868373]

Tue, 01 May 2012 17:50

Eclipse User

Is the chart type an image or svg. Try png. Look at the attached
example report and run it.

Jason

On 5/1/2012 4:54 PM, Missing name Mising name wrote:
> Jason,
>
> as i mentioned before i am now able to grab both the image and the
> frame. The frame enlarges perfectly, however i am still having a slight
> issue with the image...
>
> here is the JS function i am using:
> function chartGrow(){
> var x = document.getElementById("blah");
> x.style.width = 850+"px";
> x.style.height = 400+"px";
> var graph = document.getElementById("birtGraph");
> graph.style.width = 600+"pt";
> graph.style.height = "auto";
> }
>
> this function works to enlarge the image, however, it only enlarges the
> graphics, the bounds of the image still remain the same, so it cuts off.
> for example the actual image does enlarge, however, the image frame (not
> the iframe, but the bounds of the actual image itself) stays the same,
> and the image cuts off halfway through the graph so you only see a
> portion of it. I believe it is enlargeing the image, but the size of the
> image is already pre-definied from inside my java class when i use
> "eih.setHeight()" and "eih.setWidth()". Its hard to describe, but after
> altering the size, i only see half my image, and the other half is cut
> off, as if the graphic is too big for the image, so instead of a full
> pie, im getting a half circle, and my legend is cut off as well.
>
> is there any way that i can alter the eih.setHeight/width size settings
> using javascript or am i only able to enlarge the actual graphic, but
> not the image?
>
> thanks,
> john

Attachment: resizeimage.zip
(Size: 5.08KB, Downloaded 304 times)

Previous Topic:	Bar chart x-axis labels
Next Topic:	[PROBLEM] Viewer to PDF.

Goto Forum:

-=] Back to Top [=-

Current Time: Mon May 12 15:59:09 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter