Widgets

chart

8min

The chart widget is suitable for displaying the line-chart, bar-chart, or pie-chart on the Home Hub﻿ .
Chart widgets
﻿
﻿Configuration options﻿
Core structure
﻿
chart
The configuration is the same as for the chart components, refer to the line-chart, bar-chart, or pie-chart examples.
Other options
﻿
bottom
The titles component will be added to the bottom of the widget.
footer
Add text to the footer of the widget.
footerAlign
Align the footer text to left, right, center.
placeholders
Specify a placeholder text to display if there is no data, for example - title: No data to display.
top
The titles component will be added to the top of the widget.
﻿Examples and code snippets ﻿
Line-chart 2x2
﻿
In this example select the chart widget and add a component.line-chart and add a component.trend at the top to show the positive percentage trend and a component.titles at the bottom.
Example:
See the complete example in GitHub.
chart-line-1_2x2.jigx
datasource
grid-item
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-line-1_2x2
          widgetId: line1-2x2
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-line-1_2x2
          widgetId: line1-2x2
﻿
In this example select the chart widget and add a component.line-chart and add a component.title at the top.
Example:
See the complete example in GitHub.
﻿
chart-line-1_2x4.jigx
datasource
grid-item
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-line-1_2x4
          widgetId: line1-2x4
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-line-1_2x4
          widgetId: line1-2x4
﻿
Line-chart widget 4x4
﻿
In this example select the chart widget and add a component.line-chart and add a component.title at the top and at the bottom.
Example:
See the complete example in GitHub for the Sales performance line-chart widget.
See the complete example in GitHub for the Quarterly Company Progress.
chart-line-2_4x4.jigx
chart-line-1_4x4.jigx
grid-item
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-line-2_4x4
          widgetId: line2-4x4
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-line-2_4x4
          widgetId: line2-4x4
﻿
line-chart widget
﻿
This example is configured using a line-chart to display in the chart widget.
Examples:
See the complete example using static data in GitHub. 
See the complete example using dynamic data in GitHub.
Datasources:
See the complete datasource for static data in GitHub. 
See the complete datasource for dynamic data in GitHub. 
﻿
line-chart-widget (static)
line-chart-widget (dynamic)
grid-item
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: line-chart-widget 
          widgetId: lineChartDD-4x2
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: line-chart-widget 
          widgetId: lineChartDD-4x2
﻿
Group widget with line-charts
﻿
In this example two line-chart widgets are combined in the group widget with the component.titles to add additional information.
Example:
See the complete example in GitHub.
combined-chart-chart-1_4x2.jigx
coin-history.jigx (function)
coin-history-etherum.jigx (function)
grid-item
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: combined-chart-chart-1_4x2
          widgetId: combined-chart1-4x2
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: combined-chart-chart-1_4x2
          widgetId: combined-chart1-4x2
﻿
In this example select the chart widget and add a component.bar-chart and add a component.trend at the top.
Example:
See the complete example in GitHub.
Bar-chart widget 2x2
﻿
chart-bar-1_2x2.jigx
datasource
grid-item
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-bar-1_2x2
          widgetId: line1-2x2
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-bar-1_2x2
          widgetId: line1-2x2
﻿
Bar-chart widget 4x2
﻿
In this example a chart widget is used with the component.bar-chart and component.titles at the top to add a title and subtitle.
Example:
See the complete example in GitHub.
chart-bar-1_4x2.jigx
datasource
grid-item
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-bar-1_4x2
          widgetId: bar1-4x2
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-bar-1_4x2
          widgetId: bar1-4x2
﻿
Bar-chart widget
﻿
This example is configured using a bar-chart to display in the chart widget.
Examples:
See the complete example using static data in GitHub.
See the complete example using dynamic data in GitHub.
Datasources:
See the complete datasource for static data in GitHub.
See the complete datasource for dynamic data in GitHub.
﻿
bar-chart-widget (static)
bar-chart-widget (dynamic)
grid-item
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: bar-chart-widget
          widgetId: barChartStatic-4x2
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: bar-chart-widget
          widgetId: barChartStatic-4x2
﻿
Pie-chart widget 2x
﻿
This example is configured using a pie-chart to display in the chart widget.
Examples:
See the complete example using static data in GitHub.
See the complete example using dynamic data in GitHub.
Datasources:
See the complete datasource for static data in GitHub.
See the complete datasource for dynamic data in GitHub.
﻿
pie-chart-widget (static)
pie-chart-widget (dynamic)
grid-item
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: pie-chart-widget
          widgetId: pieChartDD-2x2
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: pie-chart-widget
          widgetId: pieChartDD-2x2
﻿
In this example a chart widget is used with the component.pie-chart and component.titles at the top and bottom to add additional information.
Example:
See the complete example in GitHub.
Pie-chart widget 2x4
﻿
chart-pie-1_2x4.jigx
datasource
grid-item
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-pie-1_2x4
          widgetId: pie1-2x4
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: chart-pie-1_2x4
          widgetId: pie1-2x4
﻿
﻿
In this example a group widget is used to combine a chart and list widget  with component.pie-chart and  component.titles at the top to add additional information.
Example:
See the complete example in GitHub.
Group widget 4x
﻿
combined-chart-list-1_4x2.jigx
datasource
grid-item
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: combined-chart-list-1_4x2
          widgetId: chart-list1-4x2
# Grid-item for the jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: combined-chart-list-1_4x2
          widgetId: chart-list1-4x2
﻿
﻿

Core structure
chart	The configuration is the same as for the chart components, refer to the line-chart, bar-chart, or pie-chart examples.

Other options
bottom	The titles component will be added to the bottom of the widget.
footer	Add text to the footer of the widget.
footerAlign	Align the footer text to left, right, center.
placeholders	Specify a placeholder text to display if there is no data, for example - title: No data to display.
top	The titles component will be added to the top of the widget.