How to Skip NULL and 0 Values in wpDataCharts

Custom HighCharts-only workaround to remove unwanted NULL or zero values from wpDataCharts

wpDataTables includes chart integrations with multiple chart engines, but at this time, we only have a workaround to skip NULL and/or 0 values when using the HighCharts Engine.
For other chart engines, there is currently no built-in method or workaround to skip these values.


Skipping NULL and 0 Values (HighCharts Only)

To apply this workaround, you’ll need to add custom code to the functions.php file of your theme or child theme.

Example: Skip both NULL and 0 values

function filterNullValues($value, $origHeader, $chartID, $tableID) {
    // You can add conditions for specific headers, chart IDs, or table IDs if needed
    if (is_null($value) || $value == 0 || intval($value) == 0) {
        $value = null;
    }
    return $value;
}
add_filter('wpdatatables_filter_int_cell_data_in_charts', 'filterNullValues', 10, 4);
add_filter('wpdatatables_filter_float_cell_data_in_charts', 'filterNullValues', 10, 4);

Example: Skip only NULL values

function filterNullValues($value, $origHeader, $chartID, $tableID) {
    if (is_null($value)) {
        $value = null;
    }
    return $value;
}
add_filter('wpdatatables_filter_int_cell_data_in_charts', 'filterNullValues', 10, 4);
add_filter('wpdatatables_filter_float_cell_data_in_charts', 'filterNullValues', 10, 4);

Example: Skip only 0 values

function filterNullValues($value, $origHeader, $chartID, $tableID) {
    if ($value == 0) {
        $value = null;
    }
    return $value;
}
add_filter('wpdatatables_filter_int_cell_data_in_charts', 'filterNullValues', 10, 4);
add_filter('wpdatatables_filter_float_cell_data_in_charts', 'filterNullValues', 10, 4);

Important Notes:

  • You do not need to change this code after wpDataTables updates.

  • Keep this code in your theme or child theme’s functions.php file.

  • You can add additional conditions (e.g., apply only to a specific chart ID or column header).


Connecting Data with Skipped NULLs

If you want HighCharts to connect lines across missing values (NULLs), you can use the connectNulls option via a chart callback:

<script type="text/javascript">
jQuery(window).on('load', function() {
    if (typeof wpDataChartsCallbacks == 'undefined') { wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[16] = function(obj) {
        obj.options.plotOptions = {
            series: {
                connectNulls: true
            }
        }
    };
});
</script>

Replace [16] with your actual chart ID.


Summary:

  • This workaround works only with the HighCharts Engine.

  • It lets you skip NULL values, 0 values, or both.

  • You can optionally connect skipped NULL values in line charts.

Did this answer your question?
😞
😐
😁