The first call to build the chart is fine, but subsequent calls to chart = am4core.create('chartdiv', am4charts.XYChart) cause the chart to stop responding to browser resize events.
I've forked an example from the amcharts website here:
https://codepen.io/anon/pen/QPVpYX
I have tested this on Chrome, Firefox and Edge with the same result.
The only way I've found that fixes this - as shown in the linked code - is the chart.dispose() method, but this call takes 30 seconds to complete on larger datasets and is therefore not viable!
if (chart) {
console.log('dispose start');
var d = new Date().getTime();
chart.dispose();
console.log('dispose end ' + (new Date().getTime() - d));
}
Related
I am using a Column chart from the Google Visualization API, and have set up a "click" event for when I click on one of my columns as so:
google.visualization.events.addListener(chart, 'select', function(event) {
if (!isWebview) {
log.logInfo("Selected Sum");
$("#reportBody").trigger("app:update", { toXYZ: true});
} else {
}
});
However, this fires 4 times every time that I select a bar in the chart. This also happens to be the amount of rows that I have in the chart - could this be connected?
Thanks in advance.
Answer:
I found the problem - there were two. Firstly, the html file for this js file loaded the same js code twice - once for ios and once for android, but on the browser loads both, thus adding the same event listeners twice.
Furthermore, both these ways of setting the onLoad callback were used:
google.charts.load('visualization', '1', {
'packages': ['corechart', 'table'],
'callback': drawAll
});
and
google.setOnLoadCallback(drawAll);
The latter of which is a deprecated version if I'm not mistaken.
Therefore, the drawAll function, which creates the event listener, ended up being called 4 times, so I had 4 event listeners for the same event, all executing the same code.
I want to have the android back button to close the app if the user is on one of the two main pages. Both pages can be navigated to with two tabs button, which are shown on those both pages. But on any other pages I want to keep normal stack pages behaviour.
I read about registerBackButtonAction and also got some information in this thread concerning Ionic 1.
I created a custom behaviour to close the app:
private registerSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(e){
this.platform.exitApp();
}.bind(this),101);
}
}
My idea is to call the registerSpecificActionOnBackButton() function in the ionViewWillEnter() function on the pages where this behaviour is needed.
But I don't manage to cancel that behaviour on the ionViewWillLeave() function with a deRegisterSpecificActionOnBackButton() function, I've tried among other things:
private deRegisterSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(e){return true},101);
}
}
Or
private deRegisterSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(event){event.unbind()},101);
}
}
But I happen to be stuck. Has anyone any idea about canceling a custom registerBackButtonAction?
I've managed to make this work as I expect: When the app is on one of the pages that can be reached thru the tabs menu, it closes when the back button is hitten (on Android).
First, forget about the registerBackButtonAction() for the moment because as quoting what is explained in this thread of 2016-08-05:
it suggests not trying to override the default back button behavior.
So I've looked for other solutions. I've found one that is not really clean but works.
To begin with, I looked if I could reset the stack with the NavControler using remove(startIndex, removeCount, opts). But that doesn't work out because the two main pages are embeded in the tab page (like it is shown there).
So when you're on one of those pages the NavController is a Tab and the parent of that is a Tabs.
In Tabs there is a Array variable named _selectHistory. The _selectHistory array seems to have a role similar to the stack. So when navigating from one page to another using the two tab buttons, one can see in a console.info(this.[NavControler var of the page].parent._selectHistory) that the array grows as the tab buttons are hitten alternatively. And when trying on a real device, the back button take you back switching from one page to another until the array is empty and then the next back button hit closes the app.
Hence I thought: Let see what happens if I override the value of that array. It cannot be done thru a function to apply on a Tabs object (unlike what is possible with NavController).
So in the Page concerning my pages embedded in the Tab page, I added the following in ionViewWillEnter():
ionViewWillEnter(){
this.navCtrl.parent._selectHistory=[];
}
This.navCtrl is my NavController object passed in the constructor of the page.
That's it.
According to most Famo.us tutorials, you only need to add the following line to make Fastclick work (Famo.us university Timbre project)
var FastClick = require('famous/inputs/FastClick');
However, I have found that that alone doesn't kill the 300ms delay in an iPhone 5. Is there any additional configuration to be done? I included the FastClick line for the following code:
this.accordionSurface.on('click', function() {
this._eventOutput.emit('editItem', this.model);
}.bind(this));
This is part of a AccordionView that is then added to a Scrollview through a ViewSequence (copied from the Taasky demo at https://launch-demos.famo.us/Taasky/). However, unlike the demo, tapping on my items takes some time to react. The animation done after tapping on my item looks like this:
AccordionView.prototype.hide = function(scrollView) {
this.accordionModifier.setOpacity(
0,{ duration : 100, curve: 'easeInOut' },function(){
this.size.set(0.001, {duration: 300, curve: 'easeOut'}, function(){
}.bind(this));
}.bind(this));
}
The animation works fine and smooth, but it's triggered with a bit of delay that I assume comes from the lack of the FastClick integration. I had moved the require line around the AppView, main.js without result and I have yet to find an example that does anything else that calling FastClick with the require line.
Any hints?
It's not exactly a fix but we've noticed that the 'touchend' event (or 'end' event in a GenericSync) fires reliably and could be used as an alternative to click with a bit of tinkering.
So I've got a GDK activity which loads a CardScrollView, it's working fine. However this list can be very long so I'm paginating in the JSON, so only the first 20 or so items are returned. What I'm trying to do is so when the user gets to the end of the list, they "overpull" and see more items show up. Loading the initial list works fine:
mAdapter = new CardCursorScrollAdapter();
mCardScrollView = (CardScrollView)rootLayout.findViewById(R.id.card_scroll_view);
mCardScrollView.setAdapter(mAdapter);
LoaderManager loaderManager = getLoaderManager();
loaderManager.initLoader(LOADER_ID, null, mCallbacks);
However I haven't been able to solve two problems: first, how to detect the over-pull, and second, how to update the CardScrollView with my additional data.
You can add a Card at the end of your dataset with a loading Text. When you reach this card (you can detect it with the OnItemSelectedListener) call the loader to load the next page. When the loading is finished, call the notifyDataSetChanged of your adapter to refresh the scrollview.
hope this will help.
Titanium SDK version: 1.6.2 (tried with 1.7 too)
iPhone SDK version: 4.2
I am developing an iPhone app and I am fetching data from my API and presenting it in a table. In this table I got a button on each row that should allow the user to add that person to his or her contacts. The only problem with the code (I think) is that only the last button responds when being clicked. Nothing happens when I click the other buttons.
This is my code: http://pastie.org/1932098
What is wrong?
You are adding the button.addEventListener outside of the for statement, and since you are overwriting the button var with each iteration, the eventListener only attaches to the last button created.
This probably isn't the best way to work this, but to fix your problem, move the button.addEventListener inside the for statement, and then check for a unique identifier in the object that gets sent to the event. Example:
for (x=0;x<5;x++) {
var button = Titanium.UI.createButton({
height:40,
width:100,
top:50*x,
id:x
});
var label = Titanium.UI.createLabel({
text:'LABEL '+x
});
button.add(label);
win1.add(button);
button.addEventListener('click', function(e){
Ti.API.info('Button clicked '+e.source.id);
});
}
The button.id property is just made up, but now you can see which button sends the event. You could also use title, or anything else that is unique.
Other options to look at are creating unique variable names for each button, but that's probably more work. Also, instead of working with putting a button in the table row, use a label or image, then listen for the event generated by the table or row.