Stacked Chart

Stacked charts could be generated inside page, card, arrange, or tab definitions.

Figure 1 - Stacked Chart in a Page

Variations

Bar Chart, Funnel Chart, Line Chart, Radar Chart, and Pie Chart.

When to use

A stacked chart can be used to show comparisons between categories of data, but with the ability to break down and compare parts of a whole.

How to use

Follow the steps below to add a stacked chart to a page.

Basic Stacked Chart

First you have to create a data source in the projection file. Then you can connect it to the stacked chart as follows.

//---------------Example Code------------------
stackedchart StackedChartTest for ExampleStackedChart {
    ...
    }

When it comes to a basic stacked chart it should have a label, x-axis and y-axis.

• Label: Title of the chart.
• x: Configurations of x-axis (Argument axis) of the chart.
• y: Configurations of y-axis (Value axis) of the chart.

The following code describes how to create a basic stacked chart on Aurena pages.

//---------------Example Code------------------
-------------------------------- MAIN PAGES ---------------------------------
page TestPage using StackedChartEntityset {
   title = "Stacked Chart Test Page";
   stackedchart StackedChartTest;
}

----------------------------- VISUAL COMPONENTS ----------------------- stackedchart StackedChartTest for ExampleStackedChart { label = "Title of Stacked Chart"; x { label = "Text for X axis"; value ConnectionType; } y { label = "Text for Y axis"; value Count; } }

1. Define a stacked chart

Define a stacked chart in the client model file using the following format.

stackedchart <stacked_chart_name> for <entity_name> {
   ...
}

<stacked_chart_name> - identity of the stacked chart, always use a meaningful identifier.

<stacked_name> - The entity or the summary the stacked chart is based on, see examples below:

//---------------Example Code------------------

stackedchart OrderTypeStackedChart for OrderTypeSummary { ... }

2. Add the stacked chart to the container

A stacked chart can be added to a page, card, arrange, tab. A stacked chart gets it's vales from a datasource which is either an an entityset, an array or reference:

1. Add the stacked chart with its own entityset for example, to the page:

   page <page_name> {
       stackedchart  using ;
   }
   

   <entityset_for_stacked_chart> - This is the entityset that serves as the datasource from which the stacked chart gets its values. The entityset must be based on the same entity that was used to define the stacked chart.

   //---------------Example Code------------------
   
   

   page StackedChart using OrdersSet { stackedchart OrderCategoriesStackedChart using OrderCategoriesSet; }

2. Add the stacked chart to use the entityset of the page:

   page <page_name> using <entityset_for_page> {
       stackedchart <stacked_chart_name>;
   }
   

   This method is useful if the purpose of the page is to display a stacked chart of records. In such instances it is not mandatory to define an entityset for the stacked chart since it gets its values from the <entityset_for_page>.

   //---------------Example Code Method 2------------------
   
   

   page StackedChart using OrderCategoriesSet { stackedchart OrderCategoriesStackedChart; }

3. Add the stacked chart to use an array or a reference:

   page <page_name> using <entityset_for_page> {
       stackedchart <stacked_chart_name>(<stacked_chart_array>);
   }
   

   <stacked_chart_array> - This is the array or reference defined in the related projection file.

   Most of the time an array or reference is connected to a parent record and needs to be updated when the parent record is changed. In such instances the stacked chart needs to be bound to the control which has the parent record, for example a selector or a list. The binding is done using the [bind][10] keyword.

   //---------------Declarative Syntax------------------
   page <page_name> using <entityset_for_page> {
       selector <selector_name>;
       stackedchart <stacked_chart_name>(<stacked_chart_array>) bind <selector_name>;
   }
   

   //---------------Example Code Method 3------------------
   
   

   page Form using OrdersSet { selector OrdersSelector; stackedchart OrderItemsStackedChart(OrderItemsArray) bind OrdersSelector; }

4. Add the stacked chart to use a [function][22] that returns an entity collection:

   page <page_name> {
       list <stacked_chart_name> using <function_set>;
   }
   

   <function_set> - This is the [function][22] defined in the related projection file that returns an entity collection. Function should return the same type entity collection as the stacked chart is based on. Function parameters can get values from several places like the current record of the page, Global context, [Search context][23], etc.

   //---------------Example Code Method 4------------------
   
   

   page Form using ServiceInvoiceSet { selector ServiceInvoiceSelector; list ServiceInvoiceStackedList using GetInvoiceStackeds(InvoiceNo, context.Company) }

Adding a stacked chart to a card

The below code snippets would show how stacked chart could be integrated to a card (Only referenced stacked chart could be generated).

(Parent-Child relationship [1-M])

card CardName for SomeEntity {
    stackedchart StackedChartName(ChildArrayName);
}

3. Configuring stacked chart axes

A stacked chart has two axes. Two axes can be defined using x and y properties in marble.

Following is a simple code snippet that shows the way of defining two axes in marble.

//---------------Example Code------------------
stackedchart StackedChartTest for ExampleStackedChart {
   label = "Title of Stacked Chart";
   x {
      label = "X axis title";
   }
   y {
      label = "Y axis title";
   }
}

‘x’ represents the x-axis and ‘y’ represents the y-axis.

Each stacked chart axis has two main parts.

• label: The title of the axis.
• value: The attribute which offers values to the axis.

x {
   label = "Text for X axis";
   value ConnectionType;
}
y {
   label = "Text for Y axis";
   value Count;
}

4. Adding values to stacked chart

X axis can only have one value. Y axis can have more than one value. A simple single series stacked chart can be defined as follows.

//---------------Example Code------------------
stackedchart StackedChartTest for ExampleStackedChart {
   label = "Title of Stacked Chart";
   x {
      label = "Employee Name";
      value Employee;
   }
   y {
      label = "Work Experience";
      value mathematics;
   }
}

Multiple Series

When it comes to multiple series stacked charts y axis can have multiple values. Multiple series can be added to the stacked chart in two ways.

1. Adding multiple ‘value’ fields to y-axis.:

   //---------------Example Code------------------
   y {
       label = "Count";
       value CountConnectionType;
       value CountMchCode;
   }
   

   Each ‘value’ attribute in y-axis represents one series.

2. Splitting values in a column

   //---------------Example Code------------------
   y {
       label = "Count";
       value CountMchCode;
       split {
           value ConnectionType;
       }
   }
   

   In this case a series will be generated for each distinct value in the split field.

5. Set the appropriate properties for the stacked chart

Set one or more properties for the stacked chart such as label, collapsed etc. For a complete stacked chart of the properties and how to set them see the Properties section below.

6. Setting TopN values

The keyword topn is used to limit the number of visible x axis values according to different conditions. There are 3 modes in topn;

NOTE : Top N options can be used only in single series stacked charts.

1. Count

   Is used to limit the number of slices by specifying the number slices to be shown.

   //---------------Example Code------------------
   stackedchart TopNTestStackedChart for ItemSummary {
       label = "Stacked Chart Top N Count(5)";
       orderby = CurrentCount asc;
   
   

   x {
       label = "Regions";
       value Region;
   }
   y {
       label = "No. Items";
       value CurrentCount;
       topn = Count(5);
   }
   

   }

   The above condition would make the stacked chart to only show top 5 stackeds along with others stacked.

2. ThresholdValue

   Is used to limit the number of stackeds by specifying a minimum value.

   //---------------Example Code------------------
   stackedchart TopNTestStackedChart for ItemSummary {
       label = "Stacked Chart Top N Threshold Value 100";
   
   

   x {
       label = "Regions";
       value Region;
   }
   y {
       label = "No. Items";
       value Count;
       topn = ThresholdValue(100);
   }
   

   }

   The above condition would make the stacked chart to only show stackeds that have a value greater than or equal to 100.

3. ThresholdPercent

   Is used to limit the number of slices by specifying a minimum percentage of the total

   //---------------Example Code------------------
   stackedchart TopNTestStackedChart for ItemSummary {
       label = "Stacked Chart Top N Threshold Value 100";
   
   

   x {
       label = "Regions";
       value Region;
   }
   y {
       label = "No. Items";
       value Count;
       topn = ThresholdPercent(20);
   }
   

   }

   The above condition would make the stacked chart to only show stackeds that has a percentage greater than or equal to 20 of the total.

In all of the 3 modes others stacked would be shown along with stackeds which satisfied the given criteria. others stacked represents the sum of all the other stackeds which didn’t satisfy the condition.

Others stacked can be hidden using showothers property.

//---------------Example Code------------------
y {
    label = "No. Items";
    value Count;
    topn = ThresholdPercent(20);
    showothers = [false] // default value is true
}

6. Setting custom colors on stacked chart

There are two ways that you can use to color stackeds in stacked charts. Although emphasis property has to be used in both ways.

1. Using the chart emphasis property.

   //---------------Example Code------------------
   stackedchart StackedChartTest for ExampleStackedChart {
       label = "Title of Stacked Chart";
       x {
           label = "Employee Name";
           value Employee;
       }
       y {
           label = "Work Experience";
           value mathematics;
       }
       emphasis Complementary1 = [XValueFieldName = "Something"];
       emphasis Complementary3 = [YValueFieldName = "Something"];
   }
   

2. Using the emphasis property inside value.

   //---------------Example Code------------------
   stackedchart StackedChartTest for ExampleStackedChart {
       label = "Title of Stacked Chart";
       x {
           label = "Employee Name";
           value Employee;
       }
       y {
           label = "Work Experience";
           value Experience {
               emphasis Complementary1 = [ValueFieldName = "Something"];
           }
       }
   }
   

7. Setting custom patterns on stacked chart

When it comes to patterns too there are two ways of applying a patterns to stackeds in stacked chart. In both ways pattern property has to be used.

1. Using the pattern property inside chart

   //---------------Example Code------------------
   stackedchart StackedChartTest for ExampleStackedChart {
       label = "Title of Stacked Chart";
       x {
           label = "Employee Name";
           value Employee;
       }
       y {
           label = "Work Experience";
           value Experience;
       }
       pattern fillpattern1 = [Experience = "Something"]
   }
   

2. Using the pattern property inside the value block

   //---------------Example Code------------------
   stackedchart StackedChartTest for ExampleStackedChart {
       label = "Title of Stacked Chart";
       x {
           label = "Employee Name";
           value Employee;
       }
       y {
           label = "Work Experience";
           value Experience {
               label = "Experience"
               pattern fillpattern1 = [true]; //value true can be used
           }
       }
   }
   

8. Adding constant lines

In stacked charts constant lines can be added to both x and y axes. Following is the syntax of adding a simple constant line to the x axis of a stacked chart.

//---------------Example Code------------------
stackedchart OrderItemStackedChart for OrderItem {
    orderby = ItemSupplyDate asc;
    x {
        label = "Item Supply Date";
        value ItemSupplyDate {
            label = "Item Supply Date";
        }
        constantline {
            label = "Forecast Cut Off 1";
            value = "${parent.ForecastCutOff1}";
        }
    }
    y {
        label = "Quantity";
        value SupplyQuantity {
            label = "Supply Quantity";
            seriestype = line;
            seriesstyle = linepattern1;
            emphasis Complementary5 = [true];
        }
        value DemandQuantity {
            label = "Demand Quantity";
            seriestype = line;
            seriesstyle = linepattern6;
            emphasis Complementary6 = [true];
        }
    }
}

In the above code snippet, along with the constantline property, value property has been used as well. The reason of having value property inside constant line block is to give a certain value to the constantline and then it will be drawn based on that value on the corresponding axis.

Other than value and label properties, there are three properties available in constant line block.

1. pattern - this property is being used to add a line pattern to a constantline.

   //---------------Example Code------------------
   constantline {
       label = "Forecast Cut Off 1";
       value = "${parent.ForecastCutOff1}";
       pattern linepattern7 = [true];
   }
   

2. emphasis - this property is being used to add a color to a constantline.

   //---------------Example Code------------------
   constantline {
       label = "Forecast Cut Off 1";
       value = "${parent.ForecastCutOff1}";
       pattern linepattern7 = [true];
       emphasis Complementary5 = [true];
   }
   

3. visible - Using this property you can hide a particular constantline conditionally.

   //---------------Example Code------------------
   constantline {
       label = "Forecast Cut Off 1";
       value = "${parent.ForecastCutOff1}";
       pattern linepattern7 = [true];
       emphasis Complementary5 = [true];
       visible = [true] // boolean value or a condition
   }
   

9. Changing series type

This functionality is available in stacked and stacked charts. You can change the type of a stacked or stacked series to line series using this property. The purpose of this feature is to make it possible to have multiple chart types in a single chart. This functionality supports two combinations.

• Stacked chart with a line chart.
• Stacked chart with a line chart

Series type property is only available with stacked and stacked chart syntaxes. The property value has to be set to “line” in order to change the series type to line.

//---------------Example Code------------------
value Total {
    label = "total";
    seriestype = line;
}

10. Navigate to details

There are two ways of implementing this. Either you can implement it in chart level or else you can implement it in series level. To add a series specific navigation link, you have to use the series level implementation as the chart level implementation will impact across all the series in a chart.

1. Chart level implementation

   //---------------Example Code------------------
   page ActivityPage using ActivityChartEntityset {
       title = "Activity Chart";
       stackedchart ActivityStackedChart {
           details = ActivityDetailsPage(ActivityType, MainRepresentativeId);
       }
   }
   
   

   stackedchart ActivityStackedChart for ActivityChartSummary { x { label = " Activity Type "; value ActivityType; } y { label = "Count"; value CountActivityType; split { value MainRepresentativeId; } } }

   Using this syntax you can specify the page to be navigated together with the parameters that need to be passed.

   Also there's another way of specifing a pages to navigate. You can use a navigaiton URL for that. Following is an example of that.

   //---------------Example Code------------------
   page ActivityPage using ActivityChartEntityset {
       title = "Activity Chart";
       stackedchart ActivityStackedChart {
           details = "page/CherlkBusinessActivity/ActivityPage?$filter=ActivityType eq $[ ACTIVITY_TYPE] and MainPrepresentativeId eq $[MAIN_REPRESENTATIVE_ID]";
       }
   }
   

2. Series level implementation

   The only difference here is that you can declare navigation URL specific to the series. Following is an example implementation of this.

   //---------------Example Code------------------
   stackedchart EmployeeStackedChart for EmployeeSummary {
       label = "Employee Stats";
       orderby = AvgAge asc;
       x {
           label = "Role";
           value Role;
       }
       y {
           label = "Years";
           value AvgAge {
               label = "Average Age";
               details = EmployeesPage(Role);
           }
           value AvgWorkingExp {
               label = "Average Working Experience";
               details = "page/TstAcwilkEmployee/EmployeesPage?$filter=Role eq $[Role] and WorkingExp gt $[AvgWorkingExp]";
           }
       }
   }
   

   you can use any of the attributes available in the record as parameters.

11. Using commands in stacked chart

With this functionality, it is possible to execute custom commands on selected data points. A data point is single record bound and has an associated record behind. Same as in Navigate to Details, it is possible to access all the attributes of the associated record upon a click. Following us a basic implementation of custom commands in charts.

//---------------Example Code------------------
stackedchart CostSummaryGraph for CostSummary {
   label = "Cost Summary Graph";
   x {
       value Category;
   }
   y {
       value Count;
   }

command CostVariance; command CostActivity; }

command CostVariance for CostSummary { label = "Cost Variance"; execute { navigate "page/TotalActivityCost/Form?$filter=CostCategory eq $[Category]"; } enabled = [Count > 3]; }

command CostActivity for CostSummary { label = "Cost Activity"; execute { navigate "page/TotalActivityCost/Form"; } }

12. Using page search context for filtering chart datasource

Page search context values can be used in charts for filtering chart datasource. This has to done when adding a chart into a page. Following is an example implementation of it.

//---------------Example Code------------------
page EmployeesPage using Employees {
   searchcontext PageSearchContext {
      defaults = GetPageSearchContextDefaults();
   }
   stackedchart EmployeesStackedChart using Employees {
      filter = [StartDate < PageSearchContext.FromDate];
   }
}

Properties

Below is a list of properties that can be used to customize the control.

collapsed

details

filter

label

visible

Crosshairs

emphasis

Example

This section is still under construction. The completed version will be available in IFS Applications 10 Update 8.