Customer chartjs

Goal

Develope a chartjs graph.

The basic customer table already exist. The numerical columns of your database table are automatically associated to your graph columns.

More informations:

K8 Web Kit chartjs
chartjs.org

Support is available by discord: K8 Web Kit

Prerequisites

Your customer element from the first exercise:

your exercise customer form

customer table with the columns:
- headtitlecolumn: name1
- estimatedturnover
- estimatedcosts

Instructions for Elements online

data defintion: excustomer.json:

Please have a look to the documentation of elements online.

You need to be registerted and logged in. Open the elements online in your environement.

Choose your datadefID from the first exercise. Edit the data defintion (excustomer.json). Add the chartjs library in the head[].

First chartjs, basic settings

Without defining your columns, K8 Web Kit creates a bar chart about the numerical columns of your database table.

basic settings:

Please insert this data structure into your datadefinition, the "JSON" file.

With the settings for title and legend they are formatted and positioned. More at:

chartjs.org

The supported chart types are:

bar (default)
line
pie
doughnut

Define the columns

For the 2 columns:

estimatedturnover
estimatedcosts

the bar color is changed and the label for the legend ist set.

Create a filter form

The defintion for the filterform: filterobject is placed in the section:

chartjs_def

One field

With figure is set to "2", which allows to enter a range. The operator is set to ">=". The operator for the max field is set automatically.

Save

Attention, it's not saved by a red box at the window bottom line! Only by the green "saved" message, you can continue.

Edit data by bar click (JavaScript for programmers)

excustomer.js:

settingsexcustomer.chartjs_def.chartjs.options.onClick=function(e){
  //console.log('chartjs click');
  const activePoints = e.chart.getElementsAtEventForMode(e, 'nearest', {
    intersect: true
  }, false)
  if(activePoints.length>0){
    var datasetIndex = activePoints[0].datasetIndex;
    const [{index}] = activePoints;
    //console.log(datasetIndex);
    //console.log(e.chart.data.datasets[datasetIndex].data[index]);
    let dat=e.chart.data.datasets[datasetIndex].data[index];
    let options={};
    k8.createOverlayid(options);
    settingsexcustomer.masterdata.keyvalue=dat[settingsexcustomer.key];
    settingsexcustomer.masterdata.notabulator=true;
    settingsexcustomer.masterdata.edittype=3;
    settingsexcustomer.masterdata.window_mode=3;
    settingsexcustomer.masterdata.bnoform=false;
    settingsexcustomer.return={};
    settingsexcustomer.return.chart=e.chart;
    settingsexcustomer.return.data_index=index;
    let el_masterdata=$('#overlay_content').masterdata(settingsexcustomer);
  }
}
settingsexcustomer.masterdata.cbAfterSave=[];
settingsexcustomer.masterdata.cbAfterSave.push(function(options){
  //console.log("cbAfterSave");
  let dat=options.dat;
  let bnew=options.bnew;
  let settings=options.settings;
  if(settings.return.chart){
    //$('#k8-overlay').remove();
    let chart=settings.return.chart;
    let index=settings.return.data_index;
    chart.data.datasets[0].data[index]=dat;
    chart.data.datasets[1].data[index]=dat;
    chart.update();
  }
});

Insert this lines behind the function declaration.

Save

Explanation

Chart.js offers a onClick event and also alows to change the dataset and update it. Attention, this is a subject for programmers and chart.js experts.

add chartjs.options.onClick()
get the index of clicked bar
config settingsexcustomer.masterdata for edit:
- keyvalue: the accountID of the customer record
- edittype / window_mode set to 3 for editing in overlay
- notabulator / bnofrom to disable the tabulator list
config settingsexcustomer.return for execution after save:
- set chartsjs
- set data_index
masterdata: open the master data form

Call back: cbafterSave() updates the chart:

chart.data.datasets[0]

options.settings.return contains:
- chart: the chart element
- data_index: index of the chart dataset
chart.data.datasets[]data[index] are updated with the customer record
chart.update(), the chart is displayed with the new data