How to async load data

how to async load data

Hi @jinhua,
If you meant loading data from the server, you could use gantt.load() method. Also, you can combine it with promises and callback functions.
If you want to provide more wide client-server cooperation, you could check gantt.ajax module
If my answer didn’t help you, could you please clarify your question?

vue axios get async data

Hi @jinhua,
Unfortunately, I don’t specialize in Vue, but I could suggest you check this API example:,
I think something like following would work:

Vue.axios.get(api).then((response) => {


Hi @jinhua,
The common language of this forum is English, so could you use it please, instead of Chinese?
Google translated your question as:
“When I initialized the data, I replaced the data I loaded last time. Why?”
Unfortunately, I don’t fully understand what do you mean, as initialized the data,?
You can initialize gantt by calling gantt.init. And you can load data by colling .parse/.load methods. When you are loading the new data from your backend, they will mix with the old data:

  1. data with the same id-s will be replaced
  2. data which did not exist will be added
  3. data which did exist and has unique id will stay as it is
    I think it the right way it should work.

Your issue could occur if you are calling clearAll() before loading the new data.
Because clearAll() will remove all tasks and additional elements from the gantt chart, so the old data cease to exist and become fully replaced with new data.
It would be nice if you provide a more detailed description of your issue, maybe with some code fragments, to let me provide you more appropriate help?
API clearAll:

Using the vue component, different pages render the same value, or the values are merged. Why? how to solve this problem? What I want to achieve is a different page that introduces the gantt component and renders different values.


like that

Hi @jinhua,
Thank you for this clarification. The issue could have occurred if you don’t call gantt.clearAll() before gantt.parse().
Also, if it didn’t help, you can think about creating a new gantt instance(available only in the PRO) for each call of the Vue component(with gantt):
So, when you open the Vue component(with gantt) - create the new gantt instance and load data. When you leave this component - delete gantt instance.
If you still have the issue, could you please provide me with a complete sample project, which I could run locally and reproduce the issue?

How do I scroll the grid and timeline horizontally in a gantt diagram at the same time

Hi @jinhua,
In order to do this, you can use the scrollX parameter in the gantt.config.layout. Using this parameter you can bind many views to the one scrollbar, here is an example:
Here is a more complex example, with the resource diagram(the important part is the gantt.config.layout):
Gantt Layout: