1. Usage
  2. Input parameters
  3. Expected output format
  4. Example of use
  5. The example in action

Quantumviz widget

The Quantumviz widget is used to visualize data from the Warp 10™ platform.

Usage

To use the widget in an HTML page you need:

  • Import the webcomponents.js polyfill from the Polymer CDN:
<script src="https://cdn.cityzendata.net/quantumviz/dependencies/webcomponentsjs/webcomponents.js"></script>
  • Import the warp10-components.html widget from the SenX website:
<link async rel="import" href="https://home.senx.io/quantum/warp10-components.html">
  • Use the <warp10-warpscript-widget backend="https://warp.senx.io/api/v0"> tag in your HTML
<warp10-warpscript-widget backend="https://warp.senx.io/api/v0">YOUR_WARPSCRIPT_CODE_HERE</warp10-warpscript-widget>

Input parameters

The Quantumviz widget puts onto the stack a series of variables to allow you to interact with them into your WarpScript™ script. These variables are:

  • width: the width in pixels of the widget. It allows you to do a BUCKETIZE to limit the number of points in each series according to your visualization capabilities.

  • host: if you are not using a Warp 10™ entry point in the same domain from which you're serving the widget, you must configure the host parameter with the base URL (protocol and domain or IP address) of the platform version you want to use.

<warp10-warpscript-widget host='https://example.org'>YOUR_WARPSCRIPT_CODE_HERE></warp10-warpscript-widget>

Expected output format

The Quantumviz widget expects to find in only one item in the WarpScript stack, a MAP with the following properties:

  • gts: a LIST of GTS to plot
  • params: a LIST of visualization parameters for each GTS to plot
  • globalParams (optional): a MAP of global visualizations parameters

The two list must have the same size.

Each item in param is a MAP of (mostly optional) parameters to apply to the corresponding item in gts LIST. Available parameters are:

  • key: the legend to associate to the GTS
  • color (optional): the color of the line, as an CSS compliant color STRING (e.g.: #cc0505)
  • globalParams is an optional MAP of parameters to apply to the whole chart.

Available parameters are:

  • interpolate: the interpolating function used. Default mode is step-before, other usual modes are linear, basis and cardinal. The complete list of interpolation functions is here

Example of use

<script src="https://cdn.cityzendata.net/quantumviz/dependencies/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://cdn.cityzendata.net/quantumviz/warp10-warpscript-widget.html">

<warp10-warpscript-widget width="500" height="400" backend="https://warp.senx.io/api/v0" exec-endpoint="/exec">
  [
    NEWGTS
    100000000 NaN NaN NaN 110 ADDVALUE
    200000000 NaN NaN NaN 120 ADDVALUE
    300000000 NaN NaN NaN 130 ADDVALUE
    400000000 NaN NaN NaN 140 ADDVALUE
    500000000 NaN NaN NaN 140 ADDVALUE
    600000000 NaN NaN NaN 140 ADDVALUE

    NEWGTS
    100000000 NaN NaN NaN 10 ADDVALUE
    200000000 NaN NaN NaN 9 ADDVALUE
    300000000 NaN NaN NaN 8 ADDVALUE
    400000000 NaN NaN NaN 7 ADDVALUE
    500000000 NaN NaN NaN 6 ADDVALUE
    600000000 NaN NaN NaN 8 ADDVALUE
  ]
  'gts' STORE

  [
    { 'color' '#ff1010' 'key' 'Heartrate' }
    { 'color' '#1010ff' 'key' 'Speed' }
  ]
  'params' STORE

  { 'interpolate' 'cardinal' } 'globalParams' STORE
  
  { 'gts' $gts
    'params' $params
    'globalParams' $globalParams
  }
</warp10-warpscript-widget>

The example in action

[ NEWGTS 100000000 NaN NaN NaN 110 ADDVALUE 200000000 NaN NaN NaN 120 ADDVALUE 300000000 NaN NaN NaN 130 ADDVALUE 400000000 NaN NaN NaN 140 ADDVALUE 500000000 NaN NaN NaN 140 ADDVALUE 600000000 NaN NaN NaN 140 ADDVALUE NEWGTS 100000000 NaN NaN NaN 10 ADDVALUE 200000000 NaN NaN NaN 9 ADDVALUE 300000000 NaN NaN NaN 8 ADDVALUE 400000000 NaN NaN NaN 7 ADDVALUE 500000000 NaN NaN NaN 6 ADDVALUE 600000000 NaN NaN NaN 8 ADDVALUE ] 'gts' STORE [ { 'color' '#ff1010' 'key' 'Heartrate' } { 'color' '#1010ff' 'key' 'Speed' } ] 'params' STORE { 'interpolate' 'cardinal' } 'globalParams' STORE { 'gts' $gts 'params' $params 'globalParams' $globalParams }