Setting height and width of bar chart

techsavvy

Hi,

I have a requirement to accomodate 3-4 bar charts in a single jsp page.
I have integrated the bar charts with the UI,but the size of the charts displayed are too small since there should not be
scroll bars in the web page.
Hence,we have planned to magnify the individual chart in a new window on mouse click of the same.
I tried the following options but is not working out

1) Tried passing the parameters width and height for the same report design file using the 'DrillThrough' option of 'Hyperlink' interactivity.
But this could not set the chart(which is created using 'SVG' option) width and height.

2) Tried if the chart size can be altered locally in BIRT Viewer

Created the chart in 'PNG' format.Used the following code in the initialize method to get a copy of the chart.

var reportDesignHandle = reportContext.getReportRunnable().getDesignHandle();
var re = reportDesignHandle.findElement("NewChart");
var barChart = re.getReportItem().getProperty("chart.instance");
importPackage(Packages.org.eclipse.emf.ecore.util);
var chartCopy = EcoreUtil.copy(barChart);
chartCopy.getBlock().getBounds().setHeight(250); //
chartCopy.getBlock().getBounds().setWidth(150);//
var eih = reportDesignHandle.getElementFactory().newExtendedItem("dupChart", "Chart");
eih.getReportItem().setProperty("chart.instance", chartCopy);
eih.setBookmark(""Chart-" + """);
re.getContainerSlotHandle().add(eih);

(or)

var reportDesignHandle = reportContext.getReportRunnable().getDesignHandle();
var re = reportDesignHandle.findElement("NewChart");
var barChart = re.getReportItem().getProperty("chart.instance");
importPackage(Packages.org.eclipse.emf.ecore.util);
var chartCopy = EcoreUtil.copy(barChart);
var eih = reportDesignHandle.getElementFactory().newExtendedItem("dupChart", "Chart");
eih.getReportItem().setProperty("chart.instance", chartCopy);
eih.setBookmark(""Chart-" + """);
eih.setWidth(100);
eih.setHeight(100);
re.getContainerSlotHandle().add(eih);


Then,used 'Invoke Script' option in the 'Chart Area' interactivity to swap the original chart image with the enlarged image.


imageArray = new Array();
mainImageSrc = document.getElementById("Chart-Main").src;

currentImage = document.getElementById("Chart-" );

imageArray[0] = currentImage;
currentImage.style.display = "none";

function expImg()
{

mainImage = document.getElementById("Chart-Main");
mainImage.src = imageArray[0].src;
}

Though other changes like chartCopy.setUnitSpacing(10) gets reflected in the swapped image,height and width is not set.

Could you please tell if it is possible to change the height and width of bar chart on mouse click.


Thanks,
Kokila

mwilliams

Hi Kokila,

I'm not sure that the height and width can be changed on click or not. I haven't been able to achieve this so far.

The following works to change a chart's height and width in the beforeFactory of the report. So, if you could pass the parameters through on a drill through, you could change them with this.

chart = this.getReportElement("ChartName");
chart.setWidth("Width");
chart.setHeight("Height");