Sunburst chart Visualizations in Mendix

Sunburst chart Visualizations in Mendix

We live in a world of data, where transforming raw data into meaningful insights is crucial for making informed decisions in business. In this data-driven landscape, platforms like Mendix play a pivotal role. Mendix empowers businesses to create robust applications with ease. As the demand for intuitive and insightful data representation grows, the role of charts in Mendix becomes increasingly significant.

The Significance of Advanced Visualizations

As businesses strive to gain deeper insights from their data, the limitations of basic charts become apparent. Mendix provides a default chart widget with a good set of fundamental charts, however complex and diverse datasets often require more sophisticated visualizations. Complex charts, such as sunburst charts, offer a nuanced representation of intricate data relationships, enabling users to uncover patterns, trends, and outliers that might go unnoticed in simpler charts.

Integrating Chart Libraries into Mendix

These advanced visualizations are indispensable for conveying complex information clearly and concisely, making them essential tools for data-driven decision-making and comprehensive reporting within the dynamic landscape of today’s business environment.

For this purpose, we will examine various chart libraries and integrate them into our Mendix applications. let’s explore how to integrate the JavaScript chart library D3.js, and then we will look at some simpler solutions using JSON.

Custom Widgets for Custom Charts

JavaScript Integration — D3.js/Chart.js

In this example, we are required to build a widget for a JavaScript-based integration (an example of one such widget — link). This widget is unique to the chart being built.

While integrating JavaScript-based libraries like D3.js or Chart.js for advanced visualizations in Mendix, it’s important to note that widget development is often considered an expert-level task. Crafting precise and customized widgets demands a deep understanding of both the Mendix platform and the specific chart library.

However, recognizing that not all Mendix developers may be comfortable with expert-level widget development, there are alternative approaches. Mendix provides a more accessible method using JSON integration, where developers can leverage existing libraries like Plotly or Apache e-charts. This allows developers with varying skill levels to create powerful and visually appealing charts without delving into the intricacies of widget development. The JSON method offers a more straightforward path for those who prioritize simplicity and efficiency in their development.

Simplifying Chart Implementations Using JSON

JSON Integration — Plotly/Apache e-charts

Using Plotly Library:

One only needs to figure out the JSON structure needed for the chart integration. Add the Anychart widget (link) and pass the JSON data into the widget.

Using Apache e-charts Library:

One needs to figure out the JSON structure needed for the chart integration. Add the Apache e-chart widget (link) and pass the JSON data into the widget.

Choose the library that aligns better with your specific charting needs and the development approach you are comfortable with in Mendix. One major setback for chart building using the JSON method is arriving at the JSON structure. So let’s see what it takes to build the JSON structure for the chart we need.

Steps to create a JSON structure:

For brevity, I will give the steps for the Plotly Library. A similar approach should be taken for the Apache Library as well. Consider an example of a sunburst chart.

Simple Sunburst chart.

1. Search for the chart needed in the Anychart library.
2. Finalize the chart you want to implement. Below is the link to the chart we are trying to implement.
3. Check if you can find the details needed for the chart in the cheat sheet provided by Mendix (link).
4. The sunburst chart is not available in the cheat sheet provided by Mendix. Does it mean that the sunburst chart cannot be implemented? No.
5. Now let’s try to create a JSON structure for the sunburst chart. We understand that the simplest JavaScript structure is as follows:

var data = [{
  type: "sunburst",
  labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
  parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
  values:  [10, 14, 12, 10, 2, 6, 6, 4, 4],
  outsidetextfont: {size: 20, color: "#377eb8"},
  leaf: {opacity: 0.4},
  marker: {line: {width: 2}},
}];

var layout = {
  margin: {l: 0, r: 0, b: 0, t: 0},
  width: 500,
  height: 500
};


Plotly.newPlot('myDiv', data, layout);

Let’s figure out the cheat sheet for Sunburst. Below is the JSON structure we can map to the above JavaScript script. This is done manually by understanding the structure; however, you can try out the JavaScript-to-JSON converters as well (link). We need to make sure that the node names are the same in whichever language it is, for example, parents, labels, and values:

[
  {
    "type": "sunburst",
    "labels": [
      "Eve",
      "Cain",
      "Seth",
      "Enos",
      "Noam",
      "Abel",
      "Awan",
      "Enoch",
      "Azura"
    ],
    "parents": [
      "",
      "Eve",
      "Eve",
      "Seth",
      "Seth",
      "Eve",
      "Eve",
      "Awan",
      "Eve"
    ],
    "values": [
      10,
      14,
      12,
      10,
      2,
      6,
      6,
      4,
      4
    ],
    "outsidetextfont": {
      "size": 20,
      "color": "#377eb8"
    },
    "leaf": {
      "opacity": 0.4
    },
    "marker": {
      "line": {
        "width": 2
      }
    }
  }
]

Once the JSON structure is ready, one can easily follow the Mendix guide to implement the chart.

Conclusion

It's possible to build any visualizations in Mendix; we just need to understand the data flow structure and play around with the code to implement the exact business requirements. Do not compromise on the Requirements calling as limitations. Spend some time researching, analyzing, troubleshooting, and trying out workarounds before coming to conclusions.

Creating fully custom widgets can be complex and challenging for those without experience — sometimes it may be better to find a simpler alternative instead of adding needless complexity to your project by attempting unnecessary custom widget implementations.

Read more

Charts

Build Custom Widgets

From the Publisher -

Inspired by this article to bring your ideas to life with Mendix? Sign up for a free account! You’ll get instant access to the Mendix Academy, where you can start building your skills.

For more articles like this one, visit our Medium page. And you can find a wealth of instructional videos on our community YouTube page.

Speaking of our community, join us in our Slack community channel. We’d love to hear your ideas and insights!