Connecting chart to DataTable won't select pie on the first click

Connecting chart to DataTable won't select pie on the first click

MadBoyEvoMadBoyEvo Posts: 86Questions: 23Answers: 0

Link to test case:

https://jsfiddle.net/MadBoy/dLnh6asr/1/

Description of problem:

So I've connected ApexCharts to DataTables. It seems to work correctly however the problem is with line 278.

table1.columns(0).search("^" + findValue + "$", true, false, true).draw();

If I uncomment this line when you click on a PIE the very first time it's selected and stays selected. If I leave it uncommented when clicked it will search for the value in the table (and work properly) however ApexCharts won't register the click on PIE. You have to click it again.

Is it a problem with DataTables or ApexCharts?

Additionally - what would be the best way to do a double search - as in the search for column 0 based on value and then highlight the value that was clicked? Any ideas?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 11,287Questions: 0Answers: 1,928

    I'd say that's ApexCharts - or your integration - as it does seem that findValue is still the column cell when you do that double click.

    Additionally - what would be the best way to do a double search - as in the search for column 0 based on value and then highlight the value that was clicked? Any ideas?

    If you search for a value, only those values will be present, or do you mean just highlight the cell? If so, you could use the Select extension, and select all the cells in that column.

    Colin

  • MadBoyEvoMadBoyEvo Posts: 86Questions: 23Answers: 0

    I mean I would like to do a search so that it "finds one row" - this works.

    And then because I clicked on a specific PIE I would like the value from that PIE highlighted within that row so that the user is aware where it is.

  • colincolin Posts: 11,287Questions: 0Answers: 1,928

    Yep, so as you've filtered, and only matching values will be in the table, you can just use that Select extension as I mentioned, with column(0).select(),

    Colin

  • MadBoyEvoMadBoyEvo Posts: 86Questions: 23Answers: 0

    Right, so it works, but I need to know which column has that value. With PIE it's pretty easy because I could preset it to a specific column. But with bar charts, I would need to find matching values within that specific row. How would I do that?

                                        table1.columns(0).search("^" + findValue + "$", true, false, true).draw();
                                        console.log(table1.columns(0).search("^" + findValue + "$", true, false, true));
                                        table1.columns([0, 3]).select();
    

    I tried checking what table1.columns(0).search("^" + findValue + "$", true, false, true) will show but it didn't give me selected rows that I go and find where the value I clicked could be located.

  • kthorngrenkthorngren Posts: 12,261Questions: 25Answers: 2,869

    Sounds like you want to compare an array of data (bar chart data) to one or more columns in each row. I would look at using a Search Plugin for this.

    Kevin

  • MadBoyEvoMadBoyEvo Posts: 86Questions: 23Answers: 0

    I tried to apply your idea to my example but I couldn't figure it out. I couldn't find any example that would show something similar that I could refer to.

  • kthorngrenkthorngren Posts: 12,261Questions: 25Answers: 2,869

    Maybe I'm not understanding what you are looking for but if you use search() with a regex expression it will look for the matching value within the row. You can use rowCallback to add or remove classes based on whether they match the value you are searching for.

    You can use the mark.js plugin to highlight searched values. It is described in this blog.

    Kevin

  • MadBoyEvoMadBoyEvo Posts: 86Questions: 23Answers: 0

    Here's a better example:
    - https://codepen.io/MadBoyEvo/pen/BaQwzKg

    The search does work - it finds the proper row. However, since I am dealing with bars I would also like to highlight the value that I've clicked (not only the name of it). So while I know the value I clicked I don't know how to highlight that additional value within row I've already shown to the user.

    Here's the same example but with turned on SearchHighlight:
    - https://codepen.io/MadBoyEvo/pen/OJbxXXe

    My problem is - I know how to do the first search, not the second. So while it's done for the Name, I don't need name highlighted - I need the value I clicked on the bar.

  • kthorngrenkthorngren Posts: 12,261Questions: 25Answers: 2,869
    Answer ✓

    There's a lot going on in that test case. Your chart click event will need to get the value of the clicked bar instead of the chart name. You will need to use a Search Plugin to compare with all the desired columns. I built a simple test case to show how this might be accomplished:
    http://live.datatables.net/titexage/1/edit

    As an added bonus it shows how to highlight the matched cells in the plugin by getting an instance of the Datatables API.

    Kevin

  • MadBoyEvoMadBoyEvo Posts: 86Questions: 23Answers: 0

    Thank you. I've used my old code in combination with your new code and managed to sort it out for bar charts.

    The way it works is that I've defined hashtable at the top that tracks each value per different table id (selected/not selected). If you click on the given bar it will first search based on the series name and then do the highlighted search you showed to highlight the number that was clicked.

    If the click happens outside of the bar it clears the search. works quite well.

    I need to clean up the code, and add this for pie charts and other chart types but I believe I've found a bug in ApexCharts that complicates this a bit - but outside of the scope for you.

    Just wanted to show it works and how 2 separate products are now merged together ;-) Appreciate the help.

    Btw this is auto-generated from PowerShell with 38 lines of code where data definition is 20 lines of code.

    New-HTML {
        New-HTMLSection -HeaderText 'Donut Charts - Defaults' -CanCollapse {
            New-HTMLPanel {
                $DataTable = @(
                    [PSCustomObject] @{
                        Name  = 'My Object 1'
                        Time  = 1
                        Money = 5
                        Taxes = 20
                    }
                    [PSCustomObject] @{
                        Name  = 'My Object 2'
                        Time  = 3
                        Money = 1
                        Taxes = 5
                    }
                    [PSCustomObject] @{
                        Name  = 'My Object 3'
                        Time  = 12
                        Money = 5
                        Taxes = 1
                    }
                )
    
                New-HTMLTable -DataTable $DataTable -DataTableID 'NewIDtoSearchInChart'
                New-HTMLChart {
                    New-ChartToolbar -Download
                    New-ChartLegend -Name 'Time', 'Money', 'Taxes'
                    foreach ($Object in $DataTable) {
                        New-ChartBar -Name $Object.Name -Value $Object.Time, $Object.Money, $Object.Taxes
                    }
                    New-ChartEvent -DataTableID 'NewIDtoSearchInChart' -ColumnID 0
                }
            }
        }
    } -ShowHTML -FilePath $PSScriptRoot\Example-ChartsWithTablesBar.html -Online
    

    Thank you again for DataTables!

  • colincolin Posts: 11,287Questions: 0Answers: 1,928

    Nice! They work really well. Thanks for sharing,

    Colin

  • allanallan Posts: 53,579Questions: 1Answers: 8,308 Site admin

    That is really cool! I don't suppose you'd have any interest in writing it up as a guest blog post? :).

    Allan

  • MadBoyEvoMadBoyEvo Posts: 86Questions: 23Answers: 0
    edited February 25

    Short answer:
    Sure, I could try to write a guest blog. Although, I've been writing blogs a long time I've never written a blog post that talks about HTML/CSS/JS directly, as I am a noob when it comes to web technology and I am afraid that my code is far from being best practices. My main focus is general Microsoft-based IT and in recent years PowerShell.

    Long answer (a bit too long):
    I actually wrote a PowerShell module called PSWriteHTML https://github.com/EvotecIT/PSWriteHTML which heavily relies on DataTables (it started with DataTables as a requirement for IT people like me where we have to deliver reports to managers, directors, and so on. The module was downloaded over 100k times and supports both offline and online usage to cover Enterprise needs where PSWriteHTML is used sometimes without any internet access. The way it was designed that at any time it's supposed to deliver a single HTML file that is always portable. Be it 300kb or 80MB or 800MB file (yes, it does work) you can attach it to an email/host it as a static page or just open it on demand - and it's supposed to work.

    Any Windows/Linux/macOS machine with PowerShell 5.1 and up should be able to open PowerShell and install the module using this cmdlet:

    Install-Module PSWriteHTML
    

    The easiest method to see the power of DataTables in PowerShell is Out-HtmlView. You can pass any PowerShell Output cmdlet to Out-HTMLView and it will display it in your DataTables.

    For example

    Get-Partition | Out-HtmlView
    

    Enabling any data table features is as easy as choosing one of the many parameters that are available. I've implemented SearchHighlight, SearchBuilder, SearchPanes conditional formatting, and a lot of other cool features that you offer. Not everything is available in Out-HTMLView tho (need to update that cmdlet) - but it's only for quick usage.

    Get-Partition | Out-HtmlView -Filtering -ScrollX
    

    The real advanced usage is as I've shown in the above post tho, where you can define positioning, sections, events between two or more different libraries.

    I've written multiple blog posts showing how to use PSWriteHTML where I connect your DataTables with Diagrams (vis.js), calendars, tabs, treeviews, and many more allowing anyone to just focus on delivering output rather than knowing HTML.

    Some of the blogs about PSWriteHTML:
    - https://evotec.xyz/easy-way-to-create-diagrams-using-powershell-and-pswritehtml/
    - https://evotec.xyz/nested-tabs-diagram-updates-diagram-events-calendar-object-and-more-in-pswritehtml/
    - https://evotec.xyz/all-your-html-tables-are-belong-to-us/
    - https://evotec.xyz/sending-html-emails-with-powershell-and-zero-html-knowledge-required/
    - https://evotec.xyz/comparing-two-or-more-objects-visually-in-powershell-cross-platform/

    My goal is that admins should have to know 0 HTML, 0 JS,0 CSS and still be able to provide complicated dashboards to their managers. They should also be able to spend as little time as possible building HTML.

    Anyways - back to your question - I was planning to write a new blog post about all the DataTables features I've added in the last 6 months. About AlphabetSearch, SearchBuilder, SearchPanes, and many many more. And as you can see below implementing Alphabet search in PowerShell way is just one parameter away.

    $ProcessSmaller = Get-Process | Select-Object -First 4 -Property Name, Id, PriorityClass, Responding
    
    New-HTML {
        New-HTMLSection -Invisible {
            New-HTMLSection -HeaderText 'Standard Table with Search Highlight' {
                New-HTMLTable -DataTable $ProcessSmaller -SearchHighlight
            }
            New-HTMLSection -HeaderText 'Standard Table with Alphabet Search' {
                New-HTMLTable -DataTable $ProcessSmaller -AlphabetSearch
            }
        }
        New-HTMLSection -Invisible {
            New-HTMLSection -HeaderText 'Standard Table with Search Builder' {
                New-HTMLTable -DataTable $ProcessSmaller -SearchBuilder
            }
            New-HTMLSection -HeaderText 'Standard Table with Alphabet Search - Advanced' {
                New-HTMLTable -DataTable $ProcessSmaller -AlphabetSearch {
                    New-TableAlphabetSearch -ColumnName 'Name' -AddNumbers -CaseSensitive
                }
            }
        }
    } -ShowHTML -Online -FilePath $PSScriptRoot\Example7_AlphabetSearch.html -Format
    

    or PercentageBar

    $DataTable = @(
        [PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 1.42; Percents = 50 }
        [PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 1.72; Percents = 5 }
        [PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 1.22; Percents = 17 }
        [PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 23.73; Percents = 99 }
        [PSCustomObject] @{ Test = 'Name'; Test2 = 'Name2'; Test3 = 'Name3'; Test4 = 2.73; Percents = 105 } # will be trimmed to 100%
    )
    
    New-HTML {
        New-HTMLTable -DataTable $DataTable -EnableSearchAlphabet {
            New-TablePercentageBar -ColumnID 4 # runs on defaults
            New-TablePercentageBar -ColumnID 3 -BackgroundColor Blue -TextColor White -BorderColor Grey -BarColor gold -BorderStyle ridge -Type round
        } -ImmediatelyShowHiddenDetails
    } -ShowHTML -Online -FilePath $PSScriptRoot\Example7_PercentageBar.html -Format
    

    I was actually planning to open a post on a forum with a question if you would be interested in some kind of blog or information around that. PSWriteHTML is perfect for delivering basic examples of DataTables features where users can just add/remove features they want and code is autogenerated and they have a working examples that someone can start dissecting into pieces.

    New-HTML {
        $ProcessSmaller = Get-Process | Select-Object -First 4 -Property Name, Id, PriorityClass, Responding
        New-HTMLTable -DataTable $ProcessSmaller -SearchHighlight
    } -ShowHTML -Online -FilePath $PSScriptRoot\Example7_AlphabetSearch.html
    
    New-HTML {
        $ProcessSmaller = Get-Process | Select-Object -First 4 -Property Name, Id, PriorityClass, Responding
        New-HTMLTable -DataTable $ProcessSmaller -AlphabetSearch
    } -ShowHTML -Online -FilePath $PSScriptRoot\Example7_AlphabetSearch.html
    
    New-HTML {
        $ProcessSmaller = Get-Process | Select-Object -First 4 -Property Name, Id, PriorityClass, Responding
        New-HTMLTable -DataTable $ProcessSmaller -SearchBuilder
    } -ShowHTML -Online -FilePath $PSScriptRoot\Example7_AlphabetSearch.html
    
    New-HTML {
        $ProcessSmaller = Get-Process | Select-Object -First 4 -Property Name, Id, PriorityClass, Responding
        New-HTMLTable -DataTable $ProcessSmaller -AlphabetSearch {
            New-TableAlphabetSearch -ColumnName 'Name' -AddNumbers -CaseSensitive
        }
    } -ShowHTML -Online -FilePath $PSScriptRoot\Example7_AlphabetSearch.html
    

    Or in one-liners using Out-HTMLView

    $ProcessSmaller = Get-Process | Select-Object -First 4 -Property Name, Id, PriorityClass, Responding
    $ProcessSmaller | Out-HtmlView -SearchPane
    
    $ProcessSmaller = Get-Process | Select-Object -First 4 -Property Name, Id, PriorityClass, Responding
    $ProcessSmaller | Out-HtmlView -SearchPane -Buttons copyHtml5,excelHtml5
    
    $ProcessSmaller = Get-Process | Select-Object -First 4 -Property Name, Id, PriorityClass, Responding
    $ProcessSmaller | Out-HtmlView -HideFooter -DisableResponsiveTable
    
    $ProcessSmaller = Get-Process | Select-Object -First 4 -Property Name, Id, PriorityClass, Responding
    $ProcessSmaller | Out-HtmlView -Filtering -FilteringLocation Both
    

    Since PowerShell has an auto-complete feature it's very easy to discover parameters and features added, so it could be a good testing ground for some people. There is a small learning curve tho.

    Most of my blog posts focus on the PowerShell side of things. My users don't know much about HTML/CSS/JS and even I am struggling with that where I spend hours testing what works, what doesn't work, and how to connect things together. I am mostly working alone on PSWriteHTML and without proper web background it's really hard at times that's why I heavily appreciate the DataTables forum where you guys give so much help around it.

    That's why I would like to give back - if you want a guest blog post - so be it! I'll do it. I could write on connecting ApexCharts (once I'm done with full integration) and Diagrams with DataTables or I could write about AlphabetSearch once you release my updates to it. Or I could write about anything you can do with DataTables within what I've done on the PSWriteHTML end.

    I could also write about the performance of DataTables. Since I often play with large data sizes from 300KB to 150MB HTML files (remember - PSWrtiteHTML at the moment puts everything in a single file) I had to overcome problems with performance.

    Below code builds 3 different ways of DataTables output

    $ProcessSmaller = Get-Process | Select-Object -First 4 -Property Name, Id, PriorityClass, Responding
    $ProcessSmaller | Out-HtmlView -DataStore HTML # default
    $ProcessSmaller | Out-HtmlView -DataStore JavaScript # inline data
    $ProcessSmaller | Out-HtmlView -DataStore AjaxJSON # separate files, requires to be hosted
    

    It also defaults to proper paging and settings that make sure you can open 80MB HTML files without an issue. So let me know what you would be interested and I'll try to deliver something once I'm done with the stable release of PSWriteHTML in few weeks.

    I am not sure how good it will be when it comes to HTML/CSS/JS content, but I'll try to make it readable (you could review for any mistakes).

  • allanallan Posts: 53,579Questions: 1Answers: 8,308 Site admin

    Amazing! And thank you for introducing me to PSWriteHTML - PowerShell is not something I've used much, so it is really interesting to see its capabilities.

    Regarding the guest blog post - any of those three topics would be excellent, if you are willing to write one up, I'd say pick the one that you are most interested in doing. It is primarily a Javascript blog, but a gentle introduction to PS and how it is integrated with DataTables might be interesting.

    Drop me an e-mail if you like allan " this domain.net.

    Thanks,
    Allan

Sign In or Register to comment.