Okay
  Public Ticket #2891172
Charts not updating dinamically
Closed

Comments

  • Gonzaga Rojas started the conversation

    Hello team - I built below page using php, html and mysql

    http://sfvranking.elgalactico.gg/

    and I am trying to recreate it in Wordpress using your plugin since I feel it's a more professional approach, to do this I am using wpDataTables + Master-Detail but I still can't make the charts update dynamically after clicking on a row

    This is the main table where I enabled Master-Detail and you click on any row

    https://elgalactico.gg/sfvranking/

    and this is where the charts should update dynamically with the information from the row you previously clicked on

    https://elgalactico.gg/sfv-player-details/

    the problem I have is the charts are not updating dynamically, they always show the same information regardless of what row I click on. Is there a way to do this with wpDataTables and Master-Detail?

    (Attached are a couple of images)

  • [deleted] replied

    Hi Gonzaga

    Thank you for reaching out to us.

    The charts have a Follow table filtering feature but this will only work when the table is filtered. If you are using Master detail you are not filtering the table but simply displaying the existing data so there is no actual change to the table that would trigger the chart to be updated accordingly. 

    https://wpdatatables.com/documentation/wpdatacharts/follow-table-filtering-in-charts/

  • Gonzaga Rojas replied

    Hi @Blaženka - Thanks for your prompt reply and also explaining how Master-Detail works :) I suspected that was the case. Going back to my original question, how can I accomplish the functionality I desire using your plugin?

    regards,

  • [deleted] replied

    Hi Gonzaga

    You can only place the table and the chart on the same page, enable Follow table filtering and hide the table leaving only the filters visible, to allow your clients to filter through the table and see the chart update accordingly.

    If you need to hide the filters, a simple css like this would be enough:

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

    But 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:

    2852344743.png

    "Enable main search block" from Sorting and Filtering tab:

    3844294247.png

    And "Table Tools" from Table Tools tab:

    6988162559.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]
    

    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.


  • Gonzaga Rojas replied

    Hello Blaženka -  Great explanation with examples. I'll give it a try soon. Thank you!



    regards,

  • [deleted] replied

    You are most welcomesmile.png

    If there is anything else we can assist you with please don't hesitate to open a new ticket.

    Have a wonderful day!