Creates object of the
PmaPanel type and object of the
PmaWebDir type.
There is a script
onPageModify in the
PmaWebDir object that calls the methods
graph and
sourcedata. The
"graph" method creates the
html page that contain links to
Highcharts open source application for chart rendering. The
"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 that has its specification. The first row represents the header where the first column is time and in the following columns the names of variables. The following rows and columns contain the data to be displayed. The dimension of the data set is defined by the variables
nRows and
nCols.
In the
"graph" method, it is possible to define the appearance and labels in the chart:
- in the sections title:, subtitle and yAxis, there are the main title, secondary title and Y axis label.
- in the section series:, there is the line width setting, rendering type setting, colors and transparency for each chart line.
The description and additional options can be found in documentation :
https://api.highcharts.com/highcharts/.
The
open source application is linked online so the chart rendering will be possible only if the Web client can connect to the internet.
Highcharts - Open Source Graphing Library
highcharts.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.
highcharts.js is licensed under the MIT license.
Highcharts.js can be used in two modes:
1. online (see preconfiguration), with connection to files stored on the Web (minimum -
https://code.highcharts.com/highcharts.js)
Procedure:
- into any
PmaPanel object insert a single state
PmgButton and select "Action" open (Open panel - in independent window (target:_blank;)) and then set the "Path to panel" (path to the previously inserted
PmaWebDir object)
- into any
PmaPanel object insert a
PmgFrame for displaying the defined URL address
- 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 Pm application folder:
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
highcharts.js (graphics library) - download at the site:
https://code.highcharts.com/highcharts.js (copy the link to the browser and save the page as a file in the folder "
Web" application)
- in the text of the "
graph" method of the
PmaWebDir "
Graph" object, modify the path to the .js files as follows: '
../dir/highcharts.js', '
../dir/data.js', '
../dir/exporting.js and '
../dir/offline-exporting.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 object | Name 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: "PanelGraph" |
|---|
|
| 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 | |
|---|