Tutorial 15: Adding scripted HTML5 Chart controls to a BIRT design
In this tutorial, you add HTML buttons to a BIRT design that implement controls for an HTML5 chart in the BIRT design. You perform the following tasks:
*Add HTML buttons.
*Script the client chart controls.
*Script the client option controls.
*Test the scripts.
Task 1: Add HTML buttons
In this task, you preview a report called HTML5ChartWithHTMLButtons.rptdesign and create a grid of HTML buttons.
1 Open BIRT Designer Professional. In Navigator, navigate to and open HTML5ChartWithHTMLButtons.rptdesign.
2 Preview the report, as shown in Figure 17‑29.
Figure 17‑29 Previewing the HTML5 Chart report
3 Choose Layout to return to the layout editor.
4 Right-click the first cell of the table. Choose InsertGrid. On Insert Grid, set the Number of columns to 2 and Number of rows to 2, then choose OK. A new grid appears at the top of the table, as shown in Figure 17‑30.
Figure 17‑30 Inserting a grid
5 To create HTML buttons for the report, perform the following steps:
1 Right-click the first cell of the grid. Choose InsertHTML Button.
2 On HTML Button, type "Hide On Hold" into the value field.
3 Choose OK. If a warning message appears, choose OK.
6 Repeating the process of step 6, create an HTML button in the remaining empty cells of the grid with the values "Show On Hold", "Line Chart", and "Area Chart".
Task 2: Script the client chart controls
In this task, you add event handler scripts to HTML buttons that change the client chart series of the HTML5 chart.
1 Select the chart. In the property editor, open PropertiesBookmark. Set the bookmark value to "HTML5ChartBookmark" as shown in Figure 17‑31.
Figure 17‑31 Setting the chart bookmark property
2 Select the Hide On Hold HTML button and choose Script.
3 In the New Event Function drop-down list, select onclick. The onclick event handler appears in the script editor text box.
4 After the first curly brace ( { ), add the following code:
var bchart = this.getViewer().getCurrentPageContent()
.getChartByBookmark("HTML5ChartBookmark");
var clientChart = bchart.getClientChart();
clientChart.setTitle("HTML5 Chart: On Hold series is invisible");
clientChart.setSeriesVisibile('On Hold', false);
5 Return to the layout editor. Select the Show On Hold HTML button and choose Script.
6 In the New Event Function drop-down list, select onclick. The onclick event handler appears in the script editor text box.
7 After the first curly brace ( { ), add the following code:
var bchart = this.getViewer().getCurrentPageContent()
.getChartByBookmark("HTML5ChartBookmark");
var clientChart = bchart.getClientChart();
clientChart.setTitle("HTML5 Chart: On Hold series is visible");
clientChart.setSeriesVisibile('On Hold', true);
Task 3: Script the client option controls
In this task, you add event handler scripts to HTML buttons that change the chart type using the client options of the HTML5 chart.
1 Select the Line Chart HTML button and choose Script.
2 In the New Event Function drop-down list, select onclick. The onclick event handler appears in the script editor text box.
3 After the first curly brace ( { ), add the following code:
var bchart = this.getViewer().getCurrentPageContent()
.getChartByBookmark("HTML5ChartBookmark");
var clientChart = bchart.getClientChart();
clientChart.getClientOptions().setChartType('line');
clientChart.getClientOptions().setTitle('Line chart');
clientChart.redraw();
4 Return to the layout editor. Select the Area Chart HTML button and choose Script.
5 In the New Event Function drop-down list, select onclick. The onclick event handler appears in the script editor text box.
6 After the first curly brace ( { ), add the following code:
var bchart = this.getViewer().getCurrentPageContent()
.getChartByBookmark("HTML5ChartBookmark");
var clientChart = bchart.getClientChart();
clientChart.getClientOptions().setChartType('area');
clientChart.getClientOptions().setTitle('Area chart');
clientChart.redraw();
Task 4: Test the scripts
In this task, you run the report and test the HTML button scripts.
1 Save the report.
2 View the report by choosing RunView ReportIn Web Viewer.
3 In the Actuate viewer, choose Line Chart. The chart title changes and the HTML5 chart type changes to line, as shown in Figure 17‑32.
Figure 17‑32 An HTML5 chart displayed as a line chart
4 In the Actuate viewer, choose Area Chart. The chart title changes and the HTML5 chart type changes to area, as shown in Figure 17‑33.
Figure 17‑33 An HTML5 chart displayed as an area chart
5 Choose other buttons to test scripted changes to the HTML5 chart display.