Skip to content

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

@Anilsurendar

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions