Please wait...

wpDataCharts callbacks

Video versionA video overview of wpdatacharts callbacks in wpDataTables

This video is currently being re-filmed and is coming soon. Stay tuned!

wpDataTable wpDataCharts callbacks

All wpDataCharts existing on the page are reflected in the global JavaScript object called ‘wpDataCharts‘. If you check this variable in the JS developer console you will see the wpDataCharts as properties of this object:

Every chart exposes a number of options that customize its look and feel. Charts usually support custom options appropriate to that visualization. We introduced a simple method that allows adding options that are available in Google Charts API and Highcharts API. This method is called:

wpDataChartsCallbacks[chart_id]

Let’s see an example.

Google Charts

In this example we will add backgroundColor (#F7F7F7) an legend.position (‘in’) for Google Column Chart.

To assign options to the chart we can use this jQuery snippet which you need to put on same page where you chart is located:

<script type="text/javascript">
jQuery(window).load(function(){ 
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; } 
    wpDataChartsCallbacks[38] = function(obj){ 
        obj.options.backgroundColor = '#F7F7F7'; 
        obj.options.legend = {position:'in'}; 
    }
});
</script>

Highcharts

In second example we will add some options for Highcharts Line chart. You can find available options at Highcharts API Reference

For this chart we included Zooming and panningbackgroundColor (#F7F7F7) and tooltip.formatter (add a currency sign $ in tooltip)

To assign options to the chart we can use this jQuery snippet which you need to put on same page where you chart is located:

<script type="text/javascript">
jQuery(window).load(function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[39] = function(obj){
        obj.options.chart.backgroundColor = '#F7F7F7';
        obj.options.chart.zoomType = 'x';
        obj.options.chart.panning = true;
        obj.options.chart.panKey = 'shift';
        obj.options.tooltip = {
            formatter: function () {
            var s = '<b>$' + this.y + '</b>';
            return s;
            }
        }
    }
});
</script>

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.