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.
Related
I am rendering a chart using Highcharts.js library
$('#container').highcharts({
title: {
...
I have some checkboxes to select which series to plot. Depending which series I plot the first time, the colors will be different.
How to reproduce
Go to the example: http://jsfiddle.net/1u98o3aq/1/
Select only "Tokyo" checkbox, click plot
Select "New york" checkbox, click plot
Select "Berlin" checkbox, click plot
...
As you can see, it is not using all the colors, all of them are plotted in blue.
You can now unselect everything, plot. Then select everything, plot. The 4 series will remain all with the same color.
However, if you start (Run) the example again, and this time select everything and plot, now it is rendered correctly. Now you can unselect everything and go one by one. The colors are right.
If you select now only the 2nd and the 3rd series, the 2nd and 3rd colors will be used (no blue).
It is like Higcharts is caching for each series a color (which should not) and chosing wrongly (starting from color 0) when adding more series to be shown.
Using custom colors does not solve the problem.
I think that your problem is connected with how you are loading your series to your chart.
Right now, when you are loading the new chart, you are basing into previously drawn series (you are updating the series array).
To avoid the problem you have, you should be able to make copy of your array before you will load it into your chart:
lastSeries = $.extend(true, [], seriesSelection);
Here you can see an example how it can work: http://jsfiddle.net/1u98o3aq/3/
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/
I'm trying to make a column graph in Highcharts and it's not working out too hot. I'm essentially trying to give the column a background color that the data point can overlay. I want the effect of stacking without actually stacking if that makes sense. Any thoughts on what I can do?
Essentially I want it to look like a progress bar... there should be a distinct coloring between the top of the bar and the top of the graph itself. I've already tried stacking: percentage, but to no avail. Thoughts?
There are three options that come to mind:
1) To achieve the 'effect' of stacking, actually stack it: use a dummy series with a color set to the background color that you want, and set with values to fill the gap from the actual data.
Example:
http://jsfiddle.net/jlbriggs/Zf8C7/5/
[[edit for questions
The order of the series does not matter for this to work, and neither does the legendIndex.
What does matter, if you are using multiple series, is the stack property for each series - http://api.highcharts.com/highcharts#series.stack
Each group will need its own stack, and the dummy series and real series within each group need to be assigned to the same stack.
In addition, you need to have one overall max value.
Updated example:
http://jsfiddle.net/jlbriggs/4d9tm6b8/4/
(keep in mind, there are much smoother methods to process and build your data - this is a quick and dirty example whose purpose is to show how to properly use the stack property to do what you need)
]]
2) plotBands, as mentioned above
3) using the alternateGridColor property and set your data to skip an x axis
value between each point.
Reference:
- http://api.highcharts.com/highcharts#xAxis.alternateGridColor
I'm trying to create a data visualization in d3.js that contains two charts: a parallel-axis plot, and horizontal colorbar chart (I just made up that name, but it's basically a series of colored rectangles). Each line in the parallel-axis plot is associated with a set of rectangles in the colorbar chart.
Right now, mousing over a given line highlights that line, and mousing over a given rectangle highlights that set of rectangles. My goal is to also highlight the associated line or set of rectangles on the opposite chart anytime the user mouses over either chart. This seems like it would be pretty straightforward if I generated both charts with the same function. However, it would be much neater (and more reusable) coding style to give each chart its own function and just connect them somehow. I tried having each within-chart mouseover function call a function defined at a higher level that affected both charts, but this didn't seem to have any effect on the chart that wasn't moused-over. Since I still don't feel like I fully understand how d3.js works on an underlying level, I'd really like to have confirmation that this is a viable way to set up my code. My code is long and complicated, and I really just want advice on the structure, so here is the basic outline:
function chart1(){
make chart
function mouseover(d,i){
do stuff
chart1_globalmouseover(d,i);
}
chartElement.on("mouseover", function(d,i){mouseover(d,i)});
}
function chart2(){
make chart
function mouseover(d,i){
do stuff
chart2_globalmouseover(d,i);
}
chartElement.on("mouseover", function(d,i){mouseover(d,i)});
}
function chart1_globalmouseover(d,i){
do stuff in chart 2's mouseover function
}
function chart2_globalmouseover(d,i){
do stuff in chart 1's mouseover function
}
c1 = chart1();
c2 = chart2();
One way to link the two graphs independent of the code used to create them would be to assign IDs or classes to the elements you may want to select. That is, if graph 2 has an element with ID foo, then in a mouse handler for an element of graph 1, you could say d3.select("#foo").style("stroke", "red") for example. Similarly with classes.
This approach allows you to keep the code completely separate. Moreover, if you use classes, you can assign the same class to things you would want to highlight together (e.g. elements representing the same data). Then d3.selectAll(".class") would select and allow you to manipulate all of them. This would work for an arbitrary number of graphs, not just two -- what changes is simply the number of elements that will be selected.
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.