Hey everyone!

With the holiday season upon us, we want to share our upcoming working hours:

After that, we’ll return to our regular schedule and assist you as quickly as possible.

In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find tons of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel), which might just have the answers you need while we’re away.

Thanks a bunch for your understanding and support!

Warm regards and happy holidays!

TMS

Okay
  Public Ticket #3423263
wpDataChartsCallbacks
Closed

Comments

  • Mark Ryder started the conversation

    High

    I am using wpDataChartsCallbacks on a page to get rid of the decimal point in pie chart labels, and that is working.

    However, I wanted to apply the same callbacks to more than 1 pie chart on the page, is it possible to either apply to all pie charts on the page, or to add multiple chart ID's to the code somehow?

    I tried

    wpDataChartsCallbacks [id1,id2]

    but that didn't work

  •  1,847
    Miloš replied

    Hi Mark,

    i found an example where we can add one callback for all charts, I will share it with you and I hope it solves the issue.

    Depending on the chart engine, the hooks are slightly different, ( basically just tne chart engine name is different for each hook),

    they are :

    wpdatatables_filter_highcharts_render_data
    wpdatatables_filter_chartjs_render_data
    wpdatatables_filter_google_charts_render_data
    wpdatatables_filter_apexcharts_render_data

    I will give you an example for the highCharts engine, and later you can use the same method for other engines/options, you just have to modify the chart engine name throughout the hook.

    In the functions.php file of your theme, or child theme; insert this :

    add_filter( 'wpdatatables_filter_highcharts_render_data', 'updateHighchartsRenderData', 10, 3 );
    function updateHighchartsRenderData ($highcharts_render_data, $chartID, $chart_object){
        $highcharts_render_data['options']['chart']['resetZoomButton']['position']['align'] = 'left';
        return $highcharts_render_data;
    }

    - This way, it will be applied to all the HighCharts. 

    - This hook takes three parameters:

    1.  $highcharts_render_data : which is an array with all the options,

    2.  $chartID  : in case you need it for only some specific charts; 

    3. and the last one is the $chart_object.

    -

    In that example, we have changed the position of the Zoom reset button of highCharts from right side to the left, but you can modify it to change the options you need for your charts.

    -

    This will not be affected by the plugin updates, because these hooks will be saved in your Theme's functions.php.

    As we noted on the wpDataCharts callbacks Documentation,

    using wpDataChart callbacks requires certain level of programming skills and included support refers only to advice.

    -

    Let me know if this achieves what you needed.

    Thank you.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • Mark Ryder replied

    Hi Milos

    Thanks very much for quick response. I know this is outside of support scope, so thanks.

    I can see where you are going, although as ever this is all about getting the right syntax!

    I will need to see how I can interpret that for what I'm doing on the page which I have working like this:

    <script type="text/javascript">

    $(window).load(function() {

    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }

    wpDataChartsCallbacks[10] = function(obj){

    obj.options.plotOptions.pie.dataLabels = {

    format: '{point.name}: <strong>{point.percentage:.0f} %</strong>',

    enabled: true,

    style: {

    color: 'black',

    textOutline: 'transparent'

    }

    },

    obj.options.tooltip = {

    pointFormat: "{series.name}: <strong>{point.percentage:.0f} %</strong>"

    };

    };

    });

    </script>

    It works OK if I add it 3 times for each chartID (as I have 3 pie charts on the page), so for me the worst is over as I have a working page, although it's not very elegant!

    I'm not quite sure how to translate this to your functions, but I'll have a go when I can, thanks!!



  •  1,847
    Miloš replied

    Hi Mark,

    you're welcome, i am happy to help.

    I am glad to see you found a working solution, at least for the time being, 

    I hope you will succeed in making it as you said, as elegant as possible,

    but the main thing is that it works.smile.png

    -

    Once you try to implement changing these options,

    but just without the HTML <script> tags, and rather adding it in a filter/hook to your functions.php,

    you can check out the example our developers sent for the HighCharts and try to modify it as needed,

    as well as some other examples from our wpdataChart Callbacks documentation;


    At some point when you try, you can reach out to us again,

    and we can check with our developers if they are available in that time to take a look if perhaps just a small modification/correction might be needed,

    depending on how it goes.

    Thank you.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables