Okay
  Public Ticket #3299493
Would like to filter charts without viewing table
Closed

Comments

  • Corey Goffinet started the conversation

    Hi in one of your chart videos you mention filtering charts but removing the datatables view and that support would have to get involved. i would like to have this ability for my charts.  Also i would like to know if any of the chart types have the ability to show a grand total of the parts I.E.  a pie chart has 50% in one group and 50% in another group and i would like to see text of the 100% grand total, somewhere in the chart view.  Please let me know what steps we need to take to remove the data tables view and if the other chart modification is possible.

  •  1,689
    Miloš replied

    Hi, Corey.

    Sorry for the delay.

    1. Regarding hiding the table when it is on the same page as the chart, to have that filtering capability but hide the table, i can give you some custom CSS;

    We can hide the table using CSS, leaving only the chart and the filters. 

    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, we would first need to disable the following in 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 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]
    

    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.


    2. In regards to the second point, i am sorry but i did not fully understand that use-case.

    Could you elaborate a bit more about this,   if you could possibly add any screenshots or make a short Video so that we can fully understand what is needed for that chart solution with presenting groups and totals,

    and we will advise? Thank you.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    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

  •   Corey Goffinet replied privately
  •  1,689
    Miloš replied

    Hi, Corey.

    No problem, i am happy to help.

    Apology for a late response time.

    -

    Thank you for the screenshot.  Yes, it is always good if you have any sensitive data to send it as a Private reply, for safety.

    In regards to this use-case, if i understood, so far you made a numeric column for each organization to count how many members each has,

    which is presented on that chart.

    -

    1. I can't see a table, i can just see a bar chart on your screenshot, so I'm not sure of the table structure,

    but i can advise with some general informations, let me know if this helps.

    If you wish to sum up the total of members per each organization ( if you have them in a numeric column),

     you can activate "Chart Grouping".

    If you enable this feature, the values of the rows with the same label will be summed up and rendered as a single series, if it’s disabled (the default case) all rows will be rendered as separate series.

    This can be helpful if you have repeating rows with identical names in your table, and you want to show them as sum of values for this name in your chart. This feature will also work in combination with Follow table filtering.

    It is quite easy to activate the grouping for a chart. Just tick this checkbox in the chart create/edit wizard:

    6275577068.png

    Now, how this will work out for your use-case, that depends on the way how you constructed the table and columns.

    It works well if you already have a numeric column for each Organization that counts the members.

    If you don't already have a numeric column, but rather if you have names of Members in each row, and a column that stores the name of their Organization in each Member row, 

    there is a workaround, i will show you more details in the next point.

    2. The main "limitation" we face with any chart is that each chart can only take one String ( or Date) column, all other columns must be numeric.

    If you have a string column for a Member Name,  another string column that stores each members organization name;

    I will give you a working example of a Manual table with a couple of different Apex charts.

    It is a different scenario, but you can use the same logic.

    Let's say if we have a column that holds some item names, "item name".

    And if we create an additional numeric column ( which you can hide if needed) called " item count".

    We make it integer type, and set predefined editing value to be always "1".

    3171033574.png
    3008808485.png

    In this example, i just name some items, item A and item B

     ( in your case it can be Organization name A or Organization name B),

      and every new row i input, the item count already pre-populates adding number 1 in each row.

    -

    Then, if i create a basic bar chart, and if we take columns item name, and item count:

    8429354890.png

    We will use the "Grouping in charts";

    7622367310.png

    Now it is showing that item A is repeating itself 4 times, and item B twice, and it is presenting how many there are in the chart.

    6567997740.png

    The same goes for this pie chart, with the additional percentages shown. If i hover the mouse over the series, i get this tooltip showing that there are  four of "item A",  and two of "item B".

    -

    Later on, we can also hide that column from Editing Modal with custom CSS etc, if needed.

    ( Let me know if it comes to that, i can devise some basic CSS for that purpose)

    And the example i gave was for an Editable Manual Table;

    if you have a different table type, such as linked with an existing data source, 

    you would have to implement an "auto populate" numeric "Count" column for this purpose in the source data.

    For example, if i use a Form Plugin integration, i will add an "Auto - Populate" Numeric Field, so each submission will have that "1" stored as the additional "counter" field.

    -

    You could use the same logic to count how many Organizations there are, in a different chart.

    Basically, the main rule, as mentioned earlier is that each Chart can only take one String/ ( or Date type) column,

    and all other columns must be numeric.

    So you could make one chart to count how many members are in each organization;

    and another chart to count how many organizations are in total.

    Let me know if that workaround might be a solution for you, in terms of summing up how many members are in each Organization with a "Count" numeric column.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    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

  •   Corey Goffinet replied privately
  •  1,689
    Miloš replied

    Hi, Corey.

    Sorry for the late reply.

    I am happy to see that you devised this solution, it is very close to the full result indeed.

    Thank you for sharing the screenshot as well.smile.png

    -

    Absolutely, we take great value from our user suggestions for plugin improvements.

    Our management and developers go through all of them, and they carefully consider the priority list depending on how many users request a certain option/feature/improvement,

    and they do their best to add as many as possible over time.

    At the moment, as you probably know, it is not possible to add any shortcode parameters that will directly affect any options of charts,

    but this specific use-case is an interesting idea, so i feel it will  be a valid suggestion.

    Please feel free to search on our suggestions page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

    -

    If you wish to try to make a custom solution in terms of customizing chart options,

    i will share the informations we have in general about trying something like that.


    Every chart engine has its own layout and its settings.

    We use free libraries for chart engines, and they are limited as to what we can change from within the plugin's UI.

    You can check out all the available chart engines and examples of wpDataCharts documentation here . 

    If the options you need are not in the chart creation wizard,  you can try to find a custom solution using chart callbacks.

    You can check our documentation about 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 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.


    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    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

  •   Corey Goffinet replied privately
  •  1,689
    Miloš replied

    Hi, Corey.

    First my sincere apologies for the waiting time.

    -

    It seems i found a solution that works better for the Date Filtering and this workaround.

    I have reproduced the same issue as you, on my test Tables.

    If we just use HTML style on the page like this to hide the table,  then the Date Range filter has that weird issue,

    for me it looks different but still strange, it is "cut off".

    8522216784.png

    The solution can be to remove that "Style" HTML from the page itself,

    but in the table's back-end settings, go to Customize/Custom CSS, and add this to the table :

    table.wpDataTableID-5 {
        display : none !important;
    }

    2255098415.png

    Just double-check to insert your Table ID, mine was table 5.

    And then the Date Picker should load properly :

    4743004562.png

    So, to summarize, remove this style HTML tag from the page :

    <style>
    .wpdt-c .wpDataTablesWrapper table {
    display: none !important;
    }
    </style>

    and just add that custom CSS i sent to the source table's Customize/Custom CSS.smile.png

    Let me know if that works for you.

    Thank you.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    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