line, area, spline-area, step-area, spline, step, step-after, step-before
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, numeric GTS only |
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'
- type: Chart type (line, area, scatter, step-area, spline-area, spline, step, step-after, step-before)
- xAxis: In case of multi-X axis support, represents the index of related axis.
- yAxis: In case of multi-Y axis support, represents the index of related axis.
1 4 <%
DROP NEWGTS 'g' STORE
1 30 <%
'ts' STORE
$g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP
%> FOR
$g %> FOR STACKTOLIST 'data' STORE
{
'data' $data
'params' [
{ 'datasetColor' '#dc3545' 'xAxis' 0 }
{ 'datasetColor' '#ff9900' 'xAxis' 0 }
{ 'type' 'area' 'datasetColor' '#90d743' 'xAxis' 1 }
{ 'datasetColor' 'white' 'xAxis' 0 }
]
}
Samples
Simple area chart
<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="area" chart-title="area chart">
1 4 <% DROP
NEWGTS 'g' STORE
1 10 <% 'ts' STORE
$g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP
%> FOR
$g
%> FOR
</discovery-tile>
</div>
1 4 <% DROP
NEWGTS 'g' STORE
1 10 <% 'ts' STORE
$g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP
%> FOR
$g
%> FOR
Mixed chart
<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="area" chart-title="Mixed chart">
1 4 <% DROP NEWGTS 'g' STORE
1 10 <% 'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP %> FOR
$g %> FOR STACKTOLIST 'data' STORE
{ 'data' $data 'params' [ { 'type' 'area' } { 'type' 'step-area' } { 'type' 'line' } { 'type' 'spline-area' } ] }
</discovery-tile>
</div>
1 4 <% DROP NEWGTS 'g' STORE
1 10 <% 'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP %> FOR
$g %> FOR STACKTOLIST 'data' STORE
{ 'data' $data 'params' [ { 'type' 'area' } { 'type' 'step-area' } { 'type' 'line' } { 'type' 'spline-area' } ] }
Multi Axis charts
<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="area" chart-title="multi Y axis">
1 4 <% 'i' STORE NEWGTS 'g' STORE
1 10 <% 'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND $i 2 * * ADDVALUE DROP %> FOR
$g
%> FOR STACKTOLIST 'data' STORE
{ 'data' $data 'params' [ { 'yAxis' 0 } { 'yAxis' 0 } { 'yAxis' 1 } { 'yAxis' 2 } ] }
</discovery-tile>
</div>
1 4 <% 'i' STORE NEWGTS 'g' STORE
1 10 <% 'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND $i 2 * * ADDVALUE DROP %> FOR
$g
%> FOR STACKTOLIST 'data' STORE
{ 'data' $data 'params' [ { 'yAxis' 0 } { 'yAxis' 0 } { 'yAxis' 1 } { 'yAxis' 2 } ] }
<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="area" chart-title="multi X axis">
1 4 <% 'i' STORE NEWGTS 'g' STORE
1 10 <% 'ts' STORE $g $ts RAND + 1 d * NOW + $i w - NaN NaN NaN RAND $i 2 * * ADDVALUE DROP %> FOR
$g
%> FOR STACKTOLIST 'data' STORE
{ 'data' $data 'params' [ { 'xAxis' 0 } { 'xAxis' 1 } { 'xAxis' 1 } { 'xAxis' 2 } ] }
</discovery-tile>
</div>
1 4 <% 'i' STORE NEWGTS 'g' STORE
1 10 <% 'ts' STORE $g $ts RAND + 1 d * NOW + $i w - NaN NaN NaN RAND $i 2 * * ADDVALUE DROP %> FOR
$g
%> FOR STACKTOLIST 'data' STORE
{ 'data' $data 'params' [ { 'xAxis' 0 } { 'xAxis' 1 } { 'xAxis' 1 } { 'xAxis' 2 } ] }
Hidden axis
<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="area">
1 2 <% DROP NEWGTS 'g' STORE
1 10 <% 'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP %> FOR
$g %> FOR STACKTOLIST 'data' STORE
{ 'data' $data 'globalParams' { 'hideYAxis' true 'hideXAxis' true 'showDots' true } }
</discovery-tile>
</div>
1 2 <% DROP NEWGTS 'g' STORE
1 10 <% 'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN RAND ADDVALUE DROP %> FOR
$g %> FOR STACKTOLIST 'data' STORE
{ 'data' $data 'globalParams' { 'hideYAxis' true 'hideXAxis' true 'showDots' true } }
Threshold
<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="area" chart-title="Thresholds">
[
1 4 <%
DROP NEWGTS 'g' STORE
1 10 <%
'ts' STORE $g $ts RAND + STU * NOW + NaN NaN NaN 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 $ts RAND + STU * NOW + NaN NaN NaN 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 }
]
}
}
Markers
<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="area" chart-title="Markers">
1 2 <% 'i' STORE NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE
1 50 <% 'ts' STORE $g $ts NaN NaN NaN RAND 100 * ADDVALUE DROP %> FOR
$g %> FOR STACKTOLIST 'gts' STORE
{ 'data' $gts
'params' [
{
'pieces' [
{ 'color' '#77BE69' 'lte' 33 }
{ 'color' '#ff9900' 'gte' 33 'lte' 66 }
{ 'gte' 66 }
]
}
{ 'datasetColor' '#c6c6c6' }
]
'globalParams' {
'timeMode' 'timestamp'
'markers' [
{ 'start' 5 'value' 10 'color' '#77BE69' 'type' 'dotted' 'fill' true 'name' 'area 51' }
{ 'value' 20 'color' '#ff9900' 'type' 'solid' }
{ 'value' 30 'name' 'Hello' }
]
'thresholds' [
{ 'value' 25 'color' '#77BE69' 'fill' true }
{ 'value' 50 'color' '#ff9900' }
{ 'value' 75 'name' 'Danger' }
]
}
}
</discovery-tile>
</div>
1 2 <% 'i' STORE NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE
1 50 <% 'ts' STORE $g $ts NaN NaN NaN RAND 100 * ADDVALUE DROP %> FOR
$g %> FOR STACKTOLIST 'gts' STORE
{ 'data' $gts
'params' [
{
'pieces' [
{ 'color' '#77BE69' 'lte' 33 }
{ 'color' '#ff9900' 'gte' 33 'lte' 66 }
{ 'gte' 66 }
]
}
{ 'datasetColor' '#c6c6c6' }
]
'globalParams' {
'timeMode' 'timestamp'
'markers' [
{ 'start' 5 'value' 10 'color' '#77BE69' 'type' 'dotted' 'fill' true 'name' 'area 51' }
{ 'value' 20 'color' '#ff9900' 'type' 'solid' }
{ 'value' 30 'name' 'Hello' }
]
'thresholds' [
{ 'value' 25 'color' '#77BE69' 'fill' true }
{ 'value' 50 'color' '#ff9900' }
{ 'value' 75 'name' 'Danger' }
]
}
}
Pieces
<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="area" chart-title="Pieces">
0 1 <% 'i' STORE NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE
1 100 <% 'ts' STORE $g $ts $i 100 * + NaN NaN NaN RAND 100 * ADDVALUE DROP %> FOR
$g %> FOR STACKTOLIST 'gts' STORE
{ 'data' $gts 'params' [
{
'xpieces' true
'pieces' [ { 'color' '#FF00FF' 'gte' 33 'lte' 66 } ]
}
{
'xpieces' false
'pieces' [ { 'color' '#dc143c' 'gte' 33 'lte' 66 } ]
}
]
}
</discovery-tile>
</div>
0 1 <% 'i' STORE NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE
1 100 <% 'ts' STORE $g $ts $i 100 * + NaN NaN NaN RAND 100 * ADDVALUE DROP %> FOR
$g %> FOR STACKTOLIST 'gts' STORE
{ 'data' $gts 'params' [
{
'xpieces' true
'pieces' [ { 'color' '#FF00FF' 'gte' 33 'lte' 66 } ]
}
{
'xpieces' false
'pieces' [ { 'color' '#dc143c' 'gte' 33 'lte' 66 } ]
}
]
}