Hey everyone!

With the holiday season upon us, we want to share our upcoming working hours:

After that, we’ll return to our regular schedule and assist you as quickly as possible.

In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find tons of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel), which might just have the answers you need while we’re away.

Thanks a bunch for your understanding and support!

Warm regards and happy holidays!

TMS

Okay
  Public Ticket #3426468
Filter on multiple line charts
Closed

Comments

  • Rodolfo started the conversation

    Dear wpDataTables,

    I have two questions about a chart with multiple lines:

    1) Is it possible to set by default that only some series are visible (e.g. the first five) and not all possible ones? This way only five lines would be visible at the beginning and the user could eventually add more.

    2) Is it possible to insert a filter above the graph? Currently the user can only click on the series present below the legend.

    Thank you very much

    attached a screenshot

    Attached files:  screen.png

  •  1,847
    Miloš replied

    Hi Rodolfo,

    Sorry for replying so late to the tickets today.

    We have been experiencing an unusually high number of tickets.

    Your patience is highly appreciated.

    -

    1. This is not possible with our 'out of the box' options through the Chart Wizard,

    but you should be abe to achieve this by applying a Custom Chart Callback.

    What you are seeing as the current state of your charts is the default behaviour of the charts engine, 

    but you can try with a custom solution.

    Please first check our documentation about wpDataCharts callbacks

    On this page, you will find one custom callback example for each Chart Engine type,

    then you will need to modify our example to change the options you need.

    • 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 APIHighcharts 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.

    We will do our best to add more custom examples such as your use case on the Chart Callback documentation soon, but i can't say an exact ETA.

    -

    2) Is it possible to insert a filter above the graph? Currently the user can only click on the series present below the legend.

    - Yes, i will show how you can achieve this with a custom workaround.


    By default, the charts will not follow any filtering from their source table if you just put the chart "on its own" on the page.

    But If you place the source table together with its chart on the same page,

    and activate " Follow Table filtering"  on the chart Wizard settings,  it is going to follow any filtering/sorting you do on the table.

    -

    Now, depending if you wish to hide the table and have a filtering for Charts, we can have two workarounds available.

    1. If you wish to hide the entire table along with table filters;

    you can add this CSS to the table's back-end settings/Customize/Custom CSS.

    .wpdt-c .wpDataTables.wpDataTablesWrapper {
    display: none !important;
    }

    This will completely hide the table from the page, but you can still pass the table shortcode with the chart, and you will get the "follow table filtering" effect on this chart.

    2. Or if you wish just to hide the table while leaving the filters with the chart,

    we would first need to disable the following in the table settings:

    "Show X entries" drop-down; "Info Block" from Display tab:

    5739555450.png

    Then, "Enable main search block"  and "show filters in a form above the table" from the Sorting and Filtering tab:

    7822122957.png

    Then, you can add this CSS in the table settings/Customize/Custom CSS:

    .wpdt-c .wpDataTablesWrapper table {
    display: none !important;
    }
    

    That will just leave the chart visible with the filters on the page,

    if you pass both table and chart shortcodes.

    Let me know if you encounter any issue with this workaround.

    Thanks.

    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 | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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