Exporting charts from a dashboard

Pentaho CTools

Version

10.2.x

Audience

anonymous

Part Number

MK-95PDIA006-12

In this walk-through tutorial, you will add an Export Chart button to export the bar chart from the demoDashboard CDE dashboard created in the Create a dashboard using RequireJS tutorial.

Open the demoDashboard in CDE.
(For detailed instructions, see Step 1 in Exporting Charts with CGG.)
Customize the layout for the export button.
1. In the Layout perspective, locate the mainContainerColumn column and add a row named exportChartRow.
2. Select the exportChartRow and add a column named exportChartObj.
3. Select the exportChartObj column and in the Properties pane, locate the Text Align property and set its value to Center.

Add and customize the export button.

In the Components perspective, in the left menu, expand the Others group and click on the Button Component.

In the Components pane, select the Button Component you just added. In the Properties pane, set the following values:

Property	Value
Name	`exportChart`
Label	`Export Chart`
HtmlObject	`exportChartObj`

Copy the following code to the Expression property:
```
function f() {
  this.dashboard
      .getComponentByName('render_chartComponent')
      .exportChart('png');
}
```
Note: This code allows you to retrieve the chartComponent component via the dashboard and execute its exportChart function by passing it the png parameter which defines the export file type as a PNG file.
When completed, the Properties pane should look similar to the image below.
In the Components perspective, press Shift G to display the Choose what charts to render as CGG popup. Make sure the chartComponent check box is selected, then click Close.
After saving the dashboard, return to Pentaho User Console, navigate to the Browse Files perspective and double-click the demoDashboard file. The following chart displays:
Press the Export Chart button to download the chart file as a PNG file.