Vaadin Chart: Customize Export / Printing Menu

Hello,

I’m testing the new chart component for Vaadin 6. (vaadin-chart 1.1.1)
There is the possibility of exports. But I have the impression that this is still rudimentary / beta.

I use the following code:


		Exporting export = new Exporting(true);
		export.setFilename("MyChart");
		...
		configuration.setExporting(export);

My questions:
Is there a way to configure the context menu, eg printing only and not to allow the export to JPEG?

export.setEnableImages (false);

seems to have no effect.


		ExportButton printButton = new ExportButton();
		printButton.setEnabled(true);
		export.setPrintButton(printButton);

		ExportButton exportButton = new ExportButton();
		exportButton.setEnabled(true);
		export.setExportButton(exportButton);

Again, this has no effect on the context menu. Instead, now appear two buttons which are only visible when you move your mouse over it. (see screenshot).

These new buttons can neither be labled nor have any functionality.

If one setEnabled(false) to the buttons, they disappear - but the context menu is still showing “Print” and “Download …”.
Therefore, they are obviously three different things (context menu, print Button, export Button)

Did I misunderstood these feature(s)? How to do it right?

Greetings
Erich

Hi,

Highcharts 3 (used by Vaadin Charts 1.1) replaced two buttons with “contextButton” (the menu), but apparently our API has not fully been updated at this part. I created a ticket about this:
http://dev.vaadin.com/ticket/12240

Instead of using those built it buttons I’d suggest to use the the server side API to generate charts:
https://vaadin.com/blog/-/blogs/vaadin-charts-export-from-browser-to-svg-and-pdf

Pros:

  • your chart don’t need to be sent thru Highcharts export server
  • complete control of e.g. the format of the exported image.
  • reuse the chart in properly formatted reports (who really wants to print/save just the chart?)

cheers,
matti

Hi Matti,

thanks for your answer.

Becausevof the pros, you mentioned, I will try to test the way you have described in the blog.

Cheers,
Erich

Please do not post multiple copies of the same question - it is against the forum rules as well as common netiquette.
Also, please do not post to old threads that are not exactly on the topic you are asking about. I asked the admin to remove your duplicate posts.

As for the question itself, you should read the threads you are posting to.
See here
(and other threads) for why it is usually a bad idea to try to export components to PDF and how to better export reports. That thread and this thread explain some ways to export charts. Exporting Tables is also addressed in many forum threads.

Hello,

could somebody provide an example how to remove or disable buttons from the context menu for Charts 3.1.0? I’m currently using the Vaadin Charts 3.1.0 and Vaadin 7.6.8 and unfortunately I cannot find enough information on this topic neither in the documentation nor on the forums. There is this setButtons method mentioned, but there is not a single example how to actually use it.

Regards,
mbe

Hi, are you refering to the hamburger export menu or the right click context menu?

Hi,
I mean the hamburger menu shown in the upper right corner.

Ok, thanks. If I remember correctly the export button is disabled by default. You can check all the demos in
http://demo.vaadin.com/charts/
and it’s not shown by default except for
ExportingExample
that sets an enabled Exporting instance to the chart configuration.

You can ensure it’s disabled with the following code:

        config.getExporting().setEnabled(false);

If you find an example where it’s enabled by default without setting Exporting to enabled can you post the code?

Hope this helps!

Thank you for the fast reply, but unfortunately this is not the information I am looking for. I don’t want to disable the whole context menu (export menu), which is indeed disabled by default, I want to remove or disable buttons from it. Is there a way to remove or disable the download as SVG button for example?

Regards,
mbe

Hello MBE.

What you want is to hide specific elements in the export context menu of chart. There is a way, using Lang class from charts.model:

[code]
ChartOptions opts = ChartOptions.get();

    Lang langpl = new Lang();      // com.vaadin.addon.charts.model.Lang;
    langpl.setPrintChart("Print this columns chart (or text you want)...");
    langpl.setDownloadPNG("Download in PNG");
    langpl.setDownloadJPEG("Download in JPEG");
    langpl.setDownloadPDF("Download in PDF");
    langpl.setDownloadSVG("");         // To disable SVG option, set empty text.
    langpl.setLoading("Loading the chart you request...");
    langpl.setNoData("Sorry, there is no data to show.");
    
    opts.setLang(langpl);

[/code]Copy/paste this code in class you are going to draw the chart (in constructor).

With Lang class you can define all those text you want to personalize. If you create many charts in one class, all these charts share the same configuration. If you want to define one configuration for each chart, you should copy/paste the above code and change it for each chart.

I expect resolve your answer :wink:

That looks great, I wasn’t aware that empty text would disable the option, thanks for sharing this!

Hi Alfa,
thank you very much for the detailed answer! It really solved my problem :slight_smile:

Best Regards,
mbe