In this exercise, you can learn how to define data for a chart in the input and then insert a chart image in the output for the specified data set.

Exercise

Download and import the attached configuration called 31. Charts in Lasernet Developer 9. Afterward, go to the Forms section and open the Sample form.

Once you are done, proceed through the steps listed below:

1. First, define chart data in the input. To this end, on the Developer toolbar, click a little arrow next to the Charts tool, and then click Create chart data.

2. When the pointer becomes a cross, click the <Month> node to define the data to be presented in the chart.

3. To edit the chart data settings, double-click a chart data object you have just added. In the Edit Chart Data dialog displayed, switch to the Chart Data tab, and select Chart_Labels in the Chart data name drop-down box. Once you are done, click Ok.

4. Follow steps 1-3 to define data for a chart by taking them from the <Amount> node. For this chart data, select Chart_Data in the Chart data name drop-down box on the Chart Data tab of the Edit Chart Data dialog.

5. You are now proposed to add a chart image to the output. To this end, on the Developer toolbar, click a little arrow next the Charts tool, and then click Insert chart image.

6. When the pointer becomes a cross, mark the area to define the chart position in the output. At the mouse release, the Edit Chart dialog opens with the Chart tab.

Specify the chart properties as follows:

7. Select Donut as a chart type.

8. Type Energy Usage (Donut Chart) as the X title.

9. On the Basic tab, specify the properties as shown on the picture below.

10. Click the Add button below the Series tab. In the Edit chart series item dialog that appears, select Chart_Data in the Series values drop-down box. Type {value} in the Format labels text box. Select the available color item on the Colors tab, click the Edit button, and then select a blue color. Once you are done, click Ok.

11. Switch to the Advanced tab and specify the properties as shown on the picture below.

12. Switch to the Format tab and specify the properties as shown in the picture below:

13. Switch to the Labels tab, click the Add button, and then select Chart_Labels in the drop-down list.

14. Click the Ok button to save the specified properties.

15. Move the added chart to locate it in the report, as needed. To this end, you can just point the chart, and then drag it to the new location using the chart move handle. Otherwise, right-click the chart, and then select Position in the context menu that appears to specify the required position properties or use corresponding controls on the Property bar.

You are now proposed to add a chart of the pareto type to the output. To this end, follow the instructions listed above and using the pictures presented below to get the property values.

The Basic tab:

The Advanced tab:

The Format tab:

The Edit chart series item dialog (add here 12 colors of your choice):

Once you are done, move the added chart to locate it in the report as shown in the picture below: