charts

The component can display statistics related to data records (categorical variables). This can be used to show a single series or multiple series of data for comparative purposes and highlight specific regions or ranges on the chart to make it easier for users to interpret and analyze the data.This component is mostly used in jig.default or jig.list.

Bar chart

Pie chart

Line chart

Bar charts -plotbands

Line charts -plotbands

Understanding chart data

Chart data is structured in a way that makes it easy to display. To understand how to create the YAML for a chart in Jigx Builder let's look at the data in various formats and how you can use the data in Jigx.

Let's start with the financial data per quarter for three years from a Microsoft Excel table, as shown below:

Next we map out the same data in Jigx Dynamic Data inJigx Management. Notice that the data is exactly the same as the Excel data.

The same data can also exist in a JSON file. Using the Download button at the top-right of the Data-finance-data table shown above will download the data into a JSON file. The JSON is shown below.

Using the data in YAML

Now that you have your data you can convert it into the YAML needed for the charts. The data can be used as a static datasource or a dynamic datasource.

YAML - Static data

Using the finance-data.json it was easy to convert the data into YAML as shown below.

static-data

datasources:
  finance:
    type: datasource.static
    options:
      data:
        - Q1: 34000
          Q2: 22000
          Q3: 40000
          Q4: 51000
          Year: "2021"
        - Q1: 12000
          Q2: 48000
          Q3: 36000
          Q4: 12000
          Year: "2020"
        - Q1: 25000
          Q2: 32000
          Q3: 45000
          Q4: 86000
          Year: "2019"

YAML - Dynamic Data

In Jigx you can use the data from the dynamic data table, in this instance data-Finance-data, then create a file under datasource folder. Use the Dynamic data provider that references the finance-data table with a query selecting the data you want to use, quarters and year in this example.

dynamic-data

type: datasource.sqlite
options:
  provider: DATA_PROVIDER_DYNAMIC

  entities:
    - default/finance-data

  query: |
    SELECT
      id,
      '$.Q1', 
      '$.Q2', 
      '$.Q3', 
      '$.Q4', 
      '$.Year' 
    FROM [default/finance-data]

YAML - Chart

In the YAML for charts the following keys are used: - yAxis - xAxis - categories - series

In this example the finance-data would show as follows for each key.

Now it is possible to create charts in YAML with the exact same data, for example a bar and line chart with the finance-data in the above YAML keys is shown below. Notice in the YAML below that the same YAML is used for both the bar and line chart.

Bar-chart

children:
  # select the BAR-CHART component and configure the x-axis and y-axis
  - type: component.bar-chart
    options:
      chart:
        height: 250
      legend:
        isHidden: false

      yAxis:
        max: 90000
        min: 0
        labels:
          format:
            currency: USD
            numberStyle: currency
            compactDisplay: short
            notation: compact
        tickAmount: 8

      xAxis:
        categories: [email protected]

      series:
        - data: [email protected]
          name: Q1
          color: color2

        - data: [email protected]
          name: Q2
          color: color3

        - data: [email protected]
          name: Q3
          color: color4

        - data: [email protected]
          name: Q4
          color: color5

Line-chart

children:
  # select the LINE-CHART component and configure the x-axis and y-axis
  - type: component.line-chart
    options:
      chart:
        height: 250
      legend:
        isHidden: false

      yAxis:
        max: 90000
        min: 0
        labels:
          format:
            currency: USD
            numberStyle: currency
            compactDisplay: short
            notation: compact
        tickAmount: 8

      xAxis:
        categories: [email protected]

      series:
        - data: [email protected]
          name: Q1
          color: color2

        - data: [email protected]
          name: Q2
          color: color3

        - data: [email protected]
          name: Q3
          color: color4

        - data: [email protected]
          name: Q4
          color: color5