beta
cables is under heavy development.
There might be one or another bug, please let us know about it!

ECharts Op

ECharts

wrapper for echarts-library


This OP wraps the ECharts data visualization library: https://echarts.apache.org/en/tutorial.html and allows to create more than a hundred charts with a single configuration object, focusing on the description of the charts instead of its implementation.


Edit Documentation

Full Name
  • Ops.Extension.ECharts.ECharts
Visibility
  •  Extension Op - Visible to all users
AuthorMaintained by TeamJavascript Libraries
  • echarts.js (Apache ECharts is a powerful, interactive charting and data visualization library for browser)



 

Example Patch Simple ECharts Example

a simple example on how to use the echarts-library to draw graphs in cables

Open In Editor

Youtube Video Tutorial

INPUT PORTS


Create (Trigger)

Trigger to create the chart.

Parent DOM element (Object)

Sets the chart as a child of the parent DOM element

Id (String)

ID of the element for selection if you have multiple charts

Width (Number:integer )

Width in pixel

Height (Number:integer )

Height in pixel

Chart Object (Object)

Main configuration object, the "options" parameters of the ECharts library

Merge options (Object)

Optional: Sets how to update the chart if new data comes in: https://echarts.apache.org/en/api.html#echartsInstance.setOption

Renderer index (Number:integer )

0 = canvas, 1 = svg

Renderer (String)

canvas or svg

Theme index (Number:integer )

0 = default, 1 = light, 2 = dark

Theme (String)

default, light, dark

Custom theme obj (Object)

Optional, if you set this object it overrides the theme of the chart. Create your theme here: https://echarts.apache.org/en/theme-builder.html

Init extra Options (Object)

Optional chart configuration, see opts object here: https://echarts.apache.org/en/api.html#echarts

Style (Number:string )

Custom CSS to position the chart, width and height will be overridden by the Width and Height input ports

Visible (Number:boolean )

Sets whether the chart is visible or not

OUTPUT PORTS


DOM Element (Object)

Div element containing the chart

ECharts instance (Object)

ECharts object

Chart updated (Trigger)

Triggered if the chart has been modified, useful if you continuously update data and refresh the chart

Theme changed (Trigger)

Triggered if the theme has changed


Usages of ECharts

  • Examples
  • Public
  • My Patches
  • Ops

Known Issues

The ECharts WebGL extension library is not supported (yet).

Changelog


created opuser avatarkikohs - 2021-03-05
Ops.User.stephan.ECharts renamed to Ops.Libs.EChartsuser avatarstephan - 2021-03-05
Ops.Libs.ECharts renamed to Ops.Libs.ECharts.EChartsuser avatarstephan - 2021-03-05
Ops.Libs.ECharts.ECharts renamed to Ops.Extension.ECharts.EChartsuser avatarstephan - 2022-12-14