Hello Fabricio

Thank you for your purchase.

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.

I hope that helps

You can add the filters in the table, and then use those filters as described in the steps above.

Hi Fabricio

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.

Hope that helps.

Hi Fabricio

Aleksandar is out of office and I will take it from here.

If you're using style tags so you will insert that on the page where you insert shortcodes of wpdatatable and wpdatachart like aleksandar explain you.

Hi Andrew

You are welcome.

If you have any other issue or question please open new ticket, and we help you out.

I’d like to ask you a favor. Would you mind taking a few minutes to write a review for us, please on this link? 

Our free version is the only place where we can have proof for our hard work; your comments are beneficial for others to know what to expect when they’re looking for our plugin.

Thank you in advance. It means a lot to us, and I am looking forward to reading your comment.

Best regards.