Charting with View Entities

Last modified: January 27, 2025

Introduction

You can use view entities to create charts in Studio Pro. This process uses aggregated data.

Use Case

For this purpose of this use case, the following domain model is used:

For example, you own a small business. To keep track of what is being sold, you want to visualize your sales. You want to see how much you make in sales each year, and how each product category contributes to the number. You would like your chart to look similar to the one below:

Create a View Entity

Mendix charts do not take associations, so you usually have to take extra steps to use a non-persistable entity as a source. Using view entities is a faster and simpler way to create a chart.

For the chart, you want the year on the X axis, and the total sales on the Y axis. Create a view entity that groups this data by product category. To do this, follow the steps below:

  1. Open your domain model and create a new view entity named YearlySalesByCategoryVE.

  2. Add the following query to the OQL editor:

    SELECT
  CAST(DATEPART(YEAR, o.OrderDate) as INTEGER) as OrderYear
  , c.CategoryId as CategoryId
  , c.CategoryName as CategoryName
  , SUM(ol.Quantity * ol.UnitPrice * (1 - ol.Discount)) as TotalSales
FROM SalesDashboard."Order" as o
  JOIN SalesDashboard.OrderLine_Order/SalesDashboard.OrderLine as ol
  LEFT JOIN SalesDashboard.OrderLine_Product/SalesDashboard.Product as p
LEFT JOIN SalesDashboard.Product_Category/SalesDashboard.Category as c
GROUP BY c.CategoryId, c.CategoryName, CAST(DATEPART(YEAR, o.OrderDate) as INTEGER)

Create the Chart

Use the new view entity to create a chart. Follow the steps below:

  1. Create a new page or open an existing page.

  2. Navigate to the Toolbox and add a Column chart to the page.

  3. Double-click the chart and in the Data Source field, click New.

  4. Configure the chart by filling out the following:

    • Data set - Multiple series
    • Data source - YearlySalesByCategoryVE
    • Group by - CategoryId
    • X axis attribute - OrderYear
    • Y axis attribute - *TotalSales

  5. Set the series name to reflect the category name. Do the following:

    • In the Series name field, click Edit and add {1} in the Template field.

    • In the Parameters field, click New > Select > CategoryName > Select > OK.

The chart should be configured as seen below:

  1. Click OK to save.

  2. Run your app locally and you should see the chart populated with your data.