Dev Anand S

Unhandled Promise rejection: ChunkLoadError: Loading chunk 7 failed

Recommended Posts

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 { }

 

Share this post


Link to post
Share on other sites

Hi Dev,

 

You need to import the below JS files to render a Gantt chart in the module.ts file of your Angular application :

import * as FusionCharts from "fusioncharts";

import * as Widgets from "fusioncharts/fusioncharts.widgets.js";

import * as Gantt from "fusioncharts/fusioncharts.gantt.js";

 

For further reference, check this sample below rendering Gantt chart :

https://codesandbox.io/s/7z0o0r2jy6

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now