line-chart

10min
The component can be used to display statistics related to data records. Mostly used in jig.default﻿ or jig.list﻿. 
Line Chart Preview
﻿
﻿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 yAxis - min and max values that should be displayed on the y-axis. The max property doesn't have to be filled, in this case, it will be automatically counted depending on your data. 
For xAxis - categories that should be displayed on the x-axis
For series - data, and color - values and color that should be used in the graph
Other options:
chart 
title and subtitle - Name and a short description of your chart
height and width - The parameters of the graph displayed (in pixels)
yAxis
labels - Selection of different formats is available
tickAmount - The number of ticks that should be displayed on the y-axis
xAxis 
labels - Selection of different formats is available
tickAmount - The number of ticks that should be displayed on the x-axis
min and max - Minimum and maximum values that should be displayed on the x-axis.
plotOptions
series - Different properties allow to manipulate with the visual of the graph points (width of columns, the interval between two points, option to hide markers)
series
name - The naming of the actual series
animation - An option to add an animation of various direction(s) and duration for the first data load
legend 
isHidden - The setting of a boolean value if the legend (naming of the series) should be displayed under the graph
﻿Examples and code snippets ﻿
Line-chart financial
Financial line-chart
﻿
The widget displays an annual overview of finances. The x-axis shows the months and the y-axis is the monetary amount. Thanks to number formatting, we can set any currency.
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub.
Datasources:
See the full datasource for dynamic data in GitHub.
﻿
line-chart (static)
line-chart (dynamic)
datasources (dynamic)
|
datasources:
  finance-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/finances
      query: |
        SELECT 
          id, 
          json_extract(data, '$.date') as x, 
          json_extract(data, '$.amount') as y, 
          '$.financeid', 
          '$.category' 
        FROM [default/finances] WHERE '$.category' = "finance-month" ORDER BY '$.financeid' ASC
datasources:
  finance-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/finances
      query: |
        SELECT 
          id, 
          json_extract(data, '$.date') as x, 
          json_extract(data, '$.amount') as y, 
          '$.financeid', 
          '$.category' 
        FROM [default/finances] WHERE '$.category' = "finance-month" ORDER BY '$.financeid' ASC
﻿
Line-chart multiple series
Multiple series
﻿
The widget displays an annual overview of finances. The x-axis shows the months and the y-axis the monetary amount. Thanks to number formatting, we can set any currency.
Examples:
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub. 
Datasources in order series1 and series2:
See the full datasource for dynamic data series 1 and series 2 in GitHub.
line-chart-multiple (static)
line-chart-mulitple (dynamic)
datasources (dynamic)
|
datasources:
  series1-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' = "chart1" ORDER BY x
  
  series2-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' = "chart2" ORDER BY x
    
datasources:
  series1-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' = "chart1" ORDER BY x
  
  series2-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' = "chart2" ORDER BY x
    
﻿
See also
﻿Developer reference 
﻿Related examples (Github)﻿
﻿