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");
});
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'm using the latest version of Chart.js and am trying to make the line chart fit run right up to the edge of the containing div but when I enable the yAxes ticks it adds a small padding to the right or in other words pushes the graph to the left.
How can I have tick labels and also have the chart extend to the edges of the <canvas />?
See screenshots:
You should be able to resolve some things like that by using the different callback hooks that are available in the update process.
Testing things out on my own, I was able get it to fix that gap by setting the right padding on the axis to 0 in the afterFit method, which based on the docs is:
Callback that runs after the scale fits to the canvas
const options = {
scales: {
xAxes: [{
afterFit: (axis) => {
axis.paddingRight = 0;
}
}]
}
}
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.
I have a data source containing multiple series of data (not known upfront).
I want to add a LineSeries to a qml ChartView, so I tried to 'hook' the C++ side to the qml like so:
// data source
...
Q_PROPERTY(QtCharts::QChartView *chart READ chart WRITE setChart NOTIFY chartChanged)
public slots:
void setChart(QtCharts::QChartView *newChart) {
qDebug() << "received new chart to draw on:" << newChart;
}
And in the qml, I send the chart to C++ more or less like:
...
ChartView { id: chart
...
}
Component.onCompleted: { backend.setChart(chart) }
Now the setChart is called allright, but the type does not appear to match: the incoming chart pointer is null:
> received new chart to draw on: QWidget(0x0)
Relaxing the input type to plain QObject* has shown me that the actual type of the incoming object is QtQuick::DeclarativeChart.
How should I send the chart item to my C++ model? (Or should I use a totally different approach?)
If you need to update chart axis and series you should send them into c++ and update them i wrote an example you can take a look i think it dose what you want .
On this example i converted c++ voice example from QWidget charts to QML chart but info in series are updating in c++ :
QML chart updating in c++ Example
I ran into a similar problem (I needed access to the chart in C++ to hide some markers on the chart legend).
I was able to get access to the chart by passing a pointer to an existing series on the chart to my C++ code.
void GraphHelper::hideLegends(QtCharts::QScatterSeries *series) {
QtCharts::QChart *chart = series->chart();
// do something with the chart...
}
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.