HubDB Pie Chart Use Case

[cives]

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

[alyssamwilie · Accepted solution]

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>

[cives]

Thank you!!!

[cives]

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

[alyssamwilie · Accepted solution]

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

        },

: 

[alyssamwilie · Accepted solution]

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>

[dennisedson]

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?