How To

How to modify the data by coding

You can access the datastores that are used as datasources for your graphs via the inv_graph_srv instance variable of your graph object. Once you've modified the source data, just call the of_display_graph() funciton. Here is an example :
I have a datawindow on my window named dw_1 and I want to share its data with my graph so that they are synchronized. You can place this code in the ue_init event of your graph control (if you want the data to be displayed at the opening of the window) or in any event such as the click of a button:

dw_1.sharedata(dw_chart_js.inv_graph_srv.ids_chart_datasource[1])
dw_chart_js.inv_graph_srv.of_display_graph()

How to format the displayed data

To format the data you must Display the Advanced configuration Parameters (In the Tools Menu of the Chart.js Painter).

There are 3 places where you can specify a format:

Tooltips

To format the data displayed in the tooltips, in the Chart options tab, specify a javascript format function in the "Tooltip Javascript callback function for formating".

For example, if you want to format the data with a dollar symbol enter (or select the $9,999 option in the dropdown list box):

label: function(tooltipItem, data) {return '$ '+ tooltipItem.yLabel.toLocaleString();}

Data Labels

To format the displayed data, in the Global configuration tab, specify a javascript format function in the Formatter field in the Data labels section.

For example, if you want to format the data with a % symbol enter (or select the 9,999% option in the dropdown list box):

function(value){return value.toLocaleString()+'%';}

Axes

To format the data labels of the ticks of one of the axes, in the Axes tab, specify a format javascript function in the "Callback Javascript function for formatting" field in the Common Tick Configuration.

For example, if you want to format the Tick labels with a dollar symbol enter (or select the $9,999 option in the dropdown list box):

function(value, index, values) { return '$ ' + value.toLocaleString();}

Modify/get the generated Javascript code

You can modify the Javascript code sent to the Web Browser Control from the "javascript_preview" event of the uov_chart_js_datawindow control. You get the code generated by the chart engine from the as_code parameter. To send the modified code back to the engine, return a variable containing the modified code.