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 } } }