Timline chart is not loading (Invalid visualization type: timeline)

[Anilsurendar]

Hi,

First of all, thanks for the wonderful directive. I'm using your directive in my project, which made my work very easier.

But, I'm facing issue with TimeLine chart.

In Html template:

<h2>  Timeline Chart</h2>
<div id="timeLine_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="timeline_ChartData" [chartOptions] = "timeline_ChartOptions" chartType="timeline" GoogleChart></div>

In component: public timeline_ChartData = { cols: [ {type: 'string', id: 'Executor'}, {type: 'string', id: 'Name'}, {type: 'string', id: 'Tooltip', role: 'tooltip', p: {html: true}}, {type: 'date', id: 'start_date'}, {type: 'date', id: 'finish_date'}, ], rows: [ {c:[{v: 'A'}, {v: 'John'}, {v: 'John Doe'}, {v: new Date(2016, 7, 31)}, {v: new Date(2016, 8, 1)}]}, {c:[{v: 'A'}, {v: 'Jane'}, {v: 'Jane Doe'}, {v: new Date(2016, 7, 27)}, {v: new Date(2016, 7, 31)}]}, {c:[{v: 'B'}, {v: 'John'}, {v: 'John Doe'}, {v: new Date(2016, 7, 30)}, {v: new Date(2016, 8, 1)}]}, {c:[{v: 'B'}, {v: 'Jane'}, {v: 'Jane Doe'}, {v: new Date(2016, 7, 29)}, {v: new Date(2016, 8, 5)}]}, {c:[{v: 'C'}, {v: 'John'}, {v: 'John Doe'}, {v: new Date(2016, 7, 25)}, {v: new Date(2016, 7, 29)}]}, {c:[{v: 'C'}, {v: 'Jane'}, {v: 'Jane Doe'}, {v: new Date(2016, 7, 27)}, {v: new Date(2016, 8, 1)}]}, {c:[{v: 'C'}, {v: 'Fred'}, {v: 'Fred Doe'}, {v: new Date(2016, 7, 21)}, {v: new Date(2016, 7, 26)}]} ] };

public timeline_ChartOptions ={
    timeline: { colorByRowLabel: true },
    backgroundColor: '#ffd',
    tooltip: {isHtml: true},
    width: '100%',
    height: '600px',
    chartArea: {
    width: '80%',
    height: '80%'
    },
    colors: ['red', 'blue', 'green'],
    avoidOverlappingGridLines: true
    };

In Directive: Added timeline like

ngOnChanges() { if (!googleLoaded) { googleLoaded = true; google.charts.load('current', {'packages': ['timeline','corechart', 'gauge']['orgchart']}); } setTimeout(() => this.drawGraph(this.chartOptions, this.chartType, this.chartData, this._element), this.loadingDelay); }

After adding all this in your example, getting "Invalid visualization type: timeline" error, I'm stuck with this, if possible could you please take a look and help me on this.

Thanks, AnilSurendar