...
Genie Charts are based on FusionCharts. For more information, click here.
Creating a New Chart
A new Chart can be created by selecting Chart on the Widgets menu on the left side of the screen while in Design mode.
A new resizable chart placeholder will be created with a template preview. You will now need to edit the Chart Settings.
Chart Settings
Select a "chart type" from the dropdown in the Properties Window. Or select Other... in the "chart type" property and type in a valid FusionChart name manually.
You can also control the chart overlay. When the chart overlay is set to true, the Chart panel will overlay any other content on the screen, regardless of z-index settings. When set to false, the Chart panel will behave according to normal layering rules, based on z-index. The default value is false.
...
In the next sections, we will demonstrate each one of the data sources for the Chart.
Chart Data from Screen
| Info |
|---|
Note that only single-series charts are supported when chart data is supplied this way. |
In this section, we will chart the data from the screen through the help of the designer.
...
(3) JavaScript expression that generates comma separated data.
Chart Properties Window Data Entry
Step 1:
You can manually enter the names by which the chart values will be represented using the names property separated by commas.
...
Click the OK button and proceed to add the corresponding values.
Step 2:
You can also manually enter the values corresponding to the names entered in the previous step through the values field separated by commas.
Alternatively, you can add the values through the Edit Values dialog, as shown below: 
Step 3:
Right-click on the screen to get the main context menu and then select the Save and Exit Design option. 
You should be able to see the chart generated from the data created in the previous steps.
Chart Properties – Using data from screen elements
Step 1:
Instead of entering hard-coded names, you can also enter IDs, which represent elements that contain the appropriate names. 
Step 2:
Similarly, you can enter the IDs of the elements that contain the chart values field separated by commas. The values property specifies a list of numerical values used to build the chart or a list of screen element IDs from which the values could be retrieved.
| Info |
|---|
Note: You can combine manually entered names and values along with element IDs in the names or values fields in the Chart’s Properties Dialog. |
Step 3:
Right-click on the screen to get the main context menu and then select the Save and Exit Design option. 
...
You should see the chart generated from the data on the screen as shown below:
Chart Properties – Using JavaScript expressions to generate chart data
You can use JavaScript to populate your chart. This allows you to retrieve screen data as well perform various calculations on that data. In the example below, we will build a 3D Pie Chart on the Display System Status (DSPSYSSTS) screen. This chart will display the total system storage available versus the storage in use.
Step 1:
Select Pie3D in the charts list inside Widgets.
Step 2:
Type in the following expression in the values property inside of the Chart Properties:
...
The expression must return a comma separated list of values. In this pie chart, there are only two pie pieces. Once evaluated, the above expression will produce the following result: 36.89, 63.11.
| Info |
|---|
Note: D_6_64 is the ID of the output field that contains the system storage used (63.11%). parseFloat() is a native JavaScript function that parses a string and returns a floating point number. In our case, it will parse 63.11% and return 63.11 as a value rather than string with the percent sign. |
Step 3:
Right-click on the screen to get the main context menu and then select the Save and Exit Design.
You should see something like this screen when you’re done.
Database-driven Charts
| Info |
|---|
Note that only single-series charts are supported when chart data is supplied this way. |
In this section, we will chart the data using a database file. In the illustration below, we are using an item master file named ITM001P for the database file property. The file name can be qualified with a library; however, if the library is omitted, the session’s library list will be used to find the database file.
Next, you must specify the name field property, which will be used to determine the names by which records would be represented in the chart. You can type the field name or choose it from a dialog. Click on the button circled in green to display the database fields dialog for the database file you specified. 
| Info |
|---|
Note: |
...
D_6_64 is the ID of the output field that contains the system storage used (63.11%). parseFloat() is a native JavaScript function that parses a string and returns a floating point number. In our case, it will parse 63.11% and return 63.11 as a value rather than string with the percent sign. |
Otherwise, you will get a dialog with the available database field names to pick from. We will select the Description from the field list: 
...
minimum: Compares minimum dependent values among name field values.
Dynamic Chart via URL
In Genie, charts can also be populated using an external program. This program or web service can be written in any web capable language and hosted on either the IBM i or on any other platform.
...
The chart URL property sets the URL to a program or web service that returns the chart definition and data in XML format. The definition of the chart includes the chart type, width, height, caption, sub-caption, x-axis caption, y-axis caption, etc.
| Info |
|---|
Note: If a chart’s URL is used, the database file, name field, value field, summary option, and record limit properties are all ignored. |
Here is a sample of the XML data that is sent to the chart through the program/web service to build and populate the chart.
...
The format of the XML data can be found in the FusionCharts Data Format section of the FusionCharts documentation site.
Using Chart XML or Chart JSON directly
Chart data can also be provided using the "chart xml" or the "chart json" property. The property value can be static or generated dynamically through the use of property scripting. To use property scripting, prepend js: or script: in front of the property.
...