I am working on Highcharts highmaps rich information on click chart.First time load the information by json array and its working fine.But when I am filter data using filters and load chart again it`s give me same error array.prototype.foreach called on null or undefined highcharts at below lines.What is solution for this?
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var points = mapChart.getSelectedPoints();
Below link I am using as reference:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/rich-info/
I will answer this question in case someone else bumps into this problem in the future (even though I saw your problem is solved in github).
I encountered this issue with Highcharts when resizing the website (having 2 pie charts and one bar graph). I managed to solve it by wrapping the initialization of the graphs in a document.ready:
$(() => {
controller.initializePieHighChart();
controller.initializeBarHighChart();
});
Related
I added 2 series in chart with "addSeries". Set property navigator.adaptToUpdatedData to false. Then I update data for series with "setData", if user zooms chart, but navigator is updated. If I update only 1 serie all works right. How fix it?
Example:
<https://jsfiddle.net/zrxv30sh/1>
Y̶o̶u̶ ̶s̶h̶o̶u̶l̶d̶ ̶d̶e̶f̶i̶n̶e̶ ̶b̶o̶t̶h̶ ̶s̶e̶r̶i̶e̶s̶ ̶a̶s̶ ̶i̶n̶i̶t̶i̶a̶l̶s̶ ̶i̶n̶ ̶t̶h̶e̶ ̶n̶a̶v̶i̶g̶a̶t̶o̶r̶ ̶c̶o̶n̶f̶i̶g̶.̶
n̶a̶v̶i̶g̶a̶t̶o̶r̶:̶ ̶{̶
a̶d̶a̶p̶t̶T̶o̶U̶p̶d̶a̶t̶e̶d̶D̶a̶t̶a̶:̶ ̶f̶a̶l̶s̶e̶,̶
s̶e̶r̶i̶e̶s̶:̶ ̶[̶{̶
d̶a̶t̶a̶:̶ ̶d̶a̶t̶a̶
}̶,̶ ̶{̶
d̶a̶t̶a̶:̶ ̶d̶a̶t̶a̶2̶
}̶]̶
}̶,̶
D̶e̶m̶o̶:̶ ̶h̶t̶t̶p̶s̶:̶/̶/̶j̶s̶f̶i̶d̶d̶l̶e̶.̶n̶e̶t̶/̶B̶l̶a̶c̶k̶L̶a̶b̶e̶l̶/̶n̶v̶m̶r̶y̶z̶L̶g̶/̶
After dig deeper into I found that the problem is with this part of the code:
data.forEach(function(item){
data2.push([item[0],item[1]+50,item[2]+50,item[3]+50,item[4]+50])
})
chart.series[0].setData(data);
chart.series[1].setData(data2);
chart.hideLoading();
Because chart.series[1] is defined as a navigator series which means that this setData config updates the navigator series.
Changing to chart.series[2] fix the issue.
Demo: https://jsfiddle.net/BlackLabel/w3cfLmqt/
Consider the following toy example: jsfiddle
chart: {
events: {
render: myfunc
}
},
...
function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}
The intended behavior is to set the state of the first series as hover while setting all other series as inactive after load and redraw events.
The code works as intended after load
However, it doesn't work after redraw (via the select box). After selecting an option in the box, the series are rendered as normal instead of as inactive UNLESS any series had been previously hovered. That is, the code works if you interact with any series AND THEN select an option in the box, but it doesn't work if you select an option in the box immediately after the loading without interacting on the series.
Surprisingly, after some inspection in the console, I noted that in any case the intended states are properly passed to the series object. So, why the states are not properly rendered?
*NOTE: In my actual application the hovered series is not necessarily the first one, but it varies depending on the output of other function. I'm aware that "myfunc" could be simplified in the current example, but for general purposes please suggest an answer keeping the basic structure if possible.
This seems to be related to this issue from HighChart's GitHub. In your case, HighCharts is correctly updating the series' state. However, while rendering it fails to set the proper opacity value associated with the 'inactive' state. The workaround is to explicitly set the opacity of the series to the same value it should have in the 'inactive' state.
// F U N C T I O N S E T S T A T E
function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
//explicit opacity
s.opacity = 0.2;
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}
Thank you for sharing this issue, it seems that it is a regression after the last release.
In the previous version it used to work fine: https://jsfiddle.net/BlackLabel/Lbpvdwam/
<script src="https://code.highcharts.com/8.1.0/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.0/highcharts-more.js"></script>
I reported it on Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/13719
If you don't need any new features/bugfixes use the previous version as a temporary workaround.
I'm using ag-grid to render a table in my angular 7.2.1 app. The custom cell renderer is just to render an edit button in the rows that will redirect to a different page.
I've done this before in a different app on a different Angular version a while ago, but for some reason the same code in this Angular 7 app is resulting in this. I think I may be missing something really simple.
I've created a minimalist reproduction of the error I'm seeing in this stackblitz - https://stackblitz.com/edit/angular-v98mjs
If you click on the Edit button, you will see this error in the console.
ERROR Error: Cannot read property 'navigate' of undefined
ag-grid versions:-
I'm using the following version for ag-grid:-
"ag-grid-angular": "^20.2.0", "ag-grid-community": "^20.2.0",
Please look at the stackblitz code in the link above for the code.
You needed to define onEdit with Arrow Function
onEdit = (row): void => {
console.log('row is being edited', {row})
this.router.navigate(['/new-url', { id: row.incidentId }], {
relativeTo: this.route.parent
});
};
More example such thing: ag-grid server side infinite scrolling accessing props
Have a look at the updated plunk: https://stackblitz.com/edit/angular-oppxte
Without arrow function, inside onEdit function of AppComponent was not able to get reference of this.router, and hence, you were getting the error.
Cannot read property 'navigate' of undefined
I have also introduced RootComponent and NewComponent for better modularity in the example. Hope it will be clear with that.
I'm having trouble with highcharts downloading PNG image, I want to use my own button instead the highcharts one, reading the documentation I need to use "exportChart" function, but it removes data:
options:any = {
exporting: {
enabled: false
}
}
exportPNG():void{
this.chart.exportChart();
}
There is an "almost working" example it gives an error in app.module using "require" and another one when tyring to import from exporting, help in make the example work will be apreciate
https://stackblitz.com/edit/angular-dqck8n
When it's working, we can click in "download button" and downloads the chart, but if click again it returns an error because data is removed from chart.
I've realized it also happen using exporting library, you can check it download image file and trying to do zoom out.
The reason is saveInstance method - it is called on every chart's load. When exporting, a new temporary chart is created and then deleted so now your angular component has the reference to the removed exported chart - this.chart inside exportPNG() refers to the empty chart object.
You can check if load event is called for a normal chart and then save the chart's instance.
saveInstance(chartInstance): void {
if (!chartInstance.options.chart.forExport) this.chart = chartInstance;
}
live example: https://stackblitz.com/edit/angular-41tmjd?file=app/mychart.component.ts
Using latest HighStock/HighCharts we are creating charts with this syntax:
$('#container').highcharts({...
We then allow the user to do some manipulation of the chart series displayed. We added the ability for the user to reset the chart back to how it was originally. We are using this method:
function forceResetChart(chart) {
var opts = chart.options;
chart.destroy();
chart = new Highcharts.Chart(opts);
}
This does reset the chart and we are able to make changes again. However, we are keep getting errors thrown in the console:
TypeError: a.renderTo is undefined # .../JavaScript/HighStock/highstock.js:198
How can we still use the cleaner syntax ($('#container').highcharts({...) and not get this error thrown?
Example jsFiddle.
option 1) Just make sure you still specify "renderTo:'container'" in the chart properties.
Or, if you don't want to include in the initial chart code, add it to the options in your forceReset function.
option 2) in your forceReset function, use the same '$('#container').Highcharts...' syntax to call your chart, rather than switching back to the other syntax
example of option 2:
http://jsfiddle.net/5pa7N/8/
{{edit option 3:
set options variable up front.
call chart on page load using that variable.
reload chart using that variable
http://jsfiddle.net/eYmh9/