Hi I have a requirement where I have to move the handles of two highstock chart same time. So that if handle of any one of them is moved , then the handle for second chart gets re positioned accordingly.
JS fiddle is set up here Fiddle
Relevant code is something like
//callback function to set event
function(chart){
Highcharts.addEvent(chart.xAxis[0], 'setExtremes', function (e) {
var allRelatedChartsDiv = $("[data-identifier = '"+identifier+"']").not(chart);
$.each(allRelatedChartsDiv ,function(index,graphContainer){
var chartObj = $(graphContainer).highcharts();
chartObj.xAxis[0].setExtremes(parseFloat(e.min),parseFloat(e.max));
});
});
});
Suggestions ?
You can develop / adapt this example: http://jsfiddle.net/Gv7Tg/33/ which allows to synchronise charts by using setExtremes()
Related
I'm trying to show huge series of work breakdown structure data from an API into GanttChart so it increase page loading time and becomes unresponsive sometimes. I think one of the solutions could be get data in lazy mood. I googled it and found this link on GitHub:
https://github.com/highcharts/highcharts/issues/14232
unfortunately I'm new in HighCharts and JavaScript and it seems it doesn't works or maybe I can't figure out how it works. The ideal scenario would be fetch child tasks within a series every time the parent is expanded.
I would appreciate any ideas.
You can simply add a click event on label and labelIcon SVG elements:
chart: {
events: {
load: function() {
const chart = this;
const ticks = chart.yAxis[0].ticks;
for (let key in ticks) {
if (ticks[key].treeGrid.labelIcon) {
[ticks[key].label, ticks[key].treeGrid.labelIcon].forEach(
element => element.on('click', () => handleLabelClick(ticks[key]))
);
}
}
}
}
But unfortunately, the stairs begin next. Currently, Highcharts gantt charts dont't play well with dynamic data, mostly because of this reported bug. The only way for now, but not very optimal, seems to be creating a new chart with partial data on each expand action.
Live demo: https://jsfiddle.net/BlackLabel/c8whg3kv/
I'm trying to open highcharts on new browser windows so i'm doing something like this.
let chartWindow = window.open("", "_blank", "left=0,top=0,width=600,height=450");
let chartContainer = $("<div />", {
class: "chart-container"
});
$(chartWindow.document.body).append(chartContainer);
Highcharts.chart(chartContainer[0], chartOptions);
But if more than one window is open and if you try to zoom on other windows apart from the first one the click get stuck. Seems like some event is not firing properly. So if you try to select the chart to zoom it gets stuck and you have to go to the first chart that was opened and click there to fix it. I'm sure is because of opening the charts on new windows but i need to do it.
What could be the problem here?
Edit: code sample
This problem looks like a bug, so I reported it on Highcharts github: https://github.com/highcharts/highcharts/issues/9748
As a workaround you can edit Highcharts Pointer methods setDOMEvents:
if (!H.unbindDocumentMouseUp) {
H.unbindDocumentMouseUp = [];
}
H.unbindDocumentMouseUp.push(addEvent(
ownerDoc,
'mouseup',
pointer.onDocumentMouseUp
));
and destroy:
H.unbindDocumentMouseUp.forEach(function(unbind) {
unbind();
});
Live demo: http://jsfiddle.net/BlackLabel/cxz7hugp/
I'm struggling to understand why when you click on the chart the number in the middle does not get updated until the user moves their cursor after the chart has been clicked upon.
onClick: function(event, chart) {
var index = chart[0]._index;
var value = ~~percentages[index];
chart[0]._chart.config.options.elements.center.text = value;
},
https://jsfiddle.net/uL8L5ny9/
I've created a JS fiddle where you can see this happening.
From my experience this is a problem in Chrome and FF so far.
I am actually using NG2 charts on my project but the JS fiddle using just chart.js is doing the same thing.
I haven't found much on the internet about this issue.
Forgot to draw/update the chart on load. Using the chart.chart.update() fixes this.
I´m using the ng-highcharts with angularjs.
I have two ways of manipulating the Extremes in my chart:
1. When I´m in the chart selecting or using the navigator.
In the config-Object:
xAxis: {
events: {
setExtremes: function(e){
if(e.trigger) {
console.log(e.min);
}
}
}}
and 2nd (when i press a button and want to manipulate through a button):
var chart = Highcharts.charts[0];
chart.xAxis[0].setExtremes(start, end);
Now the problem is that The 2nd function is destroying the first one.
Means: The first one is working and giving me e.g. the min-value via e.min, but when calling the 2nd function and I want to trigger events in my chart again, the e.min is null (NaN).
Can someone help me, I need both possibilities.
I'm working with highcharts and amCharts, but I'm stuck in this little thing.
So, I have a drilldown piechart made with amCharts, like this one: http://jsfiddle.net/api/post/library/pure/
But I wanted another feature! After "drilling-down", I would like to select one particular combination and navigate to another page (where I would give some information to the user concerning such combination...)
So, click once in pie chart => go to subtypes. Click again in a subtype => go to a page of my choosing!
I've tried using this answer, but somehow it does not work with this drilling down feature!
// add click listener
chart.addListener("clickGraphItem", handleClick);
I'm a bit lost, is this because the drill down already uses a addListener? Can you give me a hand, please?
Here you go:
chart.addListener("clickSlice", function (event) {
// if dataItem.dataContext.id, this is the
// event before drillDown
if (event.dataItem.dataContext.id != undefined) {
selected = event.dataItem.dataContext.id;
}
else { // click event on subtypes after drilldown occurs
selected = undefined;
// PUT YOUR CODE HERE
}
chart.dataProvider = generateChartData();
chart.validateData();
});