Promotic

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

3D chart rendering data in the CSV format (Plotly - Open Source Graphing Library)

Creates object of the PmaPanel type and object of the PmaWebDir type.

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

In the "sourcedata" 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.

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)
 
Procedure:
- Into any PmaPanel object insert a single state PmgButton and select "Action" open (Open panel - in a separate window (target:_blank;)) and then set the "Path to panel" (path to the previously inserted PmaWebDir object)
- Edit the PmgButton object and in its event onButtonUp into the empty quotation marks (the sViewPars parameter of the CreateView method) enter the name of the displazed file: "file:graph.htm".
- Into any PmaPanel object insert a PmgFrame for displaying the defined URL address
- Edit the inserted PmgFrame object and on its tab Frame set the "Viewer" configurator (path to previously inserted object PmaWebDir) and into the "sViewPars default value" configurator enter the name of the displayed file : "file:graph.htm".
- The source data is emulated in the "sourcedata" method, where the structure of the data is apparent. The method must be modified in order to get the data from the application.


2. offline with locally stored files in the "Web" folder of the PROMOTIC application:
 
Procedure:
- Follow all the steps as in the previous setup.
- Then create a new Web folder in your application folder.
- 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 in the folder "Web" 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 "Web" folder of the application).
- Create a new PmaWebDir object in the PmaWeb object.
- In the text of the "graph" method of the PmaWebDir "Graph" object, modify the path to the .js files as follows: '../dir/plotly-latest.min.js' and '../dir/plotly-locale-en-latest.js'.
- The source data is emulated in the "sourcedata" 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:
The name of created objectName of the object created in the tree of Pma objects. 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.
Default: "Panel3Dgraph"
Creates object of the PmaPanel type and object of the PmaWebDir type. There is a frame in the panel that displays the chart created in the PmaWebDir object. All settings and the source data are in this object. See more details in help.
Name of the new PmaWebDir object
Path to the PmaWeb object
Example:
This way the page can be opened independently without using the panel: Script in the onButtonUp event of the PmgButton object, that opens the graph.htm page of the PmaWebDir object.
JavaScriptSelect and copy to clipboard

Pm.CreateView(null, "/Web/Graph3D", "file:graph.htm", "target:_blank;").Open();
See also:
- Panels (PmaPanel)
- What are preconfigurations
- PmaWebDir
History:
Pm9.00.15: Created
PROMOTIC 9.0.21 SCADA system documentation - MICROSYS, spol. s r.o.

Send page remarkContact responsible person
© MICROSYS, spol. s r. o.