Navigation: Ultimate Suite for PowerBuilder Help > PowerChart >

Add Graph to your Application

Send comments on this topic.

 

Add the PB library

Add the advguicharts.pbl/pbd to your application's library list

Global variables

//You must add 2 global variables to your application to enable the chart.js datawindow. The first one will manage all configuration on your computer whereas the second one contains the core chart.js engines javascript code.

n_cst_pbwc_config gnv_config
 n_cst_pbwc_core_engine gnv_pbwc_core_engine

Application open event

//Initialize the core engine. The first time you will run the application, It may take some seconds to configure the environment. If your exe file name is not the same as your Powerbuilder application, specify the exe filename as the argument of the of_init function, otherwise specify an empty string.

gnv_pbwc_core_engine.of_init("")

Adding a Chart.js datawindow to your window

Add a new user object control of type : uov_chart_js_datawindow. It is better if you name the control dw_gr_xxxx

The control should look like this.

If you want to visually know what graph it will display, go to the graph painter and select file/export. to save your chart.js datawindow object preview as a .PNG file. Then add a picture control on your window that overlays the chart.js datawindow control and make it display your image. Then set its property visible to false. This is just to make it easier to recognize your chart.js datawindow when you put multiple of them on a window, it is not needed to use the chart.js datawindow.

Set the graphobject   attribute

For standard datawindows you set the dataobject attribute, here you set the graphobjectattribute. It correspond to the name of the Chart.js datawindow you created with the Chart.js datawindow painter.

Settransobject

If your graphobject is linked to a datawindow object that accesses a database, you need to set the transobject as you would do with a regular datawindow.

In the constructor event of you chart.js datawindow, call the settransobject function:

this.settransobject(sqlca)

Retrieve

If you are accessing a database, you must call the retrieve function of your chart.js datawindow and provide retrieval arguments if needed. Unlike with a traditional datawindow, you must call the retrieve function in the ue_init event of your chart.js datawindow if you want the data to be displayed immediately after the window opens. You can also call the retrieve function after any event triggered by the user. All retrieval argument must be passed as a CSV string. If your chart.js datawindow is linked to more than one datawindow (multi-chart chart.js datawindow), must must provide the index of the chart as a second parameter to the retrieve function.

ue_init event :

this.retrieve("2003")

Selectionchanged of a list box control:

dw_chart_js.retrieve(this.text)


Copyright © 2021 Werysoft Inc.