Synchronizing multiple StackBarchart (Highcharts) on a page - javascript

I have multiple stack bar Chart on a page, which could have different series. If I hover over a stack in chart, I want this hover to be synced on other charts as well (showing the tooltip at the hovered name of stack, showing hover effect).
The problem is in the below example, the tooltip always shows the opposite stack series name.
For my case if I hover over installation in first stack bar chart it is showing tooltip for installation in first chart but in second chart it is showing tooltip for others.
How I can make sure if I hover over installation in first chart then tooltip of installation for that particular stack in second chart should be displayed.
Attached JSFiddle for same in the comments
Thanks

It always reaches the second (last series) and in it changes the state to hover. To fix this you need to check if the series of the point we have the hover on compare with the series of the point we are checking in the loops.
function sharedMouseOver() {
let currentX = this.x;
let currentSeries = this.series.index;
charts = Highcharts.charts;
charts.forEach(function(chart, index) {
chart.series.forEach(function(series, seriesIndex) {
series.points.forEach(function(point, pointsIndex) {
if (point.x == currentX && point.series.index == currentSeries) {
chart.tooltip.refresh(point)
point.series.setState('hover');
}
})
});
});
}
Demo: https://jsfiddle.net/BlackLabel/kfL5087x/1/

Related

Highcharts Sunburst custom legend and click functionality

Sunburst custom legend and click functionality
I have a big set of data on sunburst and I want to show level 2 as legend on the right. Since I know the values, I made a custom legend with all level 2 data made it as links. But I'm not getting the color codes for all levels.
I used var colors = Highcharts.getOptions().colors;
But I'm getting only a few color codes.
How to get full color codes used in the graph as it is ?
And when I click on that legend, I want to show only that level and its sub levels in the graph. (the same default functionality that is available in the graph). How can I do this ?
Please help
I added a color variable into your code:
const color = i >= colors.length ? colors[i - colors.length] : colors[i];
Demo: http://jsfiddle.net/BlackLabel/qb7ckxwn/
Here is an approach how to trigger the drill down in the sunburst on the outstanding element:
document.getElementById('btn').addEventListener('click', function(){
chart.series[0].points.forEach(d => {
if (d.name === 'Asia') {
chart.series[0].setRootNode(d.id, true, { trigger: 'click' })
}
})
})
Demo: https://jsfiddle.net/BlackLabel/t7pghmxd/

How to highlight cells and yaxis ticks on highcharts heatmap hover

I have a large heatmap, and because it's so large, I'm trying to highlight the cell when someone mouses over it, and I'd also like to highlight the y-axis tick as a time reference because of the large width of the chart. I've seen some examples of this, but my heatmap is not responding with hover effects.
I've used this example to highlight the cells red, but it's not working. http://jsfiddle.net/937twae7/ I've also researched this method for highlighting tick values, but it's probably not working for similar reasons. https://jsfiddle.net/sjapdya6/1/
In the "series" section of code, I've done this:
...
states: {
hover: {
color: 'red'
}
}
...
Here's my chart: https://jsfiddle.net/civilsurfer/Lhysx2vg/1/
Nothing happens as I hover on the cells.
Thanks for any assistance.
You used the boost module which increases performance, but causes some limitations - for example, the inability to change color in states.
To highlight an axis label you need to adjust the findTick function:
function findTick(point, ticks) {
for (var tickValue in ticks) {
if (tickValue == point.y) {
return ticks[tickValue]
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/agcper18/
Docs: https://www.highcharts.com/docs/advanced-chart-features/boost-module

Hide x-axis labels but show tooltips in chart.js

I found many answers how to hide every nth label and yet still be able to show it in the tooltip. But there's a catch. If the label is very long, then the chart would be drawn somehow squished to the top of the canvas. It's logical. But is there any way to hide the labels, still show them in the tooltips and yet ignore them while calculating the y-values? So that the line can be drawn from top to bottom of the canvas?
Thank you for any advice!!
You can extend the line chart to do this. Adapted from Hide labels on x-axis ChartJS (which was for bar charts) with some unneeded code removed.
What we do is pretty simple, we first set the labels array to blanks, allow the initialization to happen and finally loop through the points for the (first) dataset and set the labels to the original labels.
Chart.types.Line.extend({
name: "LineAlt",
initialize: function(data){
var originalLabels = data.labels;
data.labels = data.labels.map(function() { return '' });
Chart.types.Line.prototype.initialize.apply(this, arguments);
this.datasets[0].points.forEach(function(bar, i) {
bar.label = originalLabels[i];
});
}
});
It's enough that you set the labels for the first dataset even if you have multiple datasets - when building a multiTooltip, the label is picked from the first dataset.
Fiddle - http://jsfiddle.net/xjchy2dn/

How to fasten the d3 zoomable sunburst transitions?

I have created a zoomable sunburst with the reference from the following website. http://bl.ocks.org/mbostock/4348373
The problem is I have a lot of arcs in the final level i.e the outermost ring (nearly 2000 arcs) and this is slowing the sunburst transitions on click.
One way through which I am trying to fasten the process is show the outermost arcs only when the user dives into the sunburst (clicks on any of the sub arcs). If the outermost arc is fourth concentric circle. Show that only when user selects levels 2/3.
I created the initial dataset to have size set to 0 for the outermost arcs. And on click I wrote a function to set the size to 1. However it is not working. Below is the link http://jsfiddle.net/Claw_22/1400rdu0/6/
function sizeFunc(data){
if (!data.children) {
if (data.level=="3") {
data.size="1";
}
}
else {
for (i=0;i<data.children.length;i++) {
sizeFunc(data.children[i]);
}
}
}
Kindly let me know how we can achieve this. (Alternate solutions to achieve faster performance are also helpful.)
You can change the transition duration to a min level in click function. Something like following
function click(d) {
path.transition()
.duration(100) //sets the delay in transition
.attrTween("d", arcTween(d));}

How do I make the closest four points on a graph glow?

As my cursor moves, I grab the two closest points IF it is not already on a plotted point.
I want to be able to make these two closest points light up (i.e. change colour to something orange or something), and then go back to normal once the cursor leaves the scope of the graph. How do I go about implementing this?
placeholder.bind("plothover", function (event, pos, item) {
if (item){
local_x = item.datapoint[0].toFixed(2);
local_y = item.datapoint[1].toFixed(2);
if (!updateLegendTimeout){
updateLegendTimeout = setTimeout(updateLegend(local_x,local_y), 1000);
updateLegendTimeout = null;
}
}
else{
var closest_points_container = interpolate(plot,pos.x,pos.y);
//Code to make points glow goes here, they are contained in closest_points[0]
and closest_points[1].
}
Flot provides highlight and unhighlight methods on the plot object, as described in the Plot Methods section of the docs. Unfortunately that has the restriction that only one point may be highlighted at a time. That is baked-in; you can't change it without altering the source.
The work-around I would use is to add a second series showing only points, no lines, and set the point style to appear as a highlight, i.e. with translucency. This highlight series will start out empty; then when you want to highlight a point on your main series you can copy it to the highlight series and redraw.

Categories