Okay
  Public Ticket #2930684
Add percentages to bar chart
Closed

Comments

  • David Kanika started the conversation

    Hello, I am creating a bar chart, and I can't figure out how to make the percentages appear. What data type for the column do I need to pick so it show as percentages, and how to show the percentage (e.g. add for each value in the table or using suffix) for the % to appear for the bar chart, but also for the Y axis?

    I am allowed to have only 1x string for creating the chart, and float or integer data types doesn't allow to input the % sign. And adding it with suffix didn't show in front end - so kind of confusing how to make this works.

    This is how it looks now: https://prnt.sc/21k3tv2 (using HighCharts) and I want to display everything in terms of pcnt.

    Thanks

  •  2,572
    Aleksandar replied

    Hello David.

    This can't be inherited from the table's prefix or suffix, so you will need to use wpDataCharts callbacks to display the percentage.

    Take a look at this page, where we explained how this can be added on a chart with two Y axes. The same logic applies to one axis.

    • Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. wpDataChart callbacks allow adding options that are available in Google Charts APIHighcharts API, and Chart.js API
    • All necessary resources are available in charts engines API (depends on which one you use). Every engine has a different approach to chart settings. In wpDataChart callbacks, you have to adopt those settings to the wpDataChart object (you can take a look at examples for each engine in our documentation, and also in the Support help center). A huge number of examples for any area of programming can be found on stackoverflow.com (typing your problem in google and at the end add "site: stackoverflow.com" and Google will search only that website). Also, a lot of examples of charts, chart settings, and customization can be found on jsffidle.net (typing in google for example "line chart highcharts jsffidle")
    • Please note that using hooks or wpDataTable and wpDataChart callbacks requires a certain level of programming skills and included support refers only to advice.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    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

  • David Kanika replied

    Hi Aleksandar, 

    Thanks for the information. Yes I am not a developer but I was able to get at least 50% of what I need, to show at the Y axis, however kind of struggling with the tooltip. One option is to just disable but that's not what I want, based on other indirect examples I couldn't make it work. Can you update examples of that or maybe share some quick fix for the tooltip? 

    I tried few different things based on the documentation but no luck with the tooltip

    <script type="text/javascript">
    jQuery(window).on('load',function(){
        if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
        wpDataChartsCallbacks[7] = function(obj){
            obj.options.yAxis[0] = {
               labels: {
                 format: '{value}%'
               }
            }
            obj.options.tooltip = {
                labels: {
                 format: '{value}%'
               }
            }
        }
    });
    </script>


    Thanks

  • David Kanika replied

    Also it seems like with this code, the Y axis is not respecting the axis label set in the backend? It shows "values", this code is from the article you send and I just adjusted the chart ID.

    Thanks

  •  2,572
    Aleksandar replied

    Hi again David.

    Can you try using this callback?

    <script type="text/javascript">
    jQuery(window).on('load',function(){
        if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
        wpDataChartsCallbacks[7] = function(obj){
            obj.options.yAxis[0] = {
               labels: {
                 format: '{value}%'
               }
            }
        }
    });
    </script>
    

    If that doesn't work, please provide me a temporary WP-admin (administrator) user for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. 

    We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course, we do not provide login data to third parties. 

    You can write credentials here just check PRIVATE Reply so nobody can see them except us.

    I can't promise anything, but I can take a look. Make sure to tell me what the chart ID is, and on which page it is located, so I know where to look.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    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