Charting Extension

Introduction

Note: This documentation refers to the ChartingExtension version 3.x or higher, which relies on Workspace version 3 of Appway.

The ChartingExtension adds two Screen components for visualizing data as a line, bar or pie chart. The visual representation of data is an easy way to display distributions, or display the relationship between multiple data streams. The benefit of using the Line/Bar Chart or Pie Chart component is that the represented data can be changed dynamically. With the usage of Appway Catalogs, every data source can be represented as a chart in the Workspace.

Figure 1: Line chart for the Appway 6.2 workspace

Quick Start Guide

To create and preview your first chart, follow these steps:

1. Upload the latest version of the ChartingExtension into Appway.

2. Right-click on the extension, and select Add a Data Catalog.

3. Fill in the ID and Name of the Catalog object and click on Save Pie Catalog.

4. Open a Screen, and drag the Pie Chart component into the composer area

   

5. Set Chart Data Source Type to Catalog in the component properties.

6. Preview your first pie chart.

This example also applies if you want to generate an example line chart.

Inspecting the generated catalogs helps you see the structure required by the charts.

Displaying Data in a Chart

The example catalog generated in the previous chapter provides only static data. In most solutions, data comes from data sources such as databases or third-party services. Appway Catalogs can dynamically gather and update data from any data source. It is recommended to use a catalog for charts because you gain maintainability, versioning and a visual layer. This is a great advantage over using a script to generate the data.

See the Catalog Business Object document for further information on Catalogs and how they gather data from Integration Links and databases.

Line/Bar Chart Catalog Columns

To use a Catalog as line/bar chart source, it should at least contain the following columns:

• id — A unique ID to identify the data point. This value is returned by the binding of the component when a data point is selected.
• x — The "x" value of the data point in the chart
• y — The "y" value of the data point in the chart
• bottom — Defines the starting height of the data point from the x-axis
• xtick — Tick label of the data point on the x-axis
• ytick — Tick label of the data point on the y-axis
• yvalue — Defines the distance of the tick label on the y-axis

Pie Chart Catalog Columns

To use a Catalog as pie chart source, it should at least contain the following columns:

• id — A unique ID used to identify the section. This value is returned by the binding of the component when a pie chart section is selected.
• value — The value of the pie chart section
• label — The label of the pie chart section
• color — The color of the pie chart section

Charts inside the PDF Output

It is possible to create a Tachometer (Gauge) chart, a Composite chart or a Pie chart in Appway PDF Output by using the Graphic component.

1. Drag the Graphic component onto the page, and adjust size and positioning of the box. The chart is resized based on the size of the box.
2. In the Value Field Parameters tab of the component, specify:
   • Listener Name: “tachometer”, “piechart” or “compositechart” (This value has to be exact)
   • An adequate resolution (e.g 300)
   • Chart expression must be on a single line
3. After dragging the component in the PDF Output, it is necessary to define the chart that must be displayed. Use the Data Classes “Chart”, “Dataset” and “ChartValue” to do this.

You can find an example in the “Examples” section.

Note: For detailed documentation on charts in PDF Output, see the other sections of this article.

Properties

Line / Bar Chart

Properties Tab

X Axis Tab

Y Axis Tab

Grid Tab

Line Tab

Bar Tab

Point Tab

Other Tabs

* Depending on the selection of "Chart Data Source Type"

§ Only appears if "Show" is checked in the tab "Line"

† Only appears if "Fill" is checked in the tab "Line"

Pie Chart

Properties Tab

Labels Tab

Shadow Tab

Attributes Tab

Combine Tab

* Depending on the selection of "Chart Data Source Type"

Examples

The following section shows several example charts. You will find a Screen with all the examples in the following .AWEXPORT file: chartVariationExamples.awexport.

Please, consider this file was created in Appway 7.

Line Chart

Bar Chart

Pie Chart

Donut Chart

Square Chart

Line/Bar Chart from a Script

Here is the example script:

SCChartData $chartData := NEW(SCChartData);

// 

//line options (for all series) 

SCChartOptionLines $lineOptions := NEW(SCChartOptionLines);

$lineOptions.show := true;

$lineOptions.fill := true;

$lineOptions.fillColor := 'lightgreen';

$lineOptions.lineWidth := 1;

// 

// data series 

SCChartSeries $chartSeriesA := NEW(SCChartSeries);

$chartSeriesA.label := 'Processes';

$chartSeriesA.shadowSize := 10;

$chartSeriesA.lines := $lineOptions;

$chartSeriesA.color := 'grey';

// 

SCChartXaxis $xaxisOptions := new SCChartXaxis;

$xaxisOptions.show := true;

// 

// 

For Integer $i := 1 Condition $i <= 15 Step $i := $i + 1 Do

   // values (with colors) 

   SCChartPoint $p := NEW(SCChartPoint);

   SCChartTick $t := new SCChartTick;

   $t.label := $i;

   $t.value := $i;

   $xaxisOptions.xaxis.addElement($t);

   $p.x := $i;

   $p.y := TODOUBLE(RANDOM() * 10);

   $chartSeriesA.data.addElement($p);

End

$chartData.xaxis := $xaxisOptions;

// 

$chartData.series.addElement($chartSeriesA);

// 

Return $chartData;

Bar Chart from a Script

Here is the example script:

SCChartData $chartData := NEW(SCChartData);

// 

//bar options (for all series) 

SCChartOptionBars $barOptions := NEW(SCChartOptionBars);

$barOptions.show := true;

$barOptions.fill := true;

$barOptions.fillColor := 'lightgreen';

$barOptions.barWidth := 0.8;

$barOptions.lineWidth := 1;

$barOptions.align := 'center';

// 

// data series 

SCChartSeries $chartSeriesA := NEW(SCChartSeries);

$chartSeriesA.label := 'Processes';

$chartSeriesA.shadowSize := 10;

$chartSeriesA.bars := $barOptions;

$chartSeriesA.color := 'grey';

// 

SCChartXaxis $xaxisOptions := new SCChartXaxis;

$xaxisOptions.show := true;

// 

// 

For Integer $i := 1 Condition $i <= 15 Step $i := $i + 1 Do

   // values (with colors) 

   SCChartPoint $p := NEW(SCChartPoint);

   SCChartTick $t := new SCChartTick;

   $t.label := $i;

   $t.value := $i;

   $xaxisOptions.xaxis.addElement($t);

   $p.x := $i;

   $p.y := TODOUBLE(RANDOM() * 10);

   $chartSeriesA.data.addElement($p);

End

$chartData.xaxis := $xaxisOptions;

// 

$chartData.series.addElement($chartSeriesA);

// 

Return $chartData;

Tachometer Chart in PDF Output

Composite Chart in PDF Output

Pie Chart in PDF Output