topic HubDB Pie Chart Use Case in CMS Development

HubDB Pie Chart Use Case

cives — Thu, 05 Nov 2020 21:54:49 GMT

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

Re: HubDB Pie Chart Use Case

dennisedson — Fri, 06 Nov 2020 16:52:53 GMT

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 😀

@alyssamwilie how would you go about this?

Re: HubDB Pie Chart Use Case

alyssamwilie — Fri, 06 Nov 2020 17:38:45 GMT

Hey @cives !

I'd probably do something like this :

Re: HubDB Pie Chart Use Case

cives — Fri, 06 Nov 2020 17:53:43 GMT

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();

Re: HubDB Pie Chart Use Case

alyssamwilie — Sat, 07 Nov 2020 13:22:36 GMT

@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', },

Re: HubDB Pie Chart Use Case

cives — Sat, 07 Nov 2020 13:56:58 GMT

Thank you!!!