Promotic

Preconfiguration "Widget Plotly - 3D chart rendering CSV data (Plotly - Open Source Graphing Library)"



This preconfiguration can be activated when creating a new Pmg object and is included in the group: "/ Widgets". Widget Plotly - 3D chart rendering CSV data (Plotly - Open Source Graphing Library)

The preconfiguration creates object of the PmgFrame type and a new panel subobject PmaWebDir in the selected panel.

There is a script in the onPageModify event in the PmaWebDir object that calls the methods widget and data. The designer's "widget" method creates the html page that contains a link to plotly open source application for chart rendering. The designer's "data" method prepares the source data to be displayed by the chart.

In the "data" method, the data is prepared into a specific csv format. The first row and first column of this of this format contains the index of the row/column, but the 0,0 position contains an empty string. Following rows and columns contain data to be displayed in the chart. The data is prepared in the function GetVal ofthis method. The dimension of the data set is defined by the variables nRows and nCols.

The open source application is linked online so the chart rendering will be possible only if the Web client can connect to the internet.
Warning:
For the widget to work properly in a local application, it is necessary to have WewbView2 (Edge) installed on the Windows OS.
The component is called Microsoft Edge WebView2 Runtime version Evergreen.
Its use must be enabled in the application's "ini" file.
See Web browser (/#glob/webbrowser)

Plotly - Open Source Graphing Library

Plotly.js is a standalone JavaScript data visualization open source graphing library (https://plotly.com/javascript/).
Plotly.js can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.
Plotly.js is licenced under the MIT licence.


Plotly.js can be used in two modes:
 
1. online (this preconfiguration), with connection to files stored on the Web (minimum - https://cdn.plot.ly/plotly-latest.min.js)

2. offline with locally stored files in the "Resource" folder of the PROMOTIC application:
 
Procedure:
- Download and save the file plotly.min.js (graphics library) - download at the site: https://cdn.plot.ly/plotly-latest.min.js (copy the link to the browser and save the page as a file into the folder "Resource" application).
- Download and save the file plotly-locale-en-latest.js (localization into english) - download at the Website: https://cdn.plot.ly/plotly-locale-en-latest.js (copy the link to the browser and the page save as a file in the "Resource" folder of the application).
- In the text of the "widget" method of the PmaWebDir "widget" object, modify the path to the .js files as follows: '/$appres/plotly-latest.min.js' and '/$appres/plotly-locale-cs-latest.js'.
- The source data is emulated in the "data" method, where its structure is apparent. The method must be modified in order to obtain the data from the application.
These configurators can be set before the preconfiguration is created:
Object nameName (identifier) of the Pmg object. It is used to obtain the Pmg object by the PmgObject.Items method.
This configurator sets the initial value of the Name property.
The maximum name length is 30 characters. This is a system name, so it must contain only alphanumeric and must not contain any diacritics, empty string, spaces and the first character must not be a number.
The preconfiguration creates object of the PmgFrame type and a new panel subobject PmaWebDir in the selected panel.
Name of the PmaWebDir subobjectName of the PmaWebDir subobject

History:
Pm9.00.22: Created
PROMOTIC 9.0.22 SCADA system documentation - MICROSYS, spol. s r.o.

Send page remarkContact responsible person
Navigation:
 
 
- Widget Plotly - 3D chart rendering CSV data (Plotly - Open Source Graphing Library)
 
 
© MICROSYS, spol. s r. o.