Charts

Area Chart

Area is one of the widget types available in the the Apliqo UX. Example of this widget can be seen below:

In order to select Column, chose widget type: “Carts” and chart type: “Area”, as shown on picture below:

Data source require at least two dimensions:

Rows – Responsible for a list of areas that are to be displayed. In this example it’s three version types. List Type is Subset.

Columns – Defines measures to be displayed on x axis. Type should be Subset

Additionally, in this example, widget settings is used, to display dropdown list for filtering the widget. For this Subset is selected.

Other dimensions should be used as widget settings or Dashboard Global Settings.

Selected data source then looks like this:

Bar Chart

Bar is one of the widget types available in the the Apliqo UX. Example of this widget can be seen below:

In order to select Column, chose widget type: “Carts” and chart type: “Bar”, as shown on picture below:

Data source require at least two dimensions:

Rows – Responsible for a list of lines that are to be displayed. In this example it’s three version types. List Type is Subset.

Columns – Defines measures to be displayed on y axis. Type should be Subset.

Other dimensions should be used as widget settings or Dashboard Global Settings.

Selected data source then looks like this:

Alternatively, if only one element is selected for rows, then widged will not be "stacked" and will only show one bar per each element of subset chosen in the Columns.

Bubble Chart

Bubble is one of the widget types available in the the Apliqo UX. Example of this widget can be seen below:

In order to select Column, chose widget type: “Carts” and chart type: “Bubble”, as shown on picture below:

Data source require at least two dimensions:

Rows – Responsible for a list of items that are to be displayed. In this example it’s product categories. List Type is Subset.

Columns – Defines three measures to be displayed. First measure will be on x axis, second on y axis and third will be represented by size of the bubble. List type should be Subset, containing 3 elements.

Other dimensions should be used as widget settings or Dashboard Global Settings.

Selected data source then looks like this:

Column Chart

Column is one of the widget types available in the the Apliqo UX. Example of the Column widget can be seen below:

In order to select Column, chose widget type: “Carts” and chart type: “Column”, as shown on picture below:

Data source require at least two dimensions:

Rows – Responsible for a set of columns. List type is subset (Months of 2016 in this example).

Columns – Defines sets of columns. In this example there is only one element in the set, and so List Type is selected to be Element and Actual is selected.

Other dimensions should be used as widget settings or Dashboard Global Settings.

Selected data source then looks like this:

In order to create stacked columns, instead of selecting one element, it is possible to select a set. In this example, rows were switched with columns and in the Version dimension a set of three elements was used instead of single element. Results lcan be seen below:

Line Chart

Line is one of the widget types available in the the Apliqo UX. Example of this widget can be seen below:

In order to select Column, chose widget type: “Carts” and chart type: “Line”, as shown on picture below:

Data source require at least two dimensions:

Rows – Responsible for a list of lines that are to be displayed. In this example it’s three version types. List Type is Subset.

Columns – Defines three measures to be displayed on x axis. Type should be Subset

Other dimensions should be used as widget settings or Dashboard Global Settings.

Selected data source then looks like this:

Waterfall Chart

Waterfall is one of the widget types available in the the Apliqo UX. Example of the waterfall widget can be seen below:

In order to select Waterfall, chose widget type: “Charts” and chart type: “Waterfall”, as shown on picture below:

Data source require at least two dimensions:

  • Rows - Responsible for first and last bar, indicates which elements are compared  Version dimension in this example (other good example would be year). For setup selected List Type is “Element Comparison”, Value is “Budget” (indicates first bar) and Value MAX is “Actual” (indicates last bar).
  • Columns - responsible for bars in-between - Account in this example. List type is “Subset”, which allows to have set of items.

Other dimensions should be used as widget settings or Dashboard Global Settings.

Selected data source then looks like this:

Most used advanced chart options:

  • upColor - defines color of the bar with positive change
  • downColor - defines color of the bar with negative change

Example of the setup can be seen below:

Advanced Options

combined charts

Multiple charts can be combined into one, using advanced options of the chart. Below is example of combining column chart with a line chart: 

In order to achieve this, normal column chart is selected and then in advanced options secondary axis and series is defined, using the below code inside chartOptions:


"yAxis": [

      {

        "labels": {

          "format": "{value}",

          "style": {

            "color": "#434348"

          }

        },

        "title": {

          "text": "Net Sales",

          "style": {

            "color": "#434348"

          }

        },

        "index": 0

      },

      {

        "title": {

          "text": "Act Vs Bud",

          "style": {

            "color": "#7cb5ec"

          }

        },

        "labels": {

          "format": "{value}%",

          "style": {

            "color": "##f9d67a"

          }

        },

        "opposite": true,

        "index": 1

      }

    ],

    "series": [

      {},

      {},

      {},

      {

        "dataLabels": {

          "enabled": false,

          "format": "{point.y:,.0f}"

        },

        "yAxis": 1,

        "type": "line",

        "color": "red"

      }

    ]



First yAxis, defined under index 0 is set up as "Net sales", then second axis is set up with index 1, as "Act Vs Bud".

In last step, first three series are not directly specified (and so they will use default settings and yAxis 0), and forth series is defined to use yAxis 1. This is also the place where it's specified, that this series' type is line, and color is red.

Tooltip options

Override Colors

0 Comments

Add your comment

E-Mail me when someone replies to this comment