Skip to content
visualizer-charts-and-graphs

Tired of re-uploading CSVs? Sync with Google Sheets, unlock 10+ Pro charts, and get priority support when you need it.

See Pro Plans →

Visualizer: How to populate chart series and data dynamically

From version 1.1.0 Visualizer plugin allows users to write their own hooks for chart series and data filters. The global filter is applied for each chart, each time when a chart is prepared to be rendered. If you want to create a hook for the global filter, you should use visualizer-get-chart-series and visualizer-get-chart-data filters for series and data accordingly. Each hook, for these filters, receives three arguments: data or series array, chart ID, and chart type variable.

Series global filter

To create a hook for the global series filter you need to write the following function:

add_filter( 'visualizer-get-chart-series', 'myplugin_filter_charts_series', 10, 3 );
function myplugin_filter_charts_series( $series, $chart_id, $type ) {
    // do your stuff here
    return $series;
}

The $series array contains the actual series of the chart and has the following structure:

$series = array(
    // the first series
    array(
        'label' => 'The name', // the label of the series
        'type' => 'string', // the type of the series
    ),
    // the second series
    array(
        ...
    ),
    // and so on...
);

Data global filter

To create a hook for global data filter you need to write the following function:

add_filter( 'visualizer-get-chart-data', 'myplugin_filter_charts_data', 10, 3 );
function myplugin_filter_charts_data( $data, $chart_id, $type ) {
    // do your stuff here
    return $data;
}

The $data array contains actual data of the chart and has the following structure:

$data = array(
    // the first row of data
    array(
        'Something', // the value of the first series
        165, // the value of the second series
        32, // the value of the third series
    ),
    // the second row of data
    array(
        ...
    ),
    // and so on...
);

Settings global filter

To create a hook for the global settings filter you need to write the following function:

add_filter( 'visualizer-get-chart-settings', 'myplugin_filter_charts_data', 10, 3 );
function myplugin_filter_charts_data( $data, $chart_id, $type ) {
    // do your stuff here
    return $data;
}