line, area, scatter, 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 }
  ]
}

Custom data

Custom data for line and scatter only:

<% [ 0 10 <% DROP [ RAND 10 * 5 -   RAND 10 * 5 - ] %> FOR ] %> 'rand' STORE
  {
    'title' 'Test'
    'globalParams' { }
    'data' [
      { 'label' 'A' 'values' @rand }
      { 'label' 'B' 'values' @rand }
    ]
  }

Samples

Simple scatter chart

<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="scatter" chart-title="scatter 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

Simple scatter chart with custom data

<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="scatter" chart-title="scatter chart">
<% [ 0 10 <% DROP [ RAND 10 * 5 -   RAND 10 * 5 - ] %> FOR ] %> 'rand' STORE
  {
    'title' 'Test'
    'globalParams' { }
    'data' [
      { 'label' 'A' 'values' @rand }
      { 'label' 'B' 'values' @rand }
    ]
  }
</discovery-tile>
</div>

<% [ 0 10 <% DROP [ RAND 10 * 5 - RAND 10 * 5 - ] %> FOR ] %> 'rand' STORE { 'title' 'Test' 'globalParams' { } 'data' [ { 'label' 'A' 'values' @rand } { 'label' 'B' 'values' @rand } ] }

Bubble chart with custom data

<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="scatter" chart-title="Bubble chart">
<% [ 0 10 <% DROP [ RAND 10 * 5 -   RAND 10 * 5 - RAND 100 * ] %> FOR ] %> 'rand' STORE
{
  'title' 'Test'
  'globalParams' { }
  'data' [
    { 'label' 'A' 'values' @rand }
    { 'label' 'B' 'values' @rand }
  ]
}
</discovery-tile>
</div>

<% [ 0 10 <% DROP [ RAND 10 * 5 - RAND 10 * 5 - RAND 100 * ] %> FOR ] %> 'rand' STORE { 'title' 'Test' 'globalParams' { } 'data' [ { 'label' 'A' 'values' @rand } { 'label' 'B' 'values' @rand } ] }

Threshold

<div style="height: 500px">
<discovery-tile url="https://sandbox.senx.io/api/v0/exec" type="scatter" 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="scatter" 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="scatter" 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 } ] } ] }

Custom data
Samples