CODEWITHSUNDEEP
javascripthighchartshtml-tabletableau-api
John Skillern
John Skillern

Reputation: 25

Linking a Filter/Search Table to a Highchart

I'm interested in doing something similar to the below Tableau example, but with a Highcharts multiseries stock chart:

https://www.tableau.com/trial/tableau-software#reveal--2

Ultimately, I'd also like to add graphics to the table, for instance net income might be an icon with a shade of red or green, depending on profitability.

Any suggestions/examples are much appreciated!

Upvotes: 1

Views: 310

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

From Highcharts site it looks like a regular line chart with many series, which are grouped by colors. I created a really simple example of something similar, where series or color group is hide/show on checkbox buttons.

Demo: https://jsfiddle.net/BlackLabel/pwan27hq/1/ 

tests.forEach(test => {
  test.addEventListener("click", function() {
    chart.series.forEach(s => {
      if (s.userOptions.id == this.id) {
        if (s.visible) {
          s.hide()
        } else {
          s.show()
        }
      }
    })
  })
})

All you need to do is to style them and create an HTML table with the data.

If you want to get your data from the HTML table here is an example how to achieve it: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-parsed/

API: https://www.highcharts.com/docs/working-with-data/data-module

Upvotes: 1

Related Questions