Chartjs-Trouble with setting up radar chart data on chart.js; issue with a loop

0👍

This is almost perfect… My issue was in the way I was using wp_count_posts. It does not count terms as I thought.

Now this code uses the get_objects_in_term() function to get an array of post IDs that have the specified term assigned to them, and then it uses the count() function to get the number of posts in that array.

However, in the center of the radar chart I have all the data points with a 0 value. Yet, they are also properly mapped out on my chart corresponding to labels. How can I get rid of that and what is going on that this is happening?

New code below:

<?php
/*
 * Plugin Name: Taxonomy Radar Chart
 * Description: A WordPress plugin that uses a shortcode to display a radar chart of taxonomy terms. [taxonomy_radar_chart post_types="content" taxonomies="styles,tone,difficulty,content-type" colors="#F44336,#9C27B0,#2196F3,#4CAF50"]
 */

function taxonomy_radar_chart_shortcode( $atts ) {
    // Parse shortcode attributes
    $atts = shortcode_atts(
        array(
            'post_types' => 'post',
            'taxonomies' => 'category',
            'colors'     => '',
        ),
        $atts,
        'taxonomy_radar_chart'
    );
    // Get post types and taxonomies as arrays
    $post_types = array_map( 'trim', explode( ',', $atts['post_types'] ) );
    $taxonomies = array_map( 'trim', explode( ',', $atts['taxonomies'] ) );

    // Get colors as array, or use default colors
    if ( empty( $atts['colors'] ) ) {
        $colors = array(
            '#F44336',
            '#9C27B0',
            '#2196F3',
            '#4CAF50',
            '#FFEB3B',
            '#795548',
            '#607D8B',
            '#E91E63',
            '#009688',
            '#00BCD4',
            '#FF9800',
            '#CDDC39',
        );
    } else {
        $colors = array_map( 'trim', explode( ',', $atts['colors'] ) );
    }

    // Get term counts and labels
    $term_counts = array();
    $labels      = array();
    // Loop through post types and taxonomies
    foreach ( $post_types as $post_type ) {
        foreach ( $taxonomies as $taxonomy ) {
            $terms = get_terms(
                array(
                    'taxonomy'   => $taxonomy,
                    'hide_empty' => false,
                )
            );

            // Loop through terms and get count for each
            foreach ( $terms as $term ) {
                $term_count = wp_count_posts( $post_type, array( 'tax_query' => array( array( 'taxonomy' => $taxonomy, 'field' => 'slug', 'terms' => $term->slug ) ) ) );
                $term_count = $term_count->publish;

                // Add term count and label to arrays
                $term_counts[ $taxonomy ][ $term->name ] = $term_count;
                $labels[]                                = $term->name;
            }
        }
    }

    // Remove duplicate labels
    $labels = array_unique( $labels );

    // Set up radar chart data
    $datasets = array();
    foreach ( $term_counts as $taxonomy => $counts ) {
        $dataset = array(
            'label'           => $taxonomy,
            'backgroundColor' => array_shift( $colors ),
            'data'            => array(),
        );
        foreach ( $labels as $label ) {
            $dataset['data'][] = isset( $counts[ $label ] ) ? $counts[ $label ] : 0;
        }
        $datasets[] = $dataset;
    }
    // Enqueue Chart.js library
    wp_enqueue_script( 'chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js', array(), '2.9.3', true );

    // Print chart container
    $chart_id = uniqid( 'taxonomy_radar_chart_' );
    printf(
        '<canvas id="%s" width="400" height="400"></canvas>',
        esc_attr( $chart_id )
    );

    // Print chart script
    $data = array(
        'labels'   => $labels,
        'datasets' => $datasets,
    );
    $options = array();
    printf(
        '<script>
            jQuery(function($) {
                var ctx = document.getElementById("%s").getContext("2d");
                var chart = new Chart(ctx, {
                    type: "radar",
                    data: %s,
                    options: %s
                });
            });
        </script>',
        esc_attr( $chart_id ),
        wp_json_encode( $data ),
        wp_json_encode( $options )
    );
}
add_shortcode( 'taxonomy_radar_chart', 'taxonomy_radar_chart_shortcode' );

Leave a comment