For one of our projects, we are evaluating your free plugin before making a purchase. After extensive research, it still produces incorrect results when creating a chart. We need to create over 100 simple column charts from various sources. In our dataset, one column contains years and the second column contains data in percentages. However, when attempting to create a chart, the wpdatatables plugin incorrectly populates the axis, showing years as the Y-axis and percentage data as the X-axis, which is incorrect. We have attempted to fix it, but without success. Please help, so we complete the purchase.
The issue is, you have the percentage symbol in your source cells on the Excel.
This can not be read as numeric Data in our Plugin, thus it renders it as a String Column.
In Charts, you can not use a String Column for the series; it can only be taken as data labels on X axis.
The solution is, to remove any symbols and just leave pure numeric data in the cells of your source Google Sheet,
then you can make integer or Float Column from this in our connected Table.
( Just also double check if you have the same Number Format matched in the main plugin settings, and the decimal numbers)
After this, just go in the Display settings of the column, and add any prefix or suffix symbol there.
That was just a quick example for currency, but In your case, just remove the percentage signs from your souce cells in Excel, and insert them only as pure numbers.
Then later just add the percentage sign as prefix/suffix in the Table column display settings.
-
Just a side note : If you plan to have the percentage symbols show in the data values on the Chart :
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 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 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.
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.
-
You are on the right path, a custom chart callback will be needed.
Basically, is the default behavior of the charts engine.
If you can't find the option you need in the Chart Wizard, then you would need a custom callback to change it.
There we have one custom example of a hook for each Chart Engine.
Please also check out this YouTube Tutorial with an additional example how we can use a custom hook to assign two Y axes.
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 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.
For one of our projects, we are evaluating your free plugin before making a purchase. After extensive research, it still produces incorrect results when creating a chart. We need to create over 100 simple column charts from various sources. In our dataset, one column contains years and the second column contains data in percentages. However, when attempting to create a chart, the wpdatatables plugin incorrectly populates the axis, showing years as the Y-axis and percentage data as the X-axis, which is incorrect. We have attempted to fix it, but without success. Please help, so we complete the purchase.
Attached files: Test.xlsx
Hello,
We have a solution for this.
The issue is, you have the percentage symbol in your source cells on the Excel.
This can not be read as numeric Data in our Plugin, thus it renders it as a String Column.
In Charts, you can not use a String Column for the series; it can only be taken as data labels on X axis.
The solution is, to remove any symbols and just leave pure numeric data in the cells of your source Google Sheet,
then you can make integer or Float Column from this in our connected Table.
( Just also double check if you have the same Number Format matched in the main plugin settings, and the decimal numbers)
After this, just go in the Display settings of the column, and add any prefix or suffix symbol there.
That was just a quick example for currency, but In your case, just remove the percentage signs from your souce cells in Excel, and insert them only as pure numbers.
Then later just add the percentage sign as prefix/suffix in the Table column display settings.
-
Just a side note : If you plan to have the percentage symbols show in the data values on the Chart :
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.
Let me know if you have any questions.
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 | 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
Thanks for your help. But how we show Y axis on right side, instead of left side?
As per chart.js tutorial adding this code will solve the issue but it did not work with Wpdatatable plugin.
options: {
scales: {
yAxes: [{position: 'right',
ticks: {
reverse: false
Hello,
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.
-
You are on the right path, a custom chart callback will be needed.
Basically, is the default behavior of the charts engine.
If you can't find the option you need in the Chart Wizard, then you would need a custom callback to change it.
You can check our documentation about wpDataCharts callbacks.
There we have one custom example of a hook for each Chart Engine.
Please also check out this YouTube Tutorial with an additional example how we can use a custom hook to assign two Y axes.
I hope that helps.
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 | 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