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

Samples