How can I populate chart series and data dynamically?

Marius Cristea edited this page Oct 26, 2015 · 6 revisions

From version 1.1.0 Visualizer plugin allows users to write their own hooks for chart series and data filters. There are two types of filters which you can use: global filter and custom filter. The global filter is applied for each chart, each time when chart is prepared to be rendered. In opposite to global filter, the custom filter is applied only for specific chart and only before rendering chart at front end.

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 global series filter you need to write 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 actual series of the chart and has 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 following function:

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

The $data array contains actual data of the chart and has 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 global settings filter you need to write following function:

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

Custom filters

In each shortcode what is used by Visualizer plugin, you can define custom filter for chart series and data. You can do it easily by adding two attributes: series and data for custom series filter and custom data filter accordingly. For instance:

[visualizer id="16" series="mycustom_series_filter" data="mycustom_data_filter" settings="mycustom_filter_settings"]

So these custom filters will be applied only for this chart and only before rendering it at front end. Finally you can create following hooks:

add_filter( 'mycustom_series_filter', 'myplugin_filter_chart_series', 10, 3 );
function myplugin_filter_chart_series( $series, $chart_id, $type ) {
    // do your stuff here
    return $series;
}

add_filter( 'mycustom_data_filter', 'myplugin_filter_chart_data', 10, 3 );
function myplugin_filter_chart_data( $data, $chart_id, $type ) {
    // do your stuff here
    return $data;
}

add_filter( 'mycustom_filter_settings', 'myplugin_filter_chart_settings', 10, 3 );
function myplugin_filter_chart_settings( $data, $chart_id, $type ) {
    // do your stuff here
    return $data;
}