As explained in the title, I'm trying to use mouseout event on time line chart and I get an error message saying 'chart.getChartLayoutInterface is not a function'. I've been able to use the same event with the handler function with a combo chart.
Looking a the code, it seems that all chart inherits from google-chart.component.ts.
Or is there any restriction on some charts?
Anyway here is the code I have used.
TypeScript
`import { Component, OnInit } from '@angular/core';
import { ChartSelectEvent, ChartMouseOverEvent, ChartMouseOutEvent } from 'ng2-google-charts';
@component({
selector: 'app-mycomp',
templateUrl: './mycomp.component.html',
styleUrls: ['./mycomp.component.css']
})
export class MycompComponent implements OnInit {
TimeLineOptions = {
chartType:'Timeline',
dataTable:[
['Name', 'Percent', 'Start Date', 'End Date'],
['Christophe','5',new Date(2014, 2, 10), new Date(2014, 6, 20)],
['Maxime','25',new Date(2014, 2, 22), new Date(2014, 4, 20)],
['Nicolas','75',new Date(2014, 2, 14), new Date(2014, 5,2)],
['Henry','56',new Date(2014, 2, 31), new Date(2014, 3, 20)],
['Henry','55',new Date(2015, 2, 31), new Date(2015, 3, 20)],
],
options: { height: 300, colorByRowLabel: true,
colors: ['#cbb69d', '#603913', '#c69c6e'], }
};
comboChartData:any = {
chartType: 'ComboChart',
dataTable: [
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
],
options: {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line'}}
}
};
constructor() { }
ngOnInit() {
}
public mouseOver(event: ChartMouseOverEvent) {
console.log('ChartMouseOverEvent');
console.log('bb: ' + JSON.stringify(event.boundingBox));
console.log('pos: ' + JSON.stringify(event.position));
console.log('type: ' + JSON.stringify(event.columnType));
console.log('label: ' + JSON.stringify(event.columnLabel));
console.log('value: ' + JSON.stringify(event.value));
}
public mouseOut(event: ChartMouseOutEvent) {
console.log('ChartMouseOutEvent');
console.log('bb: ' + JSON.stringify(event.boundingBox));
console.log('pos: ' + JSON.stringify(event.position));
console.log('type: ' + JSON.stringify(event.columnType));
console.log('label: ' + JSON.stringify(event.columnLabel));
console.log('value: ' + JSON.stringify(event.value));
}
}
html<google-chart [data]="TimeLineOptions" (mouseOut)="mouseOut($event)">
<google-chart [data]="comboChartData" (mouseOut)="mouseOut($event)">`
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent