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.
Related
When a visual is selected (by mouse or keyboard), the Visualizations pane will highlight the visual type icon and list the things related to the selected visual.
How do I implement such functionality?
Checking each visual.isActive() in active page is not an option, because you don't know when to check, and the html element (used for embedding) click/change event is not propagated through.
Tried buttonClicked, dataSelected events, they are not right.
https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events
Is this supported or not?
Listening to the event of selection of visuals is not currently supported in Power BI Embedded. The objects on which the events are supported currently are reports, dashboards, and tiles.
However, you can get the visuals of specific page using this code.
report.on("loaded", function() {
report.getPages()
.then(function(pages) {
// Retrieve first page.
var firstPage = pages[0];
firstPage.getVisuals()
.then(function(visuals) {
console.log(visuals); // It will give you the list of visuals of the current page
})
})
});
You can also listen to the tileClicked event for the dashboards, as it will give you tile-specific information.
tile.on("tileClicked", function (event) {
Log.logText("Tile clicked event");
Log.log(event.detail);
});
Please refer : https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events
Using Chart.pluginService.register I drew a line on chart for some requirement on Page B (lets say). I go to Page B from Page A.
Now when I go back to page A and again go to Page B, the line drawn on the chart starts getting darker.
How to unregister that plugin when I go back to Page A?
I saw an unregister and clear function on this source: https://github.com/chartjs/Chart.js/blob/647dc582cd85fc8e25d49cf0e38d459c582b2652/src/core/core.plugin.js
Unregister function has no effect. Clear function clears the previously drawn line but the legend of the chart disappears.
Adding
ngOnDestroy() {
Chart.pluginService.unregister(this.horizonalLinePlugin);
}
in your ProductDetailComponent shoud do the trick.
https://stackblitz.com/edit/angular-uxfwqb?file=src/app/product-detail/product-detail.component.ts
The problem here is that if you have multiple chart components visible at the same time, the plugin will be visible in all the other charts.
The better fix:
register the plugin only once, outside of ngInit... directly in the module file or somewhere globally. This will impact all the charts in the entire application but will make it unnecessary to unregister it so it is clear that it's something global that impacts all charts.
create your own wrapper component/directive over chart.js (or a pull request for angular2-chartjs) that can accept a plugins input and pass it to the Chart constructor http://www.chartjs.org/docs/latest/developers/plugins.html:
var chart1 = new Chart(ctx, { plugins: [plugin] }); This will allow you to have a chart with the plugin and a chart without it, so no need to register/unregister global plugins.
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.
I'm using the google visualization line-charts, and I'm using the following events to detect when a point on the chart is hovered or not.
google.visualization.events.addListener(chart, 'onmouseover', function (rowColumn) {
alert("mouseOver");
});
google.visualization.events.addListener(chart, 'onmouseleave', function (rowColumn) {
alert("mouseLeave");
});
the first one works perfectly, but the second does nothing!
How can I enable it?
Thanks
The correct syntax is:
google.visualization.events.addListener(chart, 'onmouseout', function (rowColumn) {
alert("onmouseout");
});
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.