Our state of the art Gantt chart


Post by kenken9301680 »

Hello friends,

Currently I have an issue that gantt chart cannot be displayed on android, we still can display gantt chart on ios. Previously, the gantt chart was still displayed normally on Android, but not recently. On Android only the header is displayed, the bottom part is white. The ios is still displayed normally, so it is not due to data error.

I don't know if you guys have any updates on the library?
Below are images displayed on ios and android.

Attachments
gantt-ios.png
gantt-ios.png (97.89 KiB) Viewed 800 times
gantt-android.png
gantt-android.png (53.5 KiB) Viewed 800 times

Post by mats »

Please provide info about Chrome version used by the android device. We don't support too old versions of Chrome which are often found in low-end / old android devices. Also please see if there's any error message on the console if you hook it up to a debugger.


Post by kenken9301680 »

We are embedding webview in react native source to build android and ios.

 <WebView
            ref={webViewRef}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            renderLoading={components.renderLoadingView}
            startInLoadingState
            onLoadEnd={onLoadEnd}
            onMessage={onMessage}
            source={{
              uri: 'https://10.17.13.77:4200/',
            }}
          />

They still run on normal iOS, I have used chrome on new android as well.

On the web console is returning an error as shown below, I don't know if it's caused an error on Android, but on ios it still displays normally.

Attachments
0909090909.png
0909090909.png (295.78 KiB) Viewed 793 times

Post by mats »

Error sounds like an app error, maybe you have a cached version? This error means you gave no URL to the Gantt's project#transport


Post by kenken9301680 »

So let me ask, does this error affect the display of errors when embedding webview angular in react native, and why on ios it displays correctly and android is the error like the picture I put above?


Post by mats »

No clue actually, the error is clear though - there's no URL provided so it sounds like something is not configured correctly. Try adding console logs in your app code to ensure you configure the Gantt correctly.


Post by kenken9301680 »

In the config.ts file I am leaving, where should I put the url, because I have taskStore, my component side can update the data again when calling api

const project = new ProjectModel({
  taskModelClass: (MyModel as unknown) as TaskModel,
  taskStore: {
    data: [
      {
        id: 0,
        name: "Task 1",
        manuallyScheduled: true,
        type: 1,
        taskId: 1,
        reportId: "5",
        confirmFlag: true,
        startDate: "2021-03-24",
        endDate: "2021-03-24",
        duration: 1,
        color: "#1882CD",
        isInChargeTask: true,
        isTaskAddtional: false
      },
      {
        id: 1,
        name: "Task 2",
        manuallyScheduled: true,
        type: 2,
        taskId: 1,
        reportId: "9",
        confirmFlag: true,
        startDate: "2021-03-26",
        endDate: "2021-03-28",
        duration: 3,
        color: "#1882CD",
        isInChargeTask: true,
        isTaskAddtional: true
      },
      {
        id: 2,
        name: "Task 3",
        manuallyScheduled: true,
        type: 1,
        taskId: 1,
        reportId: "5",
        confirmFlag: true,
        startDate: "2021-03-21",
        endDate: "2021-03-22",
        duration: 2,
        color: "#1882CD",
        isInChargeTask: true,
        isTaskAddtional: false
      },
      {
        id: 3,
        name: "Task 4",
        manuallyScheduled: true,
        type: 1,
        taskId: 1,
        reportId: "5",
        confirmFlag: true,
        startDate: "2021-03-21",
        endDate: "2021-03-22",
        duration: 2,
        color: "#1882CD",
        isInChargeTask: true,
        isTaskAddtional: false
      },
      {
        id: 4,
        name: "Task 5",
        manuallyScheduled: true,
        type: 1,
        taskId: 1,
        reportId: "5",
        confirmFlag: true,
        startDate: "2021-03-21",
        endDate: "2021-03-22",
        duration: 2,
        color: "#1882CD",
        isInChargeTask: true,
        isTaskAddtional: false
      },
    ],
    autoLoad: true,
  },
});

file component :

 updateDataChart(gantt: GanttComponent, data) {
    if (gantt && gantt.ganttInstance) {
      gantt.ganttInstance.project.taskStore.data = data;
 
}
  }

Post by mats »

Remove

autoLoad : true 

Post by kenken9301680 »

I took my old source code that I previously ran with no errors, but now I have not fixed anything but now it is faulty. I'm sure something has changed in your library. Right now I'm running on the web too.

const project = new ProjectModel({
  taskModelClass: (MyModel as unknown) as TaskModel,
  transport: {
    load: {
      url: '../assets/data/launch-saas.json',
    },
  },
  autoLoad: true,
});

Below is my code, you can test it, I am using bryntum-gantt-4.0.8

Attachments
gantt-example.zip
(236.05 KiB) Downloaded 61 times
gantt-errrrrrrrrrrrrrrrrrrrrrrrrrrrr.png
gantt-errrrrrrrrrrrrrrrrrrrrrrrrrrrr.png (153.85 KiB) Viewed 725 times

Post by mats »

In this case, it looks like your server returns JSON in the wrong format, can you please post your server response?


Post Reply