pie-chart

9min

The component can be used to display statistics related to data records. Mostly used in jig.default﻿ or jig.list﻿. 
Pie Chart Preview
﻿
We are currently experiencing issues with the legend of the Pie Chart component. We are working hard to fix this issue.
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
The core structure includes: 
For chart 
title- Its text and verticalAlign 
For series 
data - Values that should be used in the graph
layout - Pie or Arch - the preferred type of graph you would like to use
Other options:
chart
subtitle - A subtitle/ short description of your chart
height and width - The parameters of the graph displayed (in pixels)
series
name - The naming of the actual series
color - The color that should be used in the graph
legend
isHidden - The setting of a boolean value if the legend (naming of the series) should be displayed under the graph
Actions: 
onPress  - The possibility to add any of the actions (please refer to the list of our Actions). This action(s) will be triggered as a reaction to the press event.
﻿Examples and code snippets ﻿
Pie chart
Pie Chart
﻿
This jig displays a complete pie chart. In this example, these are issues where green shows resolved issues, yellow issues in progress, and red unresolved issues.
Examples:
See the full code sample using static data in GitHub. 
See the full code sample using dynamic data in GitHub.
Datasources:
See the full datasource code sample for dynamic data in GitHub. 
pie-chart (static)
pie-chart (dynamic)
datasources (dynamic)
|
children:
  - type: component.pie-chart
    options:
      chart:
        title:
          text: Issues
          verticalAlign: center
        width: 180
        height: 180
      legend:
          isHidden: true
      series:
          - data: =[{"y":1, "color":"color4"}, {"y":2, "color":"color2"}, {"y":3, "color":"color3"}]
            dataLabels:
              - isEnabled: true
            layout: pie
children:
  - type: component.pie-chart
    options:
      chart:
        title:
          text: Issues
          verticalAlign: center
        width: 180
        height: 180
      legend:
          isHidden: true
      series:
          - data: =[{"y":1, "color":"color4"}, {"y":2, "color":"color2"}, {"y":3, "color":"color3"}]
            dataLabels:
              - isEnabled: true
            layout: pie
﻿
Pie chart type arch
Pie chart - arch
﻿
This jig displays an arc pie chart. This example shows the occupancy in a  warehouse; the green color shows available space and the red color indicates occupied space.
Examples:
See the full code sample using static data in GitHub. 
See the full code sample using dynamic data in GitHub. 
Datasources:
See the full datasource code sample for dynamic data in GitHub. 
arch-chart (static)
arch-chart (dynamic)
datasources (dynamic)
|
datasources:
  pie-arch-chart-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/charts
      query: |
        SELECT 
          id, 
          json_extract(data, '$.seriesy') as y, 
          '$.color', 
          '$.category', 
          json_extract(data, '$.seriesx') as x, 
          '$.subtitle', 
          '$.title' 
        FROM [default/charts] WHERE '$.category' = "arch-chart"
datasources:
  pie-arch-chart-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/charts
      query: |
        SELECT 
          id, 
          json_extract(data, '$.seriesy') as y, 
          '$.color', 
          '$.category', 
          json_extract(data, '$.seriesx') as x, 
          '$.subtitle', 
          '$.title' 
        FROM [default/charts] WHERE '$.category' = "arch-chart"
﻿
See also
﻿Developer reference 
﻿Related examples (Github)﻿
﻿