bar
Name | Default |
--warp-view-chart-label-color | #8e8e8e |
--warp-view-chart-grid-color | #8e8e8e |
Name | Type | Description |
data | GTS , GTS[] , custom data | Data to display |
globalParams | Option | Global options (see above) concerning this tile |
params | Option[] | List of options (see above) concerning each displayed dataset depending of the index of this array |
events | Events[] | 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 ]
}
}
}