HubDB Pie Chart Use Case

Develop, Build & Integrate CMS Development
1

Hi all,

I’m currently using apexcharts.js to showcase data from HubDB in the form of a pie chart

I’ve successfully looped through all options within a HubDB column to define the pie chart categories/sections using:

 labels: [
 {% for choice in hubdb_table_column(2666166, 11).options %}
 '{{ choice.name }}', 
 {% endfor %}
 ],

However, I now need to assign each category a value. If my multichoice hubdb column is “color” for example, I need to loop through the rows and return the count of rows for each color individually. Red, blue, green, etc.

Ideally, I would want a loop that returns the “count” of each column option, so it’d look something like:

series: [44, 55, 13, 43, 22]

Thanks for any help in advance

2

Hi @cives

First of all, would love to see your end result of this project!

Secondly, I am going to introduce you to an HubDB expert :grinning_face:

@alyssamwilie how would you go about this?

3

Hey @cives !
I’d probably do something like this :

// set a HubL array to hold the series' counts
{% set series = [] %}

// loop through the choices
{% for choice in hubdb_table_column(2666166, 11).options %}
 // create a query against your choice column checking for the choice name currently being looped
 {% set query = "<column name>__icontains="~choice.name %}

 // using the created query set a vairable to hold the filtered row array
 {% set rows = hubdb_table_rows(<tableId or name>, query) %}

 // append the length of the array to your series array
 {% do series.append(rows|length) %}
{% endfor %}

<script>
 // set your series variable
 series: {{ series }}
</script>
4

Thank you for the reply.
Just confirming — am I implementing your suggestion correctly?

// set a HubL array to hold the series' counts
{% set series = [] %}

// loop through the choices
{% for choice in hubdb_table_column(2666166, 11).options %}
 // create a query against your choice column checking for the choice name currently being looped
 {% set query = "member_category__icontains="~choice.name %}

 // using the created query set a vairable to hold the filtered row array
 {% set rows = hubdb_table_rows('2666166', query) %}

 // append the length of the array to your series array
 {% do series.append(rows|length) %}
{% endfor %}

 // set your series variable
 series: {{ series }}

var options = {

 series: [{{ series }},],
 chart: {
 width: 380,
 type: 'pie',

 },
 theme: {
 monochrome: {
 enabled: true,
 color: '#2254fe',
 shadeTo: 'light',
 shadeIntensity: 0.65
 }
},
 labels: [
 {% for choice in hubdb_table_column(2666166, 11).options %}
 '{{ choice.name }}', 
 {% endfor %}
 ],
 responsive: [{
 breakpoint: 480,
 options: {
 chart: {
 width: 200
 },
 legend: {
 position: 'bottom'
 }

 }
 }]
 };

 var chart = new ApexCharts(document.querySelector("#member-pie"), options);
 chart.render();
5

@cives
For this part :

 // set your series variable
 series: {{ series }}

var options = {

 series: [{{ series }},],
 chart: {
 width: 380,
 type: 'pie',

 },

It would just need to be :

var options = {

 series: {{ series }},
 chart: {
 width: 380,
 type: 'pie',

 },

:

6

Thank you!!!