I want to implement HighChart in Drilldown mode which would transition from Column chart to Pie Chart on Double click of the column (double tap in case of mobile).
I am able to modify the drilldown demo provided by Highchart to display content & transition between Column & Pie charts on Single Click.
The running example can be seen at Demo Link.
I have tried the following two ways to perform chart transition on double click. In plotOptions.series.point.events.click, a double click is identified if the two clicks fall within the gap of 500ms.
1) this.series.data[0].firePointEvent('click');
This click is being triggered for first chart, but Pie Chart is not shown on click.
2)
this.drilldown= {series: drilldownSeries};
$('.highcharts-drilldown').onclick()
or any dom event, with
chart.drilldown: { series: drilldownSeries}
removed
The drilldown element is appended to primary chart on the first click (at runtime). So the event handlers of the drilldown chart are not linked & hence can't be triggered. (Please correct me if I am wrong.) Trial Code
Any help is appreciated.
If the above approach is a dead end, alternatively, I will try async mode of Dynamic Drill Down in Highcharts.
I advice to familiar with the custom events plugin which allows to catch double click on point. Then only what you need is destroy chart and create new one or update series.
Related
I am using chartjs to render Line charts.
To display a tooltip, I'm creating a custom tooltip as per the docs: https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips
On hover, I can see the tooltip for a point as expected.
Now the requirement is:
1. Always show a fixed tooltip on a certain datapoint.
2. When the user hovers over some other data-point, the tooltip for this point should be shown while still showing the fixed tooltip defined in (1)
Is there a way to achieve this in Chartjs? (If not through its API, is there a non-conventional way?)
Is it possible with AnyChart, to update the line chart depending on the click made on the sunburst chart ?
Here is an example of what I'd would like to achieve with anyChart, but made here with d3.js (sunburst take time to load)
Yes, it's possible. You should create a chart listener on mouse over and inside the event handler update the second chart. In the comment below you can find a sample which describes how to achieve that. Try to hover with a cursor 'HR' and 'Sales' points, you will how the second chart updates its data.
I'm wondering whether there is some high level way of having more than one brush on a graph. Here's the problem:
I have a stacked bar chart where each bar represents one weekday and different metrics are stacked on top of one another (stacked line charts are not available yet as far as I know). Now I would like to let the user select the days to display (and the selection should propagate into the other graphs). Everything works great with the brush on, but if you want to choose Sunday, which is at the end of the graph, and Monday which is at the beginning, you can't do that using a single brush. Anybody knows of a way to add more brushes?
Alternatively I'm looking for a way to add a click event listener that would "activate" the day you click on in a similar way like a ring chart section would work.
Thanks a lot for your ideas,
Renra
You could try using an ordinal x axis instead of a linear one. The default behavior for ordinal bar charts is to click to select/deselect bars instead of range selection.
That's chart.x(d3.scale.ordinal()).xUnits(dc.units.ordinal). If you are using dc 1.7.1 of earlier, you may have to specify the domain by d3.scale.ordinal().domain([’Monday',...])
I have 2 basic line graphs on a page that share the same X axis. What I am trying to accomplish is syncing these graphs up so that when hovering over a point on one graph, the same hover event is triggered on the second graph.
So far I have figured out how to listen into the event via:
chart.lines.dispatch.on('elementMouseover.tooltip', function(e) {
// Need to trigger same event on the xAxis of a separate graph
});
digging thru the nvd3 and d3 source code hasn't brought any revelation onto how to accomplish this so far.
Something like this should work I guess.
chart1.lines.dispatch.on('customEvent', chart2.lines.dispatch.customEvent);
I'm outputting a line graph to my page using the Highcharts API and applying the following methods to it:
zoomType: 'x',
event.preventDefault(),
alert(event.xAxis.min) & alert(event.xAxis.max)
This gives the user the ability to highlight a portion of the chart, and have it output the start time and the end time they highlighted without zooming in.
This works great but now I need to literally highlight that section of the graph the user selected. I've been having a look at the xAxis.plotBands method detailed here:
http://api.highcharts.com/highcharts#xAxis.plotBands
xAxis.plotBands allows me to hard code a highlight into the chart but I'm trying to figure out if it's possible to apply plot bands on the fly. It's important that the chart doesn't reset because the user can dynamically add series to the chart as well, so if it resets, the user loses all the series they added. Anyone know if it's possible?
Yes, this can be done with xAxis[i].addPlotBand().