chart

the chart widget is suitable for displaying the < line chart https //docs jigx com/examples/line chart , bar chart https //docs jigx com/examples/bar chart , or pie chart https //docs jigx com/examples/pie chart on the home hub configuration options core structure chart the configuration is the same as for the chart components, refer to the line chart https //docs jigx com/examples/line chart , bar chart https //docs jigx com/examples/bar chart , or pie chart https //docs jigx com/examples/pie chart examples other options bottom the titles https //docs jigx com/examples/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 https //docs jigx com/examples/titles component will be added to the top of the widget considerations it is recommended to set either the top , bottom , or both properties when configuring a chart widget to ensure it renders correctly and maintains a clear, readable layout within the widget examples and code snippets chart widget line chart component (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 https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/2x2/chart line 1 2x2 jigx chart line 1 2x2 jigx widgets line1 2x2 \# select chart widget and then add the compoments trend and line chart type widget chart options top type component trend options title quarterly revenue style isalignright false isvaluebottom true value 0 911111111111 format numberstyle percent chart type component line chart options legend ishidden false series \ data =@ctx datasources static data datalabels \ isenabled true name quarterly revenue 2020 layout area gradient xaxis categories \ q1 \ q2 \ q3 \ q4 yaxis isfirstlabelhidden true isfirsttickhidden true labels format compactdisplay long notation compact numberstyle currency min 0 tickamount 3 bottom type component titles options subtitle updated 1 min ago align center datasource datasources static data type datasource static options data \ x q1/20 y 25000 \ x q2/20 y 32000 \ x q3/20 y 45000 \ x q4/20 y 86000 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 chart widget line chart component (2x4) 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 https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/2x4/chart line 1 2x4 jigx chart line 1 2x4 jigx widgets line1 2x4 type widget chart options top type component titles options title company perf subtitle "2022" chart type component line chart options plotoptions series marker ishidden true series \ animation direction left to right data =@ctx datasources static data name quarterly revenue 2020 color color6 layout area gradient xaxis categories \ q1 \ q2 \ q3 \ q4 yaxis isfirstlabelhidden true isfirsttickhidden true labels format compactdisplay short notation compact numberstyle currency min 0 max 75000 tickamount 6 datasource datasources static data type datasource static options data \ x q1/20 y 35000 \ x q2/20 y 32000 \ x q3/20 y 28000 \ x q4/20 y 45000 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 chart widget line chart component (4x4) 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 https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/4x4/chart line 2 4x4 jigx for the sales performance line chart widget see the complete example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/4x4/chart line 1 4x4 jigx for the quarterly company progress chart line 2 4x4 jigx title line chart 2 (4x4) type jig default datasources static data type datasource static options data \ 41456 \ 40667 \ 50445 \ 57223 static data2 type datasource static options data \ 43445 \ 48230 \ 37230 \ 89400 static data3 type datasource static options data \ 45778 \ 64889 \ 20009 \ 50432 children \ type component entity options children \ type component entity field options label placeholder value value widgets line2 4x4 type widget chart options top type component titles options title sales performance chart type component line chart options yaxis min 0 tickamount 7 labels format notation compact numberstyle currency xaxis categories \ "07/22" \ "08/22" \ "09/22" \ "10/22" series \ data =@ctx datasources static data layout area gradient animation direction bottom to top color color7 \ data =@ctx datasources static data2 layout area gradient animation direction bottom to top color color9 \ data =@ctx datasources static data3 layout area gradient animation direction bottom to top color color2 bottom type component titles options title 110 new paying customers subtitle goal for 2022 icon multiple neutral 2 iconcolor color4 align center chart line 1 4x4 jigx title line chart 1 (4x4) type jig default datasources static data type datasource static options data \ x q1/20 y 25767 \ x q2/20 y 45320 \ x q3/20 y 33100 \ x q4/20 y 91750 children \ type component entity options children \ type component entity field options label placeholder value value widgets line2 4x4 type widget chart options top type component titles options title $91 750 icon chart chart type component line chart options legend ishidden false series \ animation direction left to right data =@ctx datasources static data color color3 datalabels \ isenabled true name quarterly revenue 2022 layout area gradient xaxis categories =@ctx datasources static data x yaxis isfirstlabelhidden true isfirsttickhidden true labels format compactdisplay short notation compact numberstyle currency min 0 tickamount 5 bottom type component titles options title quarterly company progress subtitle "2022" align center 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 chart widget line chart component (4x2) this example is configured using a line chart to display in the chart widget examples see the complete example using static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/chart/static data/chart widget with line chart/chart widget line chart jigx see the complete example using dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/chart/dynamic data/chart widget with line chart/chart widget line dynamic jigx datasources see the complete datasource for static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/datasources/charts/static/series1 jigx see the complete datasource for dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/datasources/charts/dynamic/series1 dynamic jigx line chart widget (static) widgets linechartdd 4x2 type widget chart options chart type component line chart options chart height 150 isanimated true yaxis min 0 labels format numberstyle currency compactdisplay short notation compact tickamount 4 isfirsttickhidden true isfirstlabelhidden true xaxis categories \ q1 \ q2 \ q3 \ q4 series \ data =@ctx datasources series1 name year 2019 animation direction left to right layout area gradient datalabels \ isenabled true legend ishidden false line chart widget (dynamic) widgets linechartstatic 4x2 type widget chart options chart type component line chart options chart height 150 isanimated true yaxis min 0 labels format numberstyle currency compactdisplay short notation compact tickamount 4 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 legend ishidden false 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 chart widget line chart component in group widget (4x4) 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 https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/4x2/combined chart chart 1 4x2 jigx combined chart chart 1 4x2 jigx title chart & chart 1 (4x2) type jig default datasources bitcoin type datasource sqlite options provider data provider rest entities \ entity coin history function coin history functionparameters symbol btc eur query | with cte as ( select '$ ms' as ms, '$ close' as close from \[coin history] order by 1 desc ) select 1 row number() over (order by ms desc) as x, close as y from cte order by ms desc limit 1 + 1 7 etherum type datasource sqlite options provider data provider rest entities \ entity coin history etherum function coin history etherum functionparameters symbol eth eur query | with cte as ( select '$ ms' as ms, '$ close' as close from \[coin history etherum] order by 1 desc ) select 1 row number() over (order by ms desc) as x, close as y from cte order by ms desc limit 1 + 1 7 children \ type component line chart options chart height 300 legend ishidden false yaxis labels format numberstyle currency currency eur tickamount 6 series \# data =@ctx datasources bitcoin {'x'\ x,'y'\ y} \ data =@ctx datasources bitcoin color color4 name bitcoin eur (last 7 days) layout area gradient \ type component line chart options chart height 300 legend ishidden false yaxis labels format numberstyle currency compactdisplay short notation compact currency eur maximumsignificantdigits 5 maximumfractiondigits 5 tickamount 3 series \ data =@ctx datasources etherum color color4 name etherum eur (last 14 days) layout area gradient \# add the widgets group, then the chart widget with the two line chart components widgets combined chart1 4x2 type widget group options children \ type widget chart options top type component titles options title bitcoin subtitle btc to eur chart type component line chart options plotoptions series marker ishidden true legend ishidden false xaxis ishidden true yaxis labels format numberstyle currency compactdisplay long notation standard currency eur maximumsignificantdigits 5 maximumfractiondigits 5 tickamount 3 series \ data =@ctx datasources bitcoin color color4 name bitocin eur (last 14 days) layout area gradient \ type widget chart options top type component titles options title etherum subtitle btc to eur chart type component line chart options plotoptions series marker ishidden true legend ishidden false xaxis ishidden true yaxis labels format numberstyle currency compactdisplay short notation compact currency eur maximumsignificantdigits 5 maximumfractiondigits 5 tickamount 3 series \ data =@ctx datasources etherum color color4 name etherum eur (last 14 days) layout area gradient coin history jigx (function) method get provider data provider rest parameters symbol value btc eur location path type string required true url 'https //api exchange coinbase com/products/btc eur/candles' outputtransform > $ { "ms" $\[0] 1000, "close" $formatnumber($number($\[4]), '# 00000000') } coin history etherum jigx (function) method get provider data provider rest parameters symbol value eth eur location path type string required true url 'https //api exchange coinbase com/products/eth eur/candles' outputtransform > $ { "ms" $\[0] 1000, "close" $formatnumber($number($\[4]), '# 00000000') } 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 chart widget bar chart component (2x2) 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 https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/2x2/chart line 1 2x2 jigx chart bar 1 2x2 jigx widgets line1 2x2 type widget chart options top type component trend options title "this month" value +11 81818181818 format numberstyle unit unit percent style isalignright true isvaluehidden false isvaluebottom true chart type component bar chart options plotoptions series pointwidth 12 yaxis max 80 min 0 tickamount 3 labels format compactdisplay short notation compact numberstyle currency xaxis categories \ aug \ sep \ oct \ nov series \ data =@ctx datasources static data 1 color color3 \ data =@ctx datasources static data 2 color positive datasource datasources static data 1 type datasource static options data \ 10 \ 25 \ 17 \ 10 static data 2 type datasource static options data \ 15 \ 45 \ 55 \ 65 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 chart widget bar chart component (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 https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/4x2/chart bar 1 4x2 jigx chart bar 1 4x2 jigx widgets bar1 4x2 type widget chart options top type component titles options title new employees subtitle "2021 vs 2022" icon multiple neutral 2 iconcolor color4 chart type component bar chart options plotoptions series pointwidth 8 yaxis max 100 xaxis categories =@ctx datasources static data 1 x series \ data =@ctx datasources static data 1 color color4 \ data =@ctx datasources static data 2 color color6 datasource datasources static data 1 type datasource static options data \ y 10 x jun \ y 52 x jul \ y 49 x aug \ y 48 x sep static data 2 type datasource static options data \ 20 \ 52 \ 52 \ 60 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 chart widget bar chart component (4x2) this example is configured using a bar chart to display in the chart widget examples see the complete example using static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/chart/static data/chart widget with bar chart/chart widget bar chart jigx see the complete example using dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/chart/dynamic data/chart widget with bar chart/chart widget bar dynamic jigx datasources see the complete datasource for static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/datasources/charts/static/series1 jigx see the complete datasource for dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/datasources/charts/dynamic/series1 dynamic jigx bar chart widget (static) widgets barchartstatic 4x2 type widget chart options chart type component bar chart options chart height 150 isanimated true yaxis min 0 labels format numberstyle currency compactdisplay short notation compact tickamount 4 isfirsttickhidden true isfirstlabelhidden true xaxis categories \ q1 \ q2 \ q3 \ q4 series \ data =@ctx datasources series1 name year 2019 datalabels \ isenabled false legend ishidden false bar chart widget (dynamic) widgets barchartdd 4x2 type widget chart options chart type component bar chart options chart height 150 isanimated true yaxis min 0 labels format numberstyle currency compactdisplay short notation compact tickamount 4 isfirsttickhidden true isfirstlabelhidden true xaxis categories \ q1 \ q2 \ q3 \ q4 series \ data =@ctx datasources series1 dynamic name year 2019 datalabels \ isenabled false legend ishidden false 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 chart widget pie chart component (2x2) this example is configured using a pie chart to display in the chart widget examples see the complete example using static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/chart/static data/chart widget with pie chart/chart widget pie chart jigx see the complete example using dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/chart/dynamic data/chart widget with pie chart/chart widget pie dynamic jigx datasources see the complete datasource for static data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/datasources/charts/static/pie chart data jigx see the complete datasource for dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/datasources/charts/dynamic/pie chart dynamic jigx pie chart widget (static) widgets piechartdd 2x2 type widget chart options chart type component pie chart options chart title text issues verticalalign center width 120 height 120 legend ishidden true series \ data =@ctx datasources pie chart data datalabels \ isenabled true layout pie pie chart widget (dynamic) widgets piechartstatic 2x2 type widget chart options chart type component pie chart options chart title text issues verticalalign center width 120 height 120 legend ishidden true series \ data =@ctx datasources pie chart dynamic datalabels \ isenabled true layout pie 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 chart widget pie chart component (2x4) 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 https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/2x4/chart pie 1 2x4 jigx chart pie 1 2x4 jigx widgets pie1 2x4 type widget chart options chart type component pie chart options chart title text "67%" verticalalign center subtitle text "battery" verticalalign center series \ data =@ctx datasources static data layout arch color positive top type component titles options title vojta iphone subtitle iphone 14 pro align center icon mobile phone 1 iconcolor color14 bottom type component titles options title 10,75 gb (of 256 gb) subtitle available align center icon database 2 datasource datasources static data type datasource static options data \ y 67 \ y 23 color transparent 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 chart widget pie chart component in group widget (4x4) 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 https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/widgets/4x2/combined chart list 1 4x2 jigx combined chart list 1 4x2 jigx widgets chart list1 4x2 type widget group options children \ type widget chart options chart type component pie chart options chart title text "3 of 5" verticalalign center subtitle text done verticalalign center series \ data =@ctx datasources chart layout pie color color3 top type component titles options title onboarding subtitle jigx, inc align center \ type widget list options data =@ctx datasources list item type component list item options color \ when =(@ctx current item status = 'done' ? true \ false) color color14 \ when =(@ctx current item status = 'waiting' ? true \ false) color color1 title =@ctx current item task number subtitle =@ctx current item name leftelement element checkbox value =(@ctx current item status = 'done' ? true \ false) style isstrikethrough =(@ctx current item status = 'done' ? true \ false) isdisabled =(@ctx current item status = 'done' ? true \ false) datasource datasources chart type datasource static options data \ y 3 \ y 2 color transparent list type datasource static options data \ icon person task number task 4 name meet with colleagues status waiting \ icon checklist task number task 5 name use jigx app status waiting \ icon synchronize arrows 1 task number task 3 name meet your manager status done \ icon synchronize arrows 1 task number task 2 name set email & calendar status done \ icon play task number task 1 name watch jigx intro video status done 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