Okay
  Public Ticket #2052149
Google Charts layout problems
Closed

Comments

  •  4
    Daniel Lewis started the conversation

    I'm running into frustrations with using Google Charts for displaying my data.

    I have a lot of data, so I need to make a very big chart. But the bigger I make the chart, the bigger the unnecessary top and bottom padding get. The attached screenshot is of the top of a table set to 1500 pixels tall. That massive vertical padding is reflected in both this preview page and the backend editor.

    Also, there's a lot of unnecessary horizontal padding that can't be removed. The blue highlight in the image shows the dimensions of the chart div, and you can there's about 100 px. on the left and about 150 px. on the right that could be removed to allow the chart to fill the width.

    Yes, I have my chart set to be responsive, and it is responsive, but there's far too much horizontal padding and it breaks visual alignment and makes the chart very difficult to understand.

    I tried Chart.js instead, and its layout works better, but I don't like its visual style, and it seems there's no horizontal bars option.

  •  2,572
    Aleksandar replied

    Hello Daniel.

    Thank you for your purchase.

    I completely understand.

    The best way to go about this would be if you could please provide me a temporary WP-admin login 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 party. You can write credentials here just check Private Reply so nobody can see them except us.

    I'll take a look at the setup, but this is probably coming from the theme you're using. It shouldn't be taking that much space.

    Best regards.

    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

  •  4
    Daniel Lewis replied

    Thanks, but all it would take to replicate my problem is:

    1. Make a bar chart with a large height.
    2. Move or remove the legend from the side.
    3. See how much unnecessary padding is adding around the chart.
  •  2,572
    Aleksandar replied

    Hi again Daniel.

    I cannot replicate your issue in my environment.

    Usually, issues like this are linked to a conflict with the theme or one of the plugins you have installed on your page, and that is why I'd need to take a look at least at the page where the chart is located if remote access is not an option.

    Best regards.

    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

  •   Daniel Lewis replied privately
  •  2,572
    Aleksandar replied

    Hello again Daniel.

    This is the default behavior of Google Charts engine, unfortunately, so there's no CSS or settings we can change to make it look better.

    However, there are wpDataChart callbacks which can make it look better. I added the following script on the page, and it should look much better now:

    <script type="text/javascript">
    jQuery(window).load(function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[6] = function(obj){
    obj.options.chartArea = {'width': '80%', 'height': '95%'};
    }
    });
    </script>
    

    Please take a look at your page:

    https://mypodcastreviews.com/wp-admin/post.php?post=873&action=edit

    And let me know if this is OK.

    • 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 Support help center). 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 certain level of programming skills and included support refers only to advice.

    Best regards.

    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