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/
Related
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
I'm trying to get SVG of two charts on the page.
I've added a button, and onclick of this I'm adding
var svg = $('#container1').highcharts().getSVG();
var svg1 = $('#container2').highcharts().getSVG();
I'm able to get the first svg but for second one I'm getting error
'Cannot read property 'getSVG' of undefined'. I'm unable to understand how getSVG() has worked for the first time and is throwing error the second time
I would like to know how to update a row/col and or layout from an external js file on webix. Let's say I have a menu at the left of the screen (col[]) and want to update the right column based on a menu selection. If the menu is composed by
Customers
Orders
Products
And want to update the right column based on the selection calling customers.js, orders.js and products.js
Just like http://webix.com/demos/admin-app/#!/app/orders
That example is very advanced for me, I would like to learn some basic method.
Thanks
Oscar P
You can use webix.ui command or addView API to add a new UI to some specific place on the page.
webix.ajax("config.json", function(text){
$$("layout").addView( JSON.parse(text) );
})
or
webix.ajax("config.json", function(text){
webix.ui( JSON.parse(text), $$("cell_to_replace"));
})
Aquatic,
I also found out an example with .showBatch() API but the console shows "Uncaught TypeError: $$(...).addView is not a function" on both functions, are those part of PRO version? what is wrong?
My code is:
$$("workArea").addView("clientes");
or
$$("workArea").showBatch("batClientes");
on:{
onMenuItemClick:function(id) {
$$("workArea").addView(id);
}
}