Hi I would like to make a simple chart that displays bars for the values of two different attributes against each other. I have already read through the documentation but I am really struggling to understand how to use this widget, would someone be able to explain to me in further detail? Many thanks Austin
The ChartJS widget is indeed a struggle in the beginning. I will try to elaborate on the steps need to get you going.
You should start with the set-up of the domain model as depicted in the documentation of the widget (Chart, Dataset and Datapoint entities, their attributes and associations).
he ChartJS widget needs to be placed in a dataview on page. Usually I create a non-persistent entity, ChartWrapper, with a 1-1 association to the 'Chart' entity. Use a microflow as data source for the dataview containing the widget and create one object of the ChartWrapper.
Now we have to set-up the actual widget:
On the data source tabpage of the widget select the 'Chart' entity as chart entity
Create a microflow that will fill the widget with actual data.
Some steps that need to be taken in this microflow:
Input parameter: ChartWrapper
Create object: Chart and associate with the ChartWrapper
Create a DataSet with label and color for each bar you want
Create a microflow for the DataPoints (more on that later)
Change the Chart object and associate(Add and NOT Set) all new datasets to the chart
Microflow with DataPoints: each DataPoint represents a bar of a certain DataSet in the chart. So if you would like a bar for every month in the year you will need to make 12 DataPoints associated with the DataSet (by association MultiplePoints). Each DataPoint needs to be filled with the following data:
xvalue: the label on the x-axis (for example: the month of the year)
xsortingvalue: the place of the bar (for example: for January you would like 1 etc.)
yvalue: the actual value of the bar (and thus the height)
I hope this will help you!
Tom van den Bergen
There is also an example project in their github. Download the test.mpr file.