Okay
  Public Ticket #3218647
Can't set chart defaults
Closed

Comments

  •  3
    Daniel Lewis started the conversation

    I'm having loads of trouble trying to set a default font family and size for Charts.js charts rendered with wpDataTables.

    First, the "Color and Font Settings" tab seems to be useless because it apparently affects only tables, not charts. Besides, it won't let me enter a custom font family anyway.

    So I'm trying insert the appropriate Chart.js default settings through a Javascript file.

    Here's a code example:

    ```

    jQuery(window).on("load", function () {

    console.log(Chart.defaults.font); 

    Chart.defaults.font = {

    size: 20,

    family: "'Times New Roman'"

    }; 

    console.log(Chart.defaults.font);

    });

    ```

    When the page loads, all my "wpDataChartsCallbacks" are working properly, so I know the JS is loading. Plus, I can look at the console and see the two expected outputs:

    ```

    {family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", size: 12, style: 'normal', lineHeight: 1.2, weight: null}

    {size: 20, family: "'Times New Roman'"}

    ```

    But none of the charts inherit these default fonts. And if I run `Chart.defaults.font` in the console, I can see that the defaults have been reset to `{size: 12, family: '', style: 'normal', weight: 'bold'}` instead of what my script set them to!

    If I then manually change the defaults through the console and scroll down the page where a chart hasn't rendered yet, that newly displayed chart will have the proper font family and size.

    So something about the plugin is inappropriately rewriting the defaults after I explicitly set them in the code, and I need that to stop!

    I've tried all kinds of load orders for my Javascript file, too. In the header, the footer, priority settings, dependencies, and nothing gives me the result I need.

    And no, I'm not interested in clicking through all the screens just to access the chart settings for 30 charts!

    But other defaults, like for an added Chart.js plugin, are not being overridden and are properly loading. So the problem seems to be that wpDataTables is placing my defaults with its own defaults.

    Please help!

    (This is on a local dev site at the moment, but I'll deploy this new version soon.)

  •  1
    Petr replied

    I have the same issue - it would be great to allow us to set styles for charts somewhere.

  •  1,708
    Miloš replied

    Hi, Daniel, and Petr.

    Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

    -

    If i understood, your goal is to set up the default font family and font-size for all charts at the same time, 

    rather than going into each chart Wizard, or doing a custom callback for each chart separately?

    -

    I am not an expert on callbacks, and custom callbacks don't fall under our support, but we will do our best to assist with this use-case.

    We will get some help from our developers.

    Could you just give us a bit more details,

    for example, please tell us where are you implementing this script,

    are you perhaps adding it to the main plugin settings/Custom JS and CSS/Custom JS,

    or are you adding it as custom HTML to the WordPress page(s) where your chart(s) are?

    Thank you

    Kind Regards, 

    Miloš Jovanović
    [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

  •  3
    Daniel Lewis replied

    As I said, "I've tried all kinds of load orders for my Javascript file, too. In the header, the footer, priority settings, dependencies, and nothing gives me the result I need."

    So I put the JS code in a Javascript file loaded by my theme. All the other JS code and callbacks in that file work fine, but the defaults are not being respected. 

  •  1
    Petr replied

    Daniel, is there a way I can reach out to you? I would be grateful if you could provide me with tips on realizing the .js file loading and styling the chart.js. 🙏

  •  3
    Daniel Lewis replied

    Post a new thread in the forum and I can comment there, or reach out to me on Twitter @theDanielJLewis.

  •  1,708
    Miloš replied

    Hi, Daniel and Petr.

    Firstly, I would like to sincerely apologize once again for the delayed response as we have been experiencing an unusually high number of tickets, and we had a National Holiday break which slowed down our work.

    Thank you very much for your patience.

    -

    1. Just wanted to comment on one detail you mentioned as well, about the built-in table customization option for Color and Font :

    the "Color and Font Settings" tab seems to be useless because it apparently affects only tables, not charts.

    You are correct, the table settings in regards to customizations are completely separate from the chart settings.

    -

    Table formatting for values such as numeric format, prefix/suffix or any custom coloring or fonts, are not able to be passed from the table to charts.

    For that you would have to check in the Chart Wizard, some chart engines have more built-in customization options than others, for example the Apex charts perhaps have the most "coloring" settings.

    Every chart engine has its own layout and its settings.

    We use free libraries for chart engines, and they are limited as to what we can change from within the plugin's UI.

    You can check out all the available chart engines and examples of wpDataCharts documentation here . 

    If the options you need are not in the chart creation wizard,  you can try to find a custom solution using chart callbacks.

    You can check our documentation about wpDataCharts callbacks

    • 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.

    -

    2. In regards to setting a default font family and size for Charts.js charts rendered with wpDataTables,

    we did our best to search through all our available working examples with hooks,

    and unfortunately, we don't have any example to show you for something like this use-case.

    It probably can be done with some custom work, but our developers are very busy at the moment, working on some priority tasks and fixing bugs and issues with our plugins, so they won't be having the time for custom work in the near future.

    If you wish to see a built-in solution in the future, you can make an improvement suggestion for our developers.

    Please feel free to search on our suggestions page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

    Kind Regards, 

    Miloš Jovanović
    [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

  •  3
    Daniel Lewis replied

    Thanks for the reply, but I'm worried you're missing the point.

    I _am_ running custom code exactly the way that I should be able to, and your plugin is even properly reading it at first. But then your plugin overrides my defaults and keeps only what I set for individual charts, but not the all-charts defaults. I explained this in my first post.

    So wpDatatables has some kind of problem that needs to be fixed because the custom code that should work is being allowed and then broken by your plugin.

  •  1,708
    Miloš replied

    Hi, Daniel 

    My sincere apologies, firstly for the waiting time,

    but also that i did not correctly understand the issue at first.

    Thank you for being patient and clarifying it, now i can see what you mean.

    -

    If the code works at first, and i took another look at your first message, as you pointed out,

    but then if our plugin does something unexpected to override it, then we might have an issue coming from the plugin itself.

    I will pass this to our developers, they will investigate and we will do our best to help as much as possible.

    -

    I will let you know if they perhaps might need a duplicated/cloned version of your site, for a more detailed inspection,

    or if maybe the information provided so far is enough to make an assessment.

    As soon as they respond i will report back.

    Thank you for your patience again.

    Kind Regards, 

    Miloš Jovanović
    [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

  •  1,708
    Miloš replied

    Hi, Daniel.

    Just wanted to let you know we are still following up on this,

    our devs are taking a look and they will advise as soon as possible.

    Thank you again for your patience.

    Kind Regards, 

    Miloš Jovanović
    [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

  •  1,708
    Miloš replied

    Hi, Daniel.

    We got advised about this.

    It seems that the issue is because you are trying to alter the Chart.JS's Chart object.

    All of our objects are being "generated" in a way that the values are being "pulled" either from a field which is input by users, or if something has not been filled with Chart JS default values.

    We have a suggestion you could try.

    This piece of the code should cover callbacks for charts which "don't have existing callbacks" associated with them yet : 

    for(i  in wpDataCharts ) {
                if ( !wpDataChartsCallbacks[i] ) {
                    wpDataChartsCallbacks[i] = function(obj){
                        obj.options.globalOptions.font.size  = 20;
                    }
                }
            }

    This 'options.globalOptions.font.size'  is where, for example the font size would be generated.

    For charts that already have "callbacks associated with them", you can add this :

     obj.options.globalOptions.font.size  = 20;

    And you can add any additional options you need.  So, if you need to "override" something, callbacks are the best option to go for.

    I hope that this helps and that i passed our devs explanation correctly.

    Thank you

    Kind Regards, 

    Miloš Jovanović
    [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