Search the Community

I tried to implement the gantt chart in angular 7, but it throws me an error saying "Unhandled Promise rejection: ChunkLoadError: Loading chunk 7 failed" and in UI it just displays "Loading data. Please wait". I implemented bar and pie charts and they are working fine. But I did the same way to implement the Gantt chart and it is failing. Please find my below code. Kindly assist me on this issue. app.component.html <mat-card style="margin: auto; margin-top: 2%; text-align: center; width: 80%;"> <fusioncharts width="700" height="400" type="gantt" dataFormat="json" [dataSource]="dataSource"></fusioncharts> </mat-card> app.component.ts import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent{ dataSource = { chart: { dateformat: "mm/dd/yyyy", caption: "Event Planning Process", theme: "fusion", canvasborderalpha: "40", ganttlinealpha: "50" }, tasks: { color: "#5D62B5", task: [ { start: "03/07/2018", end: "03/17/2018" }, { start: "03/14/2018", end: "03/28/2018" }, { start: "03/15/2018", end: "03/31/2018" }, { start: "04/02/2018", end: "04/12/2018" }, { start: "04/12/2018", end: "04/30/2018" }, { start: "04/20/2018", end: "05/06/2018" }, { start: "04/30/2018", end: "05/10/2018" }, { start: "04/30/2018", end: "05/25/2018" }, { start: "05/04/2018", end: "06/05/2018" } ] }, processes: { headertext: "Task", headeralign: "left", fontsize: "14", isbold: "0", align: "left", process: [ { label: "Define event goals" }, { label: "Source venue options" }, { label: "Finalize speaker reach out list" }, { label: "Compose sponsorship strategy" }, { label: "Reach out to sponsors" }, { label: "Create social media campaign" }, { label: "Reach out to blogs for backlinks" }, { label: "Optimize SEO ranking" }, { label: "Publish event lead up vlog series" } ] }, categories: [ { category: [ { start: "03/05/2018", end: "03/31/2018", label: "March" }, { start: "04/01/2018", end: "04/30/2018", label: "April" }, { start: "05/01/2018", end: "05/31/2018", label: "May" }, { start: "06/01/2018", end: "06/10/2018", label: "June" } ] }, { category: [ { start: "03/05/2018", end: "03/11/2018", label: "W 1" }, { start: "03/12/2018", end: "03/18/2018", label: "W 2" }, { start: "03/19/2018", end: "03/25/2018", label: "W 3" }, { start: "03/26/2018", end: "04/01/2018", label: "W 4" }, { start: "04/02/2018", end: "04/08/2018", label: "W 5" }, { start: "04/09/2018", end: "04/15/2018", label: "W 6" }, { start: "04/16/2018", end: "04/22/2018", label: "W 7" }, { start: "04/23/2018", end: "04/29/2018", label: "W 8" }, { start: "04/30/2018", end: "05/06/2018", label: "W 9" }, { start: "05/07/2018", end: "05/13/2018", label: "W 10" }, { start: "05/14/2018", end: "05/20/2018", label: "W 11" }, { start: "05/21/2018", end: "05/27/2018", label: "W 12" }, { start: "05/28/2018", end: "06/03/2018", label: "W 13" }, { start: "06/04/2018", end: "06/10/2018", label: "W 14" } ] } ] }; constructor(private http: HttpClient,private datePipe : DatePipe,private router: Router,private loginService:LoginService) { } } app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { MaterialModule } from './app.material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; // Import FusionCharts library and chart modules import { FusionChartsModule } from 'angular-fusioncharts'; import * as FusionCharts from 'fusioncharts'; import * as Charts from 'fusioncharts/fusioncharts.charts'; import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'; // Pass the fusioncharts library and chart modules Charts(FusionCharts); FusionTheme(FusionCharts); FusionChartsModule.fcRoot(FusionCharts); @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MaterialModule, FusionChartsModule, NgbModule, NgbModule.forRoot() ], exports:[ MaterialModule, FusionChartsModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Hello, i need information regarding following things 1. what is maximum number of processes/task can be added in chart so that it wont slow down the application. 2. export feature which is suitable for gantt chart , as export feature is taking snapshot of visible content only. like will show only left part of chart in case we have large scrolled data. please reply as soon as possible. Regards, Dashrath Degavat

hi there, is it possible for gantt chart to respond to mouse wheel scroll event, both x and y axes? i have done some research and it seems that xt 3.10.0 does not yet support it. would you please advise any workaround? many thanks