I try to draw some lines (paths) into a Highcharts-Chart. When exporting the chart, the lines should be a little different. Therefore I created a Highcharts-Function, which I call on »load« and »redraw«. I just need to pass one little argument when calling the function, but this doesn´t work. How can I pass the argument?
Here´s the relevant code detail:
Highcharts.linien = function (r) { //generating the lines with my r-argument }
...
chart: {
events: {
load: Highcharts.linien(0)
}
exporting: {
chartOptions: {
chart: {
events: {
load: Highcharts.linien(15)
}
}
}
And here´s a working jsFiddle without using the argument.
Besides: If anyone has a clue, how to destroy my svg-group (linienGruppe) on »redraw«, I would also be very grateful!
There should be:
chart: {
events: {
load: function(){
Highcharts.linien.call(this, 0);
}
}
}
exporting: {
chartOptions: {
chart: {
events: {
load: function(){
Highcharts.linien.call(this, 15);
}
}
}
}
}
So, using call() you can pass on this object to your function.
And regarding destroying group, first store somewhere your group, so later you can destroy that object, like this:
if(this.linienGruppe) {
this.linienGruppe.destroy();
}
this.linienGruppe = linienGruppe;
And working demo: http://jsfiddle.net/t3ywb3gq/4/
Highcharts.linien(0) & Highcharts.linien(15) are both function executions/invocations and not handlers. A handler is a function itself. Since you want to pass a parameter, I suggest you create an inline anonymous function with one line that calls your created method with appropriate arguments like below;
chart: {
events: {
load: function(){
Highcharts.linien(0);
}
}
exporting: {
chartOptions: {
chart: {
events: {
load: function(){
Highcharts.linien(15);
}
}
}
}
updated jsFiddle
Related
I'm am using module js syntax and I have some code like this:
var myModule = {
settings: {
myage: 25
},
init: function() {
//init code here
},
someFunction1: function(param1) {
//function code here
},
someFunction2: function() {
myModule.someFunction1(myparam);
}
}
The above will work fine but if I tried:
someFunction2: function() {
this.someFunction1(myparam);
}
It will not find the function.
Can't I use this.someFunction1... ?
this is who called the function.
myModule.someFunction2() will have this=myModule
someFunction2 = myModule.someFunction2; someFunction2() will have this=window
(you didn't show how you're calling it though)
I know highcharts makes it possible to update a legend by using the following function:
chart.legend.allItems[0].update({name:'aaa'});
Also the possibility to hide or show the legends on export are working.
exporting:{
chartOptions:{
legend:{
enabled:true
}
}
}
But now, I like to rename a specific legend during export. Is there any way to bind the update code to the export-function in Highcharts?
Update series in the chart.events.load event, for example:
exporting: {
chartOptions: {
chart: {
events: {
load: function (e) {
this.series[0].update({ name: "New name." });
}
}
}
}
}
I have an highchart and I create an export generated picture with the export function.
How can I make is so that the legend of the hidden series are not shown at all (I donøt want them greyed out) in the export?
I've tried this but it hides only the text, the symbol is still there.
exporting: { //the export button
type: 'image/jpeg',
chartOptions: {
legend: {
enabled: true,
itemHiddenStyle: {
display: 'none',
}
}
}
},...
I have also seen this answer: Filtering legend of a Highcharts by only visible series
but I need it done ONLY in export. That will remove it from the screen too.
In your case you will have empty item, better is using load event and destroy series which are not visible.
exporting: { //the export button
type: 'image/jpeg',
chartOptions: {
chart: {
events: {
load: function () {
var chart = this;
$.each(chart.series,function(i,serie) {
if(!serie.visible) {
serie.update({
showInLegend:false
});
}
});
}
}
}
}
},
See the example: http://jsfiddle.net/DMJf5/3/
I created a custom component with an XTemplate like this:
initComponent: function () {
this.initLayout();
this.callParent();
},
initLayout: function() {
var me = this;
var mainTpl = this.getTemplate();
Ext.apply(me, { html: mainTpl.apply() });
},
in my template i got some placeholders where i want to render some textfields...
so i tried to accomplish this in an eventhandler like that:
listeners: {
render: function () {
var usrPlaceHolder = Ext.query('li.LoginUsername');
if (usrPlaceHolder) {
Ext.create('Ext.form.field.Text', {
renderTo: usrPlaceHolder
});
}
}
}
my Ext.query function does find the correct DOM Element, though the Ext.create with the renderTo config does throw the following Error:
Uncaught TypeError: Cannot call method 'createRange' of undefined
if you need any further information like a callstack or something.. dont hesitate to ask..
Ext.query returns an array, which is probably not what renderTo is expecting.
Use Ext.dom.Query.selectNode instead, or Ext.query('li.LoginUsername')[0], or anything that will give you a single element.
Ive just started to explore sencha. Stuck up with this. Help Appreciated :)
This is my java script code, in the below line handler function i am calling the following the method, which in under items and parent xtype form-panel.
{
xtype:'panel',
defaults:{
xtype:'button',
style:'margin: 0.1em',
flex:1
},
layout:{
type:'hbox',
align:'center'
},
items:[
{
text:'Submit',
handler:this.makeReq,
scope:this
},
{
text:'Terms & Conditions',
}
]
}
This is the method that am calling in the above function, but it seems does not happen anyting.
makeReq: function() {
alert("Hey There");
}
I really suggest you follow the Sencha Touch 2 MVC model in this case. You can give your button an action like this:
{
text:'Submit',
action: 'submit'
}
Then you can refer this button and set the function for it inside your app's controller:
config: {
refs: {
submitButton: 'button[action=submit]',
},
control: {
submitButton: {
tap: 'makeReq'
},
},
makeReq: function() {
alert("Hey There");
}
}