I just created a line chart (based on a gravityform based table). The chart should only visualize the values of a weight tracking table (just two columns: date (date) and weight (Integer)).
I want to use HighCharts as rendering engine.
In general it looks fine however the sorting of the x-axis is always from most recent entry to the oldest entry i.e. the wrong direction (Dec to Jan). I wasn’t able to figure out how to change the visualization from oldest to newest (Jan to Dec).
I just noticed that the column resp. axis isn't ordering automatically for the selected date. Its rather showing the entries based on the date when the entry was actually added to the table (i.e. entry ID). Hence, when I make an entry today but selected a date in the past (in the gravityform; to add e.g. a measurement I made in the past) the entry will be added to the end of the chart.
How I can I change the standard order of the column the chart is using?!
The charts' logic is actually following the rows in the table. So, if you were to sort the table per date ascending (in date column's settings/Sorting make the column sort by that column by default), the chart should follow that behavior.
I already tried to change this setting. Unfortunately without having it solving my problem.
As you can see from my latest screenshot after the "update post" (for convenience I attached it here again) that there is no date order at all i.e. you have the axis showing the 13th Jan first, then 14th Jan (because I added it after the 13th) and then the 12th Jan.
I do not use the entry ID (its rather the entry ID not the inpute date, even tough it has the same result) at all. However its a mandatory selection since I enabled server-side processing (see screenshot #1).
I have deselect it for the chart as well. (see screenshot #4)
In the backend the table is sorted correctly (see screenshot #1 and #2).
When I display the table itself on a page the sorting is also correct (the ID column is normally hidden, I just made it visible for demonstration purposes; I am using auto sort for the date column; see screenshot #3). Nevertheless I don't have the table and the chart showing on the same page. I want to use the chart on another page to the table.
I also tried to re-create it from scratch, however with the same result.
Is there maybe any other setting I need to be aware of in e.g. other columns or the gravityforms settings?
Thanks again for your help, Aleksandar, much appreciate it.
It is working as expected, when I put the table and the chart on the same page and check "follow table filtering" in the chart settings.
This might work as a workaround for now, however I want also to show this and other charts without having the corresponding tabled displayed (also not loaded and hidden on the same page).
Yeah, that is a downside of the charts. For custom sorting and filtering to work, you do need to enable "Follow table filtering", sorry I forgot to mention that.
If you want the charts to follow table filtering, then both the page and the chart need to be displayed on the same page. Also, for the filters to be shown, the table must be present as well.
Now, there is a way to simply hide the table using CSS, leaving only the chart and the filters. Anyone who knows CSS will be able to still display the table if they were to inspect the page, and simply change the properties.
Since you need to show the filters, a simple css like this would not be useful, because it'd hide the filters too:
And that's it. This is how you'd create a page where you'd have Chart #1 dependent on wpDataTable #1 so it follows filtering, and the table hidden using CSS.
Screenshots are from an older version of wpDataTables, but they are still valid.
Hi all,
I just created a line chart (based on a gravityform based table). The chart should only visualize the values of a weight tracking table (just two columns: date (date) and weight (Integer)).
I want to use HighCharts as rendering engine.
In general it looks fine however the sorting of the x-axis is always from most recent entry to the oldest entry i.e. the wrong direction (Dec to Jan). I wasn’t able to figure out how to change the visualization from oldest to newest (Jan to Dec).
Any idea what I can do to solve this issue?
Many thanks in advance and have a great day.
Best
Matthias
Update:
I just noticed that the column resp. axis isn't ordering automatically for the selected date. Its rather showing the entries based on the date when the entry was actually added to the table (i.e. entry ID). Hence, when I make an entry today but selected a date in the past (in the gravityform; to add e.g. a measurement I made in the past) the entry will be added to the end of the chart.
How I can I change the standard order of the column the chart is using?!
...one additional screenshot
Hello Matthias
Thank you for your purchase.
The charts' logic is actually following the rows in the table. So, if you were to sort the table per date ascending (in date column's settings/Sorting make the column sort by that column by default), the chart should follow that behavior.
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
Hi Aleksander,
thanks for your reply.
I already tried to change this setting. Unfortunately without having it solving my problem.
As you can see from my latest screenshot after the "update post" (for convenience I attached it here again) that there is no date order at all i.e. you have the axis showing the 13th Jan first, then 14th Jan (because I added it after the 13th) and then the 12th Jan.
13th -> 14th -> 12th ?!
Thanks again and have a good day.
Best
Matthias
...one more screenshot
Hi again Matthias
Have you tried modifying the table from which the chart is generated? If you sort the table per date column, instead of last-entry, it should work.
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
Hi again Aleksandar,
I do not use the entry ID (its rather the entry ID not the inpute date, even tough it has the same result) at all. However its a mandatory selection since I enabled server-side processing (see screenshot #1).
I have deselect it for the chart as well. (see screenshot #4)
In the backend the table is sorted correctly (see screenshot #1 and #2).
When I display the table itself on a page the sorting is also correct (the ID column is normally hidden, I just made it visible for demonstration purposes; I am using auto sort for the date column; see screenshot #3).
Nevertheless I don't have the table and the chart showing on the same page. I want to use the chart on another page to the table.
I also tried to re-create it from scratch, however with the same result.
Is there maybe any other setting I need to be aware of in e.g. other columns or the gravityforms settings?
Thanks again for your help, Aleksandar, much appreciate it.
Best
Matthias
Update:
It is working as expected, when I put the table and the chart on the same page and check "follow table filtering" in the chart settings.
This might work as a workaround for now, however I want also to show this and other charts without having the corresponding tabled displayed (also not loaded and hidden on the same page).
Hi again Matthias
Yeah, that is a downside of the charts. For custom sorting and filtering to work, you do need to enable "Follow table filtering", sorry I forgot to mention that.
If you want the charts to follow table filtering, then both the page and the chart need to be displayed on the same page. Also, for the filters to be shown, the table must be present as well.
Now, there is a way to simply hide the table using CSS, leaving only the chart and the filters. Anyone who knows CSS will be able to still display the table if they were to inspect the page, and simply change the properties.
Since you need to show the filters, a simple css like this would not be useful, because it'd hide the filters too:
.wpdt-c .wpDataTables.wpDataTablesWrapper { display: none !important; }So, instead you would first need to disable the following in table settings:
"Show X entries" drop-down; "Info Block" from Display tab:
"Enable main search block" from Sorting and Filtering tab:
And "Table Tools" from Table Tools tab:
Then, you can hide the table, leaving the filters above the chart like this:
<style> .wpdt-c .wpDataTablesWrapper table { display: none !important; } </style> [wpdatatable id=1] [wpdatachart id=1]And that's it. This is how you'd create a page where you'd have Chart #1 dependent on wpDataTable #1 so it follows filtering, and the table hidden using CSS.
Screenshots are from an older version of wpDataTables, but they are still valid.
I hope 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