line-chart

the component can display statistics related to data records represented in a line chart this can show a single or multiple data series for comparative purposes and highlight specific regions or ranges on the chart to make it easier for users to interpret and analyze the data mostly used in jig default docid\ rtomyji3uoxiqxdultz3o or jig list docid 5uifnxycbeewhizctnjqm configuration options configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb for a list and their configuration options core structure series data values to be used in the chart color defines the color of the bar used in the chart xaxis categories to display on the x axis yaxis min and max values that display on the y axis the max property doesn't have to be defined, in this case, it will automatically be calculated depending on your data other options chart title and subtitle name and a short description of your chart height and width the parameters of the chart displayed (in pixels) legend ishidden the setting of a boolean value if the legend (naming of the series) should be displayed under the chart plotbands use plotbands to highlight specific regions or ranges on the chart, making it easier for users to interpret and analyze the data \ the from and to properties define the area to be filled with color specify the range using the from and to properties with numeric values \ color sets the color of the band for the y axis , choose a color from the provided color palette plotoptions series different properties available to manipulate the data shown in the bar such as width of columns, the interval between two points, option to hide markers series datalabels isenabled can be set to true or false layout options are area area gradient line name the naming of the actual series xaxis isfirstlabelhidden value is either true to hide the first label or false to display the first label the property doesn't have to be defined, by default the first label is shown isfirsttickhidden value is either true/false set to true hides the whole axis ishidden value is either true/false islastlabelhidden value is either true to hide the last label or false to display the last label the property doesn't have to be defined, by default the last label are shown islasttickhidden value is either true to hide the last line and label or false to display the last line and label the property doesn't have to be defined, by default the last label and line are shown labels label of axis, a selection of different formats such as dateformat , currency , unit , and signdisplay are available min and max minimum and maximum values that should be displayed on the x axis minpadding when no categories set, a 1% space is made on the left and right of the chart so the id doesn't start on the left or ends on the right edge exactly the default is set to 0 02 (x axis) and 0 05 (y axis) tickamount the number of ticks to display on the x axis the final amount doesn't have to be exactly the same number as you pass into it round up to 6 to give the chart a good set of numbers 0, 20, 40, 60, 80, 100 set ticks to 3 will be honored and shows 0, 50, and 100 yaxis isfirstlabelhidden value is either true/false set to true hides the first label the property doesn't have to be defined, by default the first label is shown isfirsttickhidden value is either true/false set to true hides the whole axis ishidden value is either true/false set to true the last label is hidden islastlabelhidden value is either true to hide the last label and line or false to display the last label and line the property doesn't have to be defined, by default the last label and line are shown islasttickhidden value is either true to hide the last line and label or false to display the last line and label the property doesn't have to be defined, by default the last label and line are shown labels label of axis, a selection of different formats such as currency , numberstyle , compactdisplay and notation is available minpadding when no categories set, a 1% space is made on the left and right of the chart so the id doesn't start on the left or ends on the right edge exactly the default is set to 0 02 (x axis) and 0 05 (y axis) min and max minimum and maximum values that should be displayed on the y axis tickamount the number of ticks to display on the x axis the final amount doesn't have to be exactly the same number as you pass into it round up to 6 to give the chart a good set of numbers 0, 20, 40, 60, 80, 100 set ticks to 3 will be honored and shows 0, 50, and 100 considerations the line chart control expects a json object using a rest call can return data as text to get the json object for the rest call there are two options add the $eval function to the expressions as shown below type component line chart options chart height 150 series \ data =$eval(@ctx datasources weatherdata temperatures max) in the datasource specify the fields to be returned as a json object by using the jsonproperties in the datasource query as shown below datasources weatherdata type datasource sqlite options provider data provider local entities \ entity weather query | select id, '$ timezone', '$ units', '$ today max', '$ today min', '$ date', '$ temperatures max', '$ temperatures min' from \[weather] jsonproperties \ temperatures max \ temperatures min examples and code snippets examples and code snippets line chart financial 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) children \ type component line chart options legend ishidden true chart title text "12 months overview" height 260 isanimated false yaxis min 1100 max 2200 labels format numberstyle currency currency usd compactdisplay short notation compact tickamount 5 isfirsttickhidden false isfirstlabelhidden false series \ data =\[{"x" "jun", "y" 1851}, {"x" "jul", "y" 1483}, {"x" "aug", "y" 1250}, {"x" "sep", "y" 2067}, {"x" "oct", "y" 1650}, {"x" "nov", "y" 1280}, {"x" "dec", "y" 1430}, {"x" "jan", "y" 1398}, {"x" "feb", "y" 1763}, {"x" "mar", "y" 2151}, {"x" "apr", "y" 1543}, {"x" "may", "y" 1475}] name "2021/2022" color color2 line chart (dynamic) children \ type component line chart options legend ishidden true chart title text "12 months overview" height 260 isanimated false yaxis min 0 labels format numberstyle currency currency usd compactdisplay short notation compact tickamount 5 isfirsttickhidden false isfirstlabelhidden false series \ data =@ctx datasources finance dynamic {'x'\ x,'y'\ y} name "2021/2022" color color2 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 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) children \ type component line chart options chart height 200 isanimated true yaxis min 0 labels format numberstyle currency compactdisplay short notation compact tickamount 8 isfirsttickhidden true isfirstlabelhidden true xaxis categories \ q1 \ q2 \ q3 \ q4 series \ data =\[{"x" "q1/19", "y" 25000, "color" "color2"}, {"x" "q2/19", "y" 32000, "color" "color2"}, {"x" "q3/19", "y" 45000, "color" "color2"}, {"x" "q4/19", "y" 86000, "color" "color2"}] name year 2019 animation direction left to right layout area gradient datalabels \ isenabled true \ data =\[{"x" "q1/20", "y" 12000, "color" "color3"}, {"x" "q2/20", "y" 48000, "color" "color3"}, {"x" "q3/20", "y" 36000, "color" "color3"}, {"x" "q4/20", "y" 120000, "color" "color3"}] name year 2020 animation direction left to right layout area gradient datalabels \ isenabled true legend ishidden false line chart mulitple (dynamic) children \ type component line chart options chart height 200 isanimated true yaxis min 0 labels format numberstyle currency compactdisplay short notation compact tickamount 8 isfirsttickhidden true isfirstlabelhidden true xaxis categories \ q1 \ q2 \ q3 \ q4 series \ data =@ctx datasources series1 dynamic name year 2019 animation direction left to right layout area gradient datalabels \ isenabled true \ data =@ctx datasources series2 dynamic name year 2020 animation direction left to right layout area gradient datalabels \ isenabled true legend ishidden false 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 line chart with plot bands the chart shows an annual overview of finances the x axis shows the months and the y axis is the monetary amount the data points are easy to see as we used the plotbands property to add color single or multiple bands can be defined by adding the form , to and color properties examples see the full example using static data in github line chart plotbands title current account overview type jig default children \ options chart height 260 isanimated false title text 12 months overview legend ishidden true series \ color color2 data =\[{"x" "jun", "y" 1851}, {"x" "jul", "y" 1483}, {"x" "aug", "y" 1250}, {"x" "sep", "y" 2067}, {"x" "oct", "y" 1650}, {"x" "nov", "y" 1280}, {"x" "dec", "y" 1430}, {"x" "jan", "y" 1398}, {"x" "feb", "y" 1763}, {"x" "mar", "y" 2151}, {"x" "apr", "y" 1543}, {"x" "may", "y" 1475}] name 2021/2022 yaxis isfirstlabelhidden false isfirsttickhidden false labels format compactdisplay short currency usd notation compact numberstyle currency \# add three bands of different color to the line chart plotbands \ from 1400 to 1600 color color1 \ from 1600 to 1800 color color2 \ from 1800 to 2000 color color3 min 1100 max 2200 tickamount 5 type component line chart line chart using expressions in this example expressions are used to dertermine the min , max , and tickamount of a line chart the x axis shows the quarters and the y axis the monetary amount using the format property to display the currency examples see the full code sample in github datasources see the datasource code sample in github line chart multiple dynamic #add to jigs folder title multiple series with expressions type jig default datasources staticinputs type datasource static options data \ id 1 isfirstlabelhidden true isfirsttickhidden true min 1000 tickamount 8 children \ type component line chart options chart height 280 isanimated true legend ishidden false series \ animation direction left to right data =@ctx datasources series1 dynamic datalabels \ isenabled true layout area gradient name year 2019 \ animation direction left to right data =@ctx datasources series2 dynamic datalabels \ isenabled true layout area gradient name year 2020 xaxis categories \ q1 \ q2 \ q3 \ q4 yaxis isfirstlabelhidden =@ctx datasources staticinputs isfirstlabelhidden isfirsttickhidden =@ctx datasources staticinputs isfirsttickhidden labels format compactdisplay short notation compact numberstyle currency min =@ctx datasources staticinputs min tickamount =@ctx datasources staticinputs tickamount series2 dynamic #add to datasource folder 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