I have been looking around for a simple'ish solution that would allowing user to disable certain records on the graph. I know Google Charts API offeres ways to remove columns and rows. However, I don’t want to remove a row, I would like to “disable” it, so that it wouldn’t be used in the calculations, very similar to the google.visualization.ChartRangeFilter, except in ChartRangeFilter you set the date range to focuse on.
i.e. we have a line graph, x and y axis, with three lines for New York, London and Paris. I click on one of the points on the “Paris” line and that would disable that particular point, if I am to click on same point again than it will be enabled once again.
Options that were concidered:
1\ https://developers.google.com/chart/interactive/docs/events#the-select-event to try to "disable" the cell that user would click on.
2\ I have also been thinking to select all records by default and let user unselect them
Wondering if someone has a potential solution?
I found a similar solution, whichI was thinking to utilise, except their you hide / show the lines, rather than particular values..
In the fiddle example they use to make function happen
column: 6,
roleColumns: [7],
display: false
http://jsfiddle.net/asgallant/6gz2Q/
Related
I've got a plotly graph and am trying to use plotly_click to select and unselect individual points. This works fine when the hovermode: closest is enabled, and data.points returned by plotly click only contains a single array that is the series of points I clicked. If I switch to hovermode: x unified data.points now returns an array of arrays, one for each series of points in the graph, and it isn't possible to tell which series was clicked.
Here's a codepen that shows this behavior: https://codepen.io/occam98/pen/abYrYmV
change link 11 to 'x unified' and inspect the data object in the console to see this.
Is there a workaround for this? Ideally, I'd like to continue to use the x unified hovermode, but have plotly_click only return the series that was clicked, or have some other way to identify which point was clicked.
I am developing a datetime series line chart of efficiencies (in percentage) over time.
I need a tooltip to display information about each point on the chart, but I am finding that it is difficult to hover over points which coincide with the line or marker of another series.
The chart will be static in nature in that users will not be able to remove series from the chart - so they wouldn't be able to remove a series in order to be able to get more easily hover over the desired point.
In this demo - https://jsfiddle.net/slaws/37y4cteq/10/ - it takes many attempts moving the cursor in that area to get the tooltip for the last point in the series with the black markers to show.
Here
I moved my cursor around the area marked in red, but couldn't get the tooltip for any points other than one shown to display.
I had to follow a specific procedure and get my cursor to a specific point to be able to hover over the black marker and get the tooltip to display. Here
I had to hover over the second to last black marker and then move the cursor to the point indicated to get the tooltip for the last marker to display.
I have tried using the findNearestPointBy (x, y and xy) in combination with stickyTracking (true and false), with no improvement.
"stickyTracking": false,
"findNearestPointBy": 'y'
I read something about a direct hover mode rather than nearest neighbor but found no details about how to implement that.
Any guidance on how I can make it easier for my users to display the tooltips in my use case would be greatly appreciated!
Setting tooltip.snap as 0 and setting back stickyTracking to default options fixes your issue.
Demo: https://jsfiddle.net/BlackLabel/54q2eubd/
API: https://api.highcharts.com/highcharts/tooltip.snap
I just need to know how to disable a single legend item programmatically on chart reload (disable means: legend is shown greyed out and its linked curve is hidden), as I need to reload a chart with some new data using some back and forward arrows, but still need to remember the user preference or the state of legend items (on/off)
You can just call hide on the series associated with that legend marker to hide the series/grey out the marker:
series.hide();
Thanks #xorspark that's really it, it's about controlling the series not legend.
It happened to work specifically with the appeared or inited events, not shown event as it seemed to be, like this:
series.events.on("inited", () => {
reactState ? series.show() : series.hide();
});
inited event even works better, as disabled legends will not show a glimpse of their color on the curve when using appeared.
I would like to link a pair of series in highcharts so that clicking either one in the legend turns both in the pair on/off.
For example, in this fiddle, if I click 1A in the legend I would like it to also turn off 2A but leave 1B and 2B unaffected. Clicking 2A should also turn off 1A, i.e. the link should work both ways.
Is there a way to achieve this?
You can also use linkedTo options from Highcharts, see: http://jsfiddle.net/GCqsf/4/
There is only one limit - linked series isn't displayed in legend, so probably it may not fit the best your example. Since Highcharts 3.0.7 you can set series.showInLegend = true to display linked series in legend.
You'll have to handle the legendItemClick event and specifically hide (and show) the "sister" series.
I have a running example in this jsFiddle.
Note that I'm using the links variable as an easy way to get the "sister" series for a given series.
Also note that I've added an id to each series so that chart.get() returns the series when given its id.
I need to toggle specific points in a series in Highcharts based on a value in the data object. Is this possible at all? I can't see anything in the API that says a point within a series can be toggled.
I know I can remove points specifically, but I would much rather hide them, as the user will want to show/hide rather frequently, and I don't want to rebuild the whole series every time.
You can use Point.update and set the marker radius to 0.
selectedPoint.update({marker: { radius: 0 }});
The way to go is to use the point.remove and series.addpoint calls. I don't think that highcharts has a concept of hidden points.