Creating Bar graph using JSON structure

0
Hello everyone ,I need to create dynamic charts (bar, pie, and map) in Mendix using JSON data from my database, but the AnyChart module isn't available in my version. What are my options?Context:I've built the domain model entities and microflows to generate the data. Now I need to structure this JSON and display it in charts without relying on the AnyChart marketplace module.What I'm looking for:Guidance on formatting JSON data for dynamic charts and alternative approaches to render them in my Mendix app.
asked
2 answers
0

Hi Punam Dahikamble


There are lot of option avaible in mendix marketplace that will help you. Kindly check it there one of the component I found is Charts and Link.


I hope this helps

answered
0

Hi,


If AnyChart is not available, the recommended approach is to use a custom pluggable widget or HTML/JS integration with a charting library like Chart.js or ECharts.

Option 1: Use HTMLSnippet + Chart.js

  1. Generate your data in Mendix (microflow)
  2. Convert it to JSON string (e.g.):

[
  { "label": "Jan", "value": 10 },
  { "label": "Feb", "value": 20 }
]
  1. Pass this JSON to an HTMLSnippet widget
  2. Render chart using Chart.js:

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const data = {{YourJSONString}};
const labels = data.map(x => x.label);
const values = data.map(x => x.value);

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      data: values
    }]
  }
});
</script>

Option 2: Build a pluggable widget

  • Create a React-based widget
  • Use Chart.js / ECharts inside
  • Bind Mendix data (list or JSON attribute)

This gives:

  • Better performance
  • Reusability
  • Full control

Option 3: Use Data Grid 2

  • For simple visualizations only
  • Not suitable for real charts

Key point (JSON structure)

Keep JSON simple and flat:


[
  { "category": "A", "value": 100 },
  { "category": "B", "value": 200 }
]

Map:

  • category → X-axis
  • value → Y-axis

Without AnyChart, the most practical solution is to use Chart.js via HTMLSnippet for quick implementation, or a custom pluggable widget for a scalable solution, feeding it JSON generated from Mendix microflows.






answered