Use custom widgets

If you need more widgets than the built-in ones, you can:
  • Download a widget from the Apache ECharts website, add it with its JS file, and then customize JavaScript.
  • Copy the JavaScript of a widget from the Apache ECharts website, and then paste the JavaScript to the widget editor.
Typically, a widget has two associated JS files:
  • Files ended with _
    Custom.js
     are for the widget appearance.
  • Files ended with _
    Refresh.js
     are for the data connection.
To add a custom widget
  1. Go to the Apache ECharts website, and then find a chart or graph that you need.
  2. Download a widget's JavaScript, and then save it as a JS file. Alternatively, you can copy its JavaScript, and then paste it to the widget editor later.
    IMPORTANT:
    The JS file name must end with _
    Custom.js
     or _
    Refresh.js.
  3. In FactoryTalk View Studio, select
    .NET Control
     from the
    Toolbox
    , and then add it to a display.
  4. On the
    Windows Forms
     tab, select
    EChartsWidget
    , and then select
    OK
    .
  5. In the
    DotNetControl Properties
     dialog box, select
    EChartsWidget Setup
    .
  6. In the
    EChartsWidget Properties
     dialog box, select the browse button next to
    AppearanceScript
     or
    ConnectionScript
    .
  7. In the
    EChartsWidget editor
    , select
    Add widget
    , and then select both JS files.
    If you've copied a widget's JavaScript, paste it to the editor, and then go to step 9.
    The _Custom.js is loaded in the
    Appearance editor
    , and the _Refresh.js is loaded in the
    Connection editor
    . You should customize and edit the scripts in the individual editor for them to work.
  8. From the
    Select widget
     list, select your custom widget.
  9. Configure JavaScript as needed and bind with the value connections.
  10. Enter values in
    Preview properties
    , and then select
    Preview
    .
  11. If the widget in the preview is what you want, select
    OK
    .
  12. Return to the
    DotNetControl Properties
     dialog box, and then select the
    Connections
     tab.
  13. Bind the value connections with your tags, and then select
    OK
    .
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal