Reputation: 177
I have a chart which is showing Mile(s) on Y-axis and Date in X-axis. Type of the chart is stacked column chart. Each stack is representing how much a driver, drove on that particular day in mile(s).
Below that chart, there is a ui-grid which is showing date, driver name and all the trip details(mile, time, no of riders, pickup, dropoff location etc). Now the thing is a driver can do several trips on a particular day, so there may be more than one row for a driver on a date.
Now what I want to do is if someone clicks on a particular stack in the chart, then all the rows related to that stack in the ui-grid will be highlighted.
e.g Suppose "Driver A" has done 5 trips on 1st Jan. Then there will be a stack of Driver A in chart an 5 rows in ui-grid. Now if a user clicks on that stack then I want to highlight those 5 rows in ui-grid.
(using highchart, angular-ui-grid)
Upvotes: 0
Views: 312
Reputation: 489
You can add an attribute to each cell called cellClass which accepts a function to perform the logic you need:
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
return *your function goes here*;
}
The function must return a css class that exists on your css files. More information can be found on the following link Customize UI-Grid with Dynamic Cell Classes
Upvotes: 1