search

vasturiano / timelines-chart

Timelines Chart
http://vasturiano.github.io/timelines-chart/example/categorical/
MIT License
558 stars 121 forks source link

How to filter rows and columns #21

Closed r2eqvlkx closed 4 years ago

r2eqvlkx commented 6 years ago

Hey,

Thanks for this wonderful code. I am using this for data analysis and it is working perfect. Currently I am trying to filter out some of the data based on two values [RowID, Date].

The values are passed to the script via query string (e.g. http://localhost:8000/timeline.html?id=324&date=20180312). Then I am trying to "filter" out all other elements from the "myData" array, but it doesn't work. I cannot even use CSS to make them invisible! I cannot get the correct element IDs. Could you please give me a hint on how to do this?

Cheers

vasturiano commented 6 years ago

@r2eqvlkx if you wish to filter the data being shown, just manipulate your data array and feed a partial data set to the graph by doing:

myChart.data(<partial array>)
r2eqvlkx commented 6 years ago

Thanks for the hint. This trick runs very slow for my case. My first idea was to assign a tag/class to each data point and then play with data points "visibility" via CSS. At this stage I got stuck, since I couldn't identify the correct element ID.

Since, the current code already has a zooming option, which essentially does what I want but on a range of points. I thought it should be possible to use the same method to manipulate the current view according to a discontinuous range.

e.g., I would like to filter out everything BUT label:"12001" via (http://localhost:8000/timeline.html?id=12001) or filter out everything BUT timerange:["2018-04-01","2018-04-01"] via (http://localhost:8000/timeline.html?date=20180401)

myData=[ {label:"12001", data:[ {timerange:["2018-03-01","2018-03-02"],val:"Offline"}, {timerange:["2018-04-13","2018-04-15"],val:"Online"}, {timerange:["2018-06-21","2018-07-12"],val:"Offline"}, ] }, {label:"13001", data:[ {timerange:["2018-03-04","2018-03-08"],val:"Offline"}, {timerange:["2018-04-09","2018-04-19"],val:"Offline"}, {timerange:["2018-05-11","2018-06-12"],val:"Online"}, ] }, ]

Thanks in advance