Bar charts can be generated inside a page, card, arrange and tab definitions.
Figure 1 - Bar chart in a page
None.
Use a bar chart to compare values categories.
None.
Follow the steps below to add a bar chart to a page.
First you have to create a data source in the projection file. The data source can then be connected to the bar chart as follows.
//Example Code
//------------
barchart BarChartTest for ExampleBarChart {
...
}
A basic bar chart needs to have a label, an x-axis and a y-axis.
The following code describes how to create a basic bar chart on IFS Aurena pages:
//-------------MAIN PAGES----------------
page TestPage using BarChartEntityset {
title = "Bar Chart Test Page";
barchart BarChartTest;
}
//------------ VISUAL COMPONENTS ----------
barchart BarChartTest for ExampleBarChart {
label = "Title of Bar Chart";
x {
label = "Text for X axis";
value ConnectionType;
}
y {
label = "Text for Y axis";
value Count;
}
}
Define a bar chart in the client model file using the following format.
//--------- Declarative syntax ---------
barchart <bar_chart_name> for <entity_name> {
...
}
<bar_chart_name> - Identity of the bar chart, always use a meaningful identifier.
<bar_name> - The entity or the summary the bar chart is based on, see examples below:
//--------- Example code ---------------
barchart OrderTypeBarChart for OrderTypeSummary {
...
}
A bar chart can be added to a page, card, arrange, or tab. A bar chart gets its vales from a data source which is either an entityset, an array, or a reference.
There are several ways a bar chart can be added to a page. Some are listed below.
//---------- Declarative Syntax ---------------
page <page_name> {
barchart <bar_chart_name> using <entityset_for_bar_chart>;
}
<entityset_for_bar_chart> - This is the entityset that serves as the data source from which the bar chart gets its values. The entityset must be based on the same entity that was used to define the bar chart.
//----------- Example Code Method 1 ----------------
page BarChart using OrdersSet {
barchart OrderCategoriesBarChart using OrderCategoriesSet;
}
//---------- Declarative Syntax ---------------
page <page_name> using <entityset_for_page> {
barchart <bar_chart_name>;
}
This method is useful if the purpose of the page is to display a bar chart of records. In such instances it is not mandatory to define an entityset for the bar chart since it gets its values from the <entityset_for_page>.
//--------- Example code Method 2 --------------
page BarChart using OrderCategoriesSet {
barchart OrderCategoriesBarChart;
}
//---------- Declarative Syntax ---------------
page <page_name> using <entityset_for_page> {
barchart <bar_chart_name>(<bar_chart_array>);
}
<bar_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 bar 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 keyword.
//---------- Declarative Syntax --------------- page <page_name> using <entityset_for_page> { selector <selector_name>; barchart <bar_chart_name>(<bar_chart_array>) bind <selector_name>; }//---------- Example Code Method 3 -------------- page Form using OrdersSet { selector OrdersSelector; barchart OrderItemsBarChart(OrderItemsArray) bind OrdersSelector; }
//---------- Declarative Syntax ---------------
page <page_name> {
list <bar_chart_name> using <function_set>;
}
<function_set> - This is the function defined in the related projection file that returns an entity collection. A function should return the same type of entity collection as the bar chart is based on. Function parameters can get values from several places like the current record of the page, global context, search context, etc.
//------------ Example Code Method 4 --------------
page Form using ServiceInvoiceSet {
selector ServiceInvoiceSelector;
list ServiceInvoiceBarList using GetInvoiceBars(InvoiceNo, context.Company)
}
The below code snippets shows how a bar chart could be integrated to a card. Note that only referenced bar chart would be generated using this method.
(Parent-Child relationship [1-M])
card CardName for SomeEntity {
barchart BarChartName(ChildArrayName);
}
A bar chart has two axes which are defined using x and y properties in marble.
Following is a simple code snippet that shows the way of defining the two axes.
//-------------Example Code-------------
barchart BarChartTest for ExampleBarChart {
label = "Title of Bar Chart";
x {
label = "X axis title";
}
y {
label = "Y axis title";
}
}
‘x’ represents the x-axis and ‘y’ represents the y-axis.
Each bar chart axis has two main parts.
//---------------Example Code---------------
x {
label = "Text for X axis";
value ConnectionType;
}
y {
label = "Text for Y axis";
value Count;
}
The X axis can only have one value whereas the Y axis can have more than one value. A simple single series bar chart can be defined as follows.
//---------------Example Code------------------
barchart BarChartTest for ExampleBarChart {
label = "Title of Bar Chart";
x {
label = "Employee Name";
value Employee;
}
y {
label = "Work Experience";
value mathematics;
}
}
When it comes to multiple series bar charts, the y-axis can have multiple values. Multiple series can be added to the bar chart in two ways.
See example code below.
//---------------Example Code------------------
y {
label = "Count";
value CountConnectionType;
value CountMchCode;
}
Each ‘value’ attribute in the y-axis represents one series.
//---------------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.
Set one or more properties for the bar chart such as label, collapsed etc. For a complete list of the properties and how to set them see the Properties section.
The keyword topn is used to limit the number of visible x-axis values according to different conditions. There are 3 modes under topn;
Note: TopN options can be used only in single series bar charts.
Is used to limit the number of slices by specifying the number of slices to be shown.
//---------------Example Code------------------
barchart TopNTestBarChart for ItemSummary {
label = "Bar Chart Top N Count(5)";
orderby = CurrentCount asc;
x {
label = "Regions";
value Region;
}
y {
label = "No. Items";
value CurrentCount;
topn = Count(5);
}
}
Based on the above condition the bar chart will only display the top 5 bars along with the "others" bar.
Is used to limit the number of bars by specifying a minimum value. Any value below the minimum threshold will not be displayed.
//---------------Example Code------------------
barchart TopNTestBarChart for ItemSummary {
label = "Bar Chart Top N Threshold Value 100";
x {
label = "Regions";
value Region;
}
y {
label = "No. Items";
value Count;
topn = ThresholdValue(100);
}
Based on the above condition the bar chart will only display the bars that have a value greater than or equal to 100.
Is used to limit the number of slices by specifying a minimum percentage of the total value.
//---------------Example Code------------------
barchart TopNTestBarChart for ItemSummary {
label = "Bar Chart Top N Threshold Value 100";
x {
label = "Regions";
value Region;
}
y {
label = "No. Items";
value Count;
topn = ThresholdPercent(20);
}
}
Based on the above condition the bar chart will only show bars that has a percentage greater than or equal to 20 of the total value.
In all of the 3 modes, an "others" bar would be shown along with the bars which satisfies the given criteria. The "others" bar represents the sum of all the other bars which did not satisfy the condition.
"Others" bar can be hidden using the showothers property.
//---------------Example Code------------------
y {
label = "No. Items";
value Count;
topn = ThresholdPercent(20);
showothers = [false] // default value is true
}
Colors are applied to the bar chart using the emphasis property. There are two ways to use this property.
//---------------Example Code------------------
barchart BarChartTest for ExampleBarChart {
label = "Title of Bar Chart";
x {
label = "Employee Name";
value Employee;
}
y {
label = "Work Experience";
value mathematics;
}
emphasis Complementary1 = [XValueFieldName = "Something"];
emphasis Complementary3 = [YValueFieldName = "Something"];
}
//---------------Example Code------------------
barchart BarChartTest for ExampleBarChart {
label = "Title of Bar Chart";
x {
label = "Employee Name";
value Employee;
}
y {
label = "Work Experience";
value Experience {
emphasis Complementary1 = [ValueFieldName = "Something"];
}
}
}
Patterns are applied using the pattern property, and there are two ways the property can be used.
//---------------Example Code------------------
barchart BarChartTest for ExampleBarChart {
label = "Title of Bar Chart";
x {
label = "Employee Name";
value Employee;
}
y {
label = "Work Experience";
value Experience;
}
pattern fillpattern1 = [Experience = "Something"]
}
//---------------Example Code------------------
barchart BarChartTest for ExampleBarChart {
label = "Title of Bar Chart";
x {
label = "Employee Name";
value Employee;
}
y {
label = "Work Experience";
value Experience {
label = "Experience"
pattern fillpattern1 = [true]; //value true can be used
}
}
}
In bar 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 bar chart.
//---------------Example Code------------------
barchart OrderItemBarChart 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 block, the value property has been used as well. The reason of having the value property inside the constantline block is to give a certain value to the constantline and the line will be drawn based on that value on the corresponding axis.
Other than the value and label properties, the following three properties are also available in a constant line block.
This property is used to add a line pattern to a constantline.
//---------------Example Code------------------
constantline {
label = "Forecast Cut Off 1";
value = "${parent.ForecastCutOff1}";
pattern linepattern7 = [true];
}
This property is 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];
}
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 returning a boolean value
}
This functionality is available in bar and stacked charts. You can change the type of a bar 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.
Seriestype property is only available with bar 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;
}
There are two ways of implementing this functionality. 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.
//---------------Example Code------------------
page ActivityPage using ActivityChartEntityset {
title = "Activity Chart";
barchart ActivityBarChart {
details = ActivityDetailsPage(ActivityType, MainRepresentativeId);
}
}
barchart ActivityBarChart for ActivityChartSummary {
x {
label = " Activity Type ";
value ActivityType;
}
y {
label = "Count";
value CountActivityType;
split {
value MainRepresentativeId;
}
}
}
Using the above syntax you can specify the page to be navigated to together with the parameters that need to be passed.
Another way of specifying a page to navigate is to use a navigation URL, see below.
//---------------Example Code------------------
page ActivityPage using ActivityChartEntityset {
title = "Activity Chart";
barchart ActivityBarChart {
details = "page/CherlkBusinessActivity/ActivityPage?$filter=ActivityType eq $[ ACTIVITY_TYPE] and MainPrepresentativeId eq $[MAIN_REPRESENTATIVE_ID]";
}
}
The only difference here over the chart level implementation is that you can declare a navigation URL specific to the series. The following is a code example implementation of this.
//---------------Example Code------------------
barchart EmployeeBarChart 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.
With this functionality, it is possible to execute custom commands on selected data points. A data point is single record that is bound and has an associated record behind it. Same as in Navigate to Details step, it is possible to access all the attributes of the associated record upon a click. Following is a basic implementation of custom commands in charts.
//---------------Example Code------------------
barchart 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";
}
}
Page search context values can be used in charts for filtering the data source of the chart. This has to done when adding a chart into a page. The following is a code example implementation of it.
//---------------Example Code------------------
page EmployeesPage using Employees {
searchcontext PageSearchContext {
defaults = GetPageSearchContextDefaults();
}
barchart EmployeesBarChart using Employees {
filter = [StartDate < PageSearchContext.FromDate];
}
}
Below is a list of properties that can be used to customize the control.
collapsed | crosshairs | details | emphasis | filter | label | visible
This section is still under construction. The completed version will be available in IFS Applications 10 Update 8.