# HubDB Pie Chart Use Case

**URL:** <https://community.hubspot.com/t/hubdb-pie-chart-use-case/27668>\
**Category:** CMS Development\
**Tags:** hubdb\
**Created:** [November 5, 2020, 9:54pm UTC](https://community.hubspot.com/t/hubdb-pie-chart-use-case/27668 "2020-11-05T21:54:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![cives](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cives/32/57633_2.png) [@cives](https://community.hubspot.com/u/cives)\
**Post date:** [November 5, 2020, 9:54pm UTC](https://community.hubspot.com/t/hubdb-pie-chart-use-case/27668/1 "2020-11-05T21:54:49Z")

</div>

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:

```lia-code-sample
 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

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 6, 2020, 4:52pm UTC](https://community.hubspot.com/t/hubdb-pie-chart-use-case/27668/2 "2020-11-06T16:52:53Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [November 6, 2020, 5:38pm UTC](https://community.hubspot.com/t/hubdb-pie-chart-use-case/27668/3 "2020-11-06T17:38:45Z")

</div>

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

```lia-code-sample
// 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>

```

---

<div class="post-metadata">

**Author:** ![cives](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cives/32/57633_2.png) [@cives](https://community.hubspot.com/u/cives)\
**Post date:** [November 6, 2020, 5:53pm UTC](https://community.hubspot.com/t/hubdb-pie-chart-use-case/27668/4 "2020-11-06T17:53:43Z")

</div>

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

```lia-code-sample
// 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();

```

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [November 7, 2020, 1:22pm UTC](https://community.hubspot.com/t/hubdb-pie-chart-use-case/27668/5 "2020-11-07T13:22:14Z")

</div>

@cives  
For this part :

```lia-code-sample
 // set your series variable
 series: {{ series }}

var options = {

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

 },

```

It would just need to be :

```lia-code-sample
var options = {

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

 },

```

:

---

<div class="post-metadata">

**Author:** ![cives](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cives/32/57633_2.png) [@cives](https://community.hubspot.com/u/cives)\
**Post date:** [November 7, 2020, 1:56pm UTC](https://community.hubspot.com/t/hubdb-pie-chart-use-case/27668/6 "2020-11-07T13:56:58Z")

</div>

Thank you!!!