Loading

bar

NameDefault
--warp-view-chart-label-color#8e8e8e
--warp-view-chart-grid-color#8e8e8e
NameTypeDescription
dataGTS, GTS[], custom dataData to display
globalParamsOptionGlobal options (see above) concerning this tile
paramsOption[]List of options (see above) concerning each displayed dataset depending of the index of this array
eventsEvents[]List of events to emit (see below)

Supported option per series are:

  • datasetColor: Hex CSS color of the series. ie: '#fff00f'
  • bar
    • horizontal: Bar chart orientation
    • stacked

Custom data

{
  "title": "Test",
  "columns":  [ "A", "B", "C", "D" ],
  "rows": [
    [ "label X", 15, 56, 44, 22 ],
    [ "label Y", 1, 5, 4, 2 ],
    [ "label Z", 14, 45, 78, 12 ]
  ]
}

Samples

Simple bar chart

<div style="height: 500px">
  <discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="bar" chart-title="bar chart">
    NOW 'now' STORE
    1 4 <% DROP NEWGTS 'g' STORE
    1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND ADDVALUE DROP %> FOR
    $g
    %> FOR
  </discovery-tile>
</div>
NOW 'now' STORE 1 4 <% DROP NEWGTS 'g' STORE 1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND ADDVALUE DROP %> FOR $g %> FOR

Stacked bar chart

<div style="height: 500px">
  <discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="bar" chart-title="Stacked bar chart">
    NOW 'now' STORE
    1 4 <% DROP NEWGTS 'g' STORE
    1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND ADDVALUE DROP %> FOR
    $g
    %> FOR STACKTOLIST 'values' STORE
    { 'data' $values 'globalParams' { 'bar' { 'stacked' true } } }
  </discovery-tile>
</div>
NOW 'now' STORE 1 4 <% DROP NEWGTS 'g' STORE 1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND ADDVALUE DROP %> FOR $g %> FOR STACKTOLIST 'values' STORE { 'data' $values 'globalParams' { 'bar' { 'stacked' true } } }

Custom data bar chart

<div style="height: 500px">
  <discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="bar">
    {
    'title' 'Test'
    'columns'  [ 'A' 'B' 'C' 'D' ]
    'rows' [
    [ 'label X' 15 56 44 22 ]
    [ 'label Y' 1 5 4 2 ]
    [ 'label Z' 14 45 78 12 ]
    ]
    } 'values' STORE
    { 'data' $values 'globalParams' { } }
  </discovery-tile>
</div>
{ 'title' 'Test' 'columns' [ 'A' 'B' 'C' 'D' ] 'rows' [ [ 'label X' 15 56 44 22 ] [ 'label Y' 1 5 4 2 ] [ 'label Z' 14 45 78 12 ] ] } 'values' STORE { 'data' $values 'globalParams' { } }

Horizontal stacked bar chart with custom data

<div style="height: 500px">
  <discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="bar">
    {
    'title' 'Test'
    'columns'  [ 'A' 'B' 'C' 'D' ]
    'rows' [
    [ 'label X' 15 56 44 22 ]
    [ 'label Y' 1 5 4 2 ]
    [ 'label Z' 14 45 78 12 ]
    ]
    } 'values' STORE
    { 'data' $values 'globalParams' { 'bar' { 'horizontal' true 'stacked' true } } }
  </discovery-tile>
</div>
{ 'title' 'Test' 'columns' [ 'A' 'B' 'C' 'D' ] 'rows' [ [ 'label X' 15 56 44 22 ] [ 'label Y' 1 5 4 2 ] [ 'label Z' 14 45 78 12 ] ] } 'values' STORE { 'data' $values 'globalParams' { 'bar' { 'horizontal' true 'stacked' true } } }

Threshold

<div style="height: 500px">
  <discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="bar" chart-title="Thresholds">
    [
    1 4 <%
    DROP NEWGTS 'g' STORE
    1 10 <%
    'ts' STORE $g NOW ->TSELEMENTS [ 0 5 ] SUBLIST TSELEMENTS-> $ts s - RAND 50 * RAND  50 * RAND RAND ADDVALUE DROP
    %> FOR
    $g
    %> FOR
    ] 'data' STORE
    {
    'data' $data
    'globalParams' {
    'thresholds' [
    { 'value' 0.25 'color' '#77BE69' 'fill' true }
    { 'value' 0.5 'color' '#ff9900' }
    { 'value' 0.75 }
    ]
    }
    }
  </discovery-tile>
</div>
[ 1 4 <% DROP NEWGTS 'g' STORE 1 10 <% 'ts' STORE $g NOW ->TSELEMENTS [ 0 5 ] SUBLIST TSELEMENTS-> $ts s - RAND 50 * RAND 50 * RAND RAND ADDVALUE DROP %> FOR $g %> FOR ] 'data' STORE { 'data' $data 'globalParams' { 'thresholds' [ { 'value' 0.25 'color' '#77BE69' 'fill' true } { 'value' 0.5 'color' '#ff9900' } { 'value' 0.75 } ] } }

Axis bounds

<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="bar" chart-title="Bounds">
NOW 'now' STORE
[ 
  1 4 <% 
    'i' STORE NEWGTS 'data-' $i TOSTRING + RENAME  'g' STORE
    1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND 100 * ADDVALUE DROP %> FOR
    $g
  %> FOR
] 'data' STORE
{ 
  'data' $data 
  'globalParams' {
    'bounds' { 
      'maxDate' $now 1 m + 
      'minDate' $now 1 m -  
      'yRanges' [ -20 200 ]
    }
  }
}
</discovery-tile>
</div>
NOW 'now' STORE [ 1 4 <% 'i' STORE NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE 1 10 <% 'ts' STORE $g $now $ts STU * - NaN NaN NaN RAND 100 * ADDVALUE DROP %> FOR $g %> FOR ] 'data' STORE { 'data' $data 'globalParams' { 'bounds' { 'maxDate' $now 1 h + 'minDate' $now 1 h - 'yRanges' [ -20 200 ] } } }