Using the Mendix ChartJS widget

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  
2 answers

Hi 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:

  1. xvalue: the label on the x-axis (for example: the month of the year)
  2. xsortingvalue: the place of the bar (for example: for January you would like 1 etc.)
  3. yvalue: the actual value of the bar (and thus the height)


I hope this will help you!



There is also an example project in their github. Download the test.mpr file.