Results 1 to 5 of 5

Thread: Chart extension - How to print in all browsers!

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jul 2009
    Vote Rating

    Default Chart extension - How to print in all browsers!

    Hi All!

    If you have used the Chart component You may have noticed that it can not be printed - at least in Safari and Firefox. So, the Flash component does not provide a nice way of printing.

    The main idea is, that the browser can print a picture, so the image has to be obtained from the chart somehow.

    The first thing is to notice that the flash chart component is the open-flash-chart from :

    After some reading, we can see that the component provide two ways for getting the image:

    1. ) the "post_image(...)" function as described at: - this posts the image at the wanted url. As this solution post does not work properly, meaning that we don't get any notification when it is posted (actually there is a solution, however for a bug in flash it does not get fired).

    2.) the "get_img_binary()" this retrieves the image data, and it can be used to write it back to the browser through JavaScript as at: unfortunately this method does not work in all cases - for IE (Implemented just recently), we may need a solution that works in all cases. The post provides a sample to this.

    To show the workings, I have changed a bit the "Advanced Chart" exaple (, and this you can implement in your local workspace.

    In the sample please change the "Chart" to "ChartWSave" in class "AdvancedChartExample" so it would look like this:

    		String url = !Examples.isExplorer() ? "../../" : "";
    		url += "gxt/chart/open-flash-chart.swf";
    		final ChartWSave chart = new ChartWSave(url);
    the class is :

    package com.extjs.gxt.samples.client.examples.chart;
    public class ChartWSave extends Chart {
    	public ChartWSave(String url) {
    	public String getImgBinary() {
    		return getImgBinary(swfElement);
    	private native String getImgBinary(Element e) /*-{
    		return e.get_img_binary();
    You can see, how "much" work we needed to get it done.

    Next, in class "AdvancedChartExample", put the following code:

    		Button printButton = new Button("Print Chart");
    		printButton.addSelectionListener(new SelectionListener<ButtonEvent>() {
    			public void componentSelected(ButtonEvent ce) {
    				String data = chart.getImgBinary();
    				// send it to the server...
    				SaveChartPictureServiceAsync service = GWT.create(SaveChartPictureService.class);
    				service.saveChartImage("name.png", data, new AsyncCallback<String>() {
    					public void onFailure(Throwable caught) {
    					public void onSuccess(String result) {
    						System.out.println("Success :" + result );
    						String url = GWT.getModuleBaseURL() + "/../name.png";
, "_blank", "");
    That implements an RPC call, sending the image data trough to server.

    Please, don't forget to add the "printButton" to the LayoutContainer.

    		bbar.add(printButton, new RowData(-1, -1, new Margins(0,10,0,10)));
    The interfaces describing This we handle by the following piece of code.

    Create the following interfaces on client side

    package com.extjs.gxt.samples.client;
    public interface SaveChartPictureService extends RemoteService {
    	String saveChartImage(String pictureName, String pictureData);
    package com.extjs.gxt.samples.client;
    public interface SaveChartPictureServiceAsync {
    	void saveChartImage(String pictureName, String pictureData, AsyncCallback<String> callback);
    and this one on server side:

    package com.extjs.gxt.samples.server;
    public class SaveChartPictureServiceImpl extends RemoteServiceServlet implements
    SaveChartPictureService {
    	public String saveChartImage(String pictureName, String pictureData) {
    		BASE64Decoder decoder = new BASE64Decoder();
    		try {
    			// decode the picture data
    			ByteBuffer decodedBytes = decoder.decodeBufferToByteBuffer(pictureData);
    			// create the output stream
    			FileOutputStream fos = new FileOutputStream(pictureName);
    			FileChannel channel = fos.getChannel();
    			// save the picture data.
    			while (decodedBytes.hasRemaining()) {
    		} catch (IOException e) {
    			return "could not save the picture";
    		String url = getServletContext().getRealPath(pictureName);
    		return "url of the picture saved: " + url;
    And don't forget to add this in the web.xml file

    And there you go.

    As this intends to be an example, there will be parts that you want to change to get it work exactly on the way you need it.

    However the changed files are attached, with their respective locations too.

    However I am
    Attached Files Attached Files

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts