Hi David

Thank you for reaching out to us.

Depending on the chart type you would like to use you can have a look at our documentation how each chart type is constructed.

You need to play around with the table structure to display the data in the desired way but please have a look at these links that can help you achieve what you need

https://wpdatatables.com/documentation/wpdatacharts/google-charts/

https://wpdatatables.com/documentation/wpdatacharts/highcharts/

https://wpdatatables.com/documentation/wpdatacharts/chartjs/

If you need to show the filters, 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.

The screenshots are from an older version of wpDataTables, but they still apply.

Hi David

Do you mind sending us the source file from which the table was created as we would need to have a closer look at the data and play around with it to get the desired result. The range sliders can only come from the table so after we get the chart to display what you need then you would hide the table and leave those two filters visible. 

Hello David

We're glad to hear you're getting it right, and we apologize for the late responses - we have been experiencing an unusually high number of tickets. Your patience is highly appreciated.

All these points that bother you can't be fixed with the plugin's built-in options, but instead you'd need to use 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 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")

For example, changing the number format and adding "km" to a tooltip can be seen here.

Adding labels to Y-axis is demonstrated here.

• Please note that using hooks or wpDataTable and wpDataChart callbacks requires a certain level of programming skills and included support refers only to advice.

Hi David

We are sorry to hear that. In situations where the desired result cannot be achieved using the plugin's builtin features we can only try and provide you with a solution. I really wish there is more we can do in this situation but it simply goes beyond us.

If there is anything else we can assist you with do let us know. 

Hi David

1. The desired number format in wpDataTables is selected which converts the value entered in Google sheets. And the currency symbol is added as a prefix in the column settings.

2. The currency symbol cannot be transferred over to the chart, and the column type is integer from the start.