Charts don't inherit formats from wpDataTables, so you would need to use wpDataCharts callbacks. On this link you can see how the number format is changed. It's similar for the date format, but I don't have a specific example for that.
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 API, Highcharts 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.
Hello, No it is not an integer, the WPdatatable linked to the chart has "Date" as format, and the data is Daily dd/mm/yyyy. Remember I would like only "yyyy" in the x-axis
The image I sent you is after I try to change the format. Please see attached how it was before changes.
So, this is what the callback actually does - it changes the date into an integer.
I tried a few variations of the callback, but I couldn't find the correct one to change the date format in the chart. At the moment, you can change the date format in wpDataTables settings, and the chart will follow that (Highcharts will).
I asked one of our developers if he can take a look, and maybe find a callback which you could use, but I don't know if he'll have the time for that. This is a custom solution, and wpDataChart callbacks require some coding skills, so they are not included in the provided support for the plugin. If our developer has time to find the correct callback, I will let you know.
Hello, I wonder how can I change the displayed format date. Now the charts has in x-axis date in dd/mm/yyyy format. I just want to group them in YYYY.
I'am using Elementor. Is there a custum CSS that I can add?
Hello Alberto
Thank you for your purchase.
Charts don't inherit formats from wpDataTables, so you would need to use wpDataCharts callbacks. On this link you can see how the number format is changed. It's similar for the date format, but I don't have a specific example for that.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia 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
Hello Aleksandar,
Could you please tell me where do I have to put the code? I use Elementor and Wordpress. Thank you
Hi again Alberto
Elementor has "Custom HTML" widget, so you can use that.
Just paste it somewhere on the page - it will not be visible to the public.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia 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
I tried to insert Custom HTML in the page and then use this code as a trial to change the background color:
<script type="text/javascript">
jQuery(window).on('load', function(){
if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
wpDataChartsCallbacks[46] = function(obj){
obj.options.highcharts.backgroundColor = '#52ab8a';
}
});
</script>
But nothing changes..
Hey Alberto
Sorry for the inconvenience, we have a bug with callbacks.
Please replace the files in these two locations:
wp-content/plugins/wpdatatables/assets/js/wpdatatables/wdt.chartsRender.js
wp-content/plugins/wpdatatables/assets/js/wpdatatables/wdt.chartsRender.min.js
With the files attached to my response. When you replace them, delete cache from your website and browser, and test again. It should work after that.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia 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
Hey Aleksandar, Thank you for correcting the Bug.
I am trying to change the X-axis format.
I have daily data (dd/mm/yyyy) and I just want to show yyyy.
Why is this not working? Please see attachment
<script type="text/javascript">
jQuery(window).on('load', function(){
if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
wpDataChartsCallbacks[39] = function(obj){
obj.options.xAxis = {
type: 'time',
dateTimeLabelFormats: {
day: '%Y'
}
}
}
});
</script>
Hello Alberto
You can't change a numerical column into a date column. It looks like the X axis is an integer, or a string that says "1K", "2K", etc.
That column needs to be the date column in order to change the date format through a callback.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia 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
Hello, No it is not an integer, the WPdatatable linked to the chart has "Date" as format, and the data is Daily dd/mm/yyyy. Remember I would like only "yyyy" in the x-axis
The image I sent you is after I try to change the format. Please see attached how it was before changes.
Could you please suggest what's wrong?
Thanks for clearing that up, Alberto
So, this is what the callback actually does - it changes the date into an integer.
I tried a few variations of the callback, but I couldn't find the correct one to change the date format in the chart. At the moment, you can change the date format in wpDataTables settings, and the chart will follow that (Highcharts will).
I asked one of our developers if he can take a look, and maybe find a callback which you could use, but I don't know if he'll have the time for that. This is a custom solution, and wpDataChart callbacks require some coding skills, so they are not included in the provided support for the plugin. If our developer has time to find the correct callback, I will let you know.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia 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
Hello again Alberto
Please try using this Callback:
If the date format is 10/05/2001, like in the image, if you're changing it to something else, you'll need to adjust the substring function.
We've added a rotation for 90 degrees, so more dates fit. If you don't like that, please remove it from the callback.
Please let me know if that helps.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia 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
Hello Aleksandar,
Fantastic! This works!
It is not perfect when changing device in responsive mode, but it is far better than before.
Thank you for your time.
Alberto
You're welcome, Alberto
Glad I could be of service!
If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia 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