CODEWITHSUNDEEP
javascriptangularchartsgoogle-visualization
ranaalisaeed
ranaalisaeed

Reputation: 353

How to add 'tooltip' to Timeline chart in angular-google-charts?

I'm trying to add tooltip to Timeline chart using angular-google-charts library in Angular 7 application. When I add a fifth column at index = 2, angular-google-charts throws as error saying "Expecting 4 columns not 5"

When I remove the tooltip column providing only 4 columns (Group, Row, Start, End) the Timeline visualisation works fine. However as soon as I add the Tooltip column it throws error saying expecting 4 columns but received 5.

component.ts

type: string = 'Timeline'
chartData: Array<Array<any>> = [
  ['Group1', 'Row1', 'Tooltip1', new Date(2019, 01, 01), new Date(2019, 02, 01)],
  ['Group2', 'Row2', 'Tooltip2', new Date(2019, 03, 01), new Date(2019, 04, 01)]
]
colNames: Array<any> = ["Group", "Row", "Tooltip", "Start", "End"] 
colRoles: Array<any> = [
  { role: 'tooltip', type: 'string', index: 2, p: {html: true} },
]
options: {} = { tooltip: {isHtml: true} }

component.html

<google-chart 
    [type]="type"
    [data]="chartData" 
    [options]="options" 
    [columnNames]="colNames"
    [roles]="colRoles">
</google-chart>

app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
...
imports: [
  GoogleChartsModule
],

I expect the tooltip to show the additional text I am putting in the column index 2. Please help me sort this out.

Upvotes: 2

Views: 2547

Answers (2)

Sof&#237;a
Sof&#237;a

Reputation: 904

This answer is based off @WhiteHat's answer. I added two tooltips instead of one and changed the variables' names to make them more explicit.

In the newer version of the angular-google-charts library, an import is needed to define the type:

import { ChartType } from 'angular-google-charts';

Then we have to define the type and the data. The number of elements in the chartData array must match the number of elements in the colNames Array or it will cause an error.

type3 =  ChartType.BarChart;

chartData3: Array<Array<any>> = [
  ['first bar', 10,  'Tooltip1', 100, 'Tooltip10'],
  ['second bar', 20,  'Tooltip2', 200, 'Tooltip20']
]

colNames3: Array<any> = [ // The column names appear in the legend
    "Group", 
    "First number",
    { role: 'tooltip', type: 'string', p: {html: true}}, 
    "Second number" ,  
    { role: 'tooltip', type: 'string', p: {html: true} }] 

options3: {} = { isStacked: true }

Then in the html:

<google-chart 
    [type]="type3"
    [data]="chartData3" 
    [options]="options3" 
    [columns]="colNames3">
</google-chart>

Upvotes: 0

WhiteHat
WhiteHat

Reputation: 61212

when not using angular, the roles are included with the column names.
I've never seen the roles added separately.

try adding the role within the column names, as follows... 

type: string = 'Timeline'
chartData: Array<Array<any>> = [
  ['Group1', 'Row1', 'Tooltip1', new Date(2019, 01, 01), new Date(2019, 02, 01)],
  ['Group2', 'Row2', 'Tooltip2', new Date(2019, 03, 01), new Date(2019, 04, 01)]
]
colNames: Array<any> = ["Group", "Row", { role: 'tooltip', type: 'string', p: {html: true} }, "Start", "End"] 
options: {} = { tooltip: {isHtml: true} }

and exclude the roles here... 

<google-chart 
    [type]="type"
    [data]="chartData" 
    [options]="options" 
    [columnNames]="colNames"
</google-chart>

Upvotes: 3

Related Questions