Dynamic loading for Y-axis elements in timeline

Scheduler Javascript
#1

Good day, i am investigating this example of timeline view - https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html and i want to know if there is a way to dynamicaly load content, but not selecting a time gain like “week”, “day”, “year”, but loading elements (bars with event) for currently displaying y-axis elements (James Smith, John Williams, etc). In my case i have a lot of these y-axis elements, more than 100, and page overloads browser. I want to show 10 per view, and have something like arrows “up” and “down” to show previuos and next names; like we have these <- arrows -> for horisontal scrolling, for example, but for vertical in my case

#2

Hello @AlexMav ,

Regarding this part:

but not selecting a time gain like “week”, “day”, “year”, but loading elements (bars with event) for currently displaying y-axis elements (James Smith, John Williams, etc).

You can implement it on the backend side, just by filtering the backend response based on the currently displayed sections(it may be useful in case of more than 1000 events).
Or you can use the filter functionality, to filter currently displayed events:
https://docs.dhtmlx.com/scheduler/filtering.html

Regarding this part:

I want to show 10 per view, and have something like arrows “up” and “down” to show previuos and next names; like we have these <- arrows -> for horisontal scrolling, for example, but for vertical in my case

There is no built-in option for dynamic loading of sections but you can implement it through the custom code. The logic could be to listen to the mouse scroll(or click on some buttons you want to use as a control) and call the updateCollection method on the sections used as y_unit of the timeline view.

Here is a demo that shows how to dynamically add new sections:
http://snippet.dhtmlx.com/5/7c06cf0f3

In case if you want to use both solutions - dynamic section loading and dynamic event’s loading, you have to parse the new data, after each section’s updating(increaseTimelineY in case of the demo above).

Kind regards,

#3

Thank you, Siarhei, for your reply. I tried to make step-by-step sections loading with arrows with using updateCollection method, but no luck. It does not update my sections for some reason. Here is an example:

scheduler.config.start_on_monday = true;
var sections=[
  {key:1, label:"Apartment 1"},
  {key:2, label:"Apartment 2"},
  {key:3, label:"Apartment 3"},
  {key:4, label:"Apartment 4"},
  {key:5, label:"Apartment 5"},
  {key:6, label:"Apartment 6"}, 
  {key:7, label:"Apartment 7"},
  {key:8, label:"Apartment 8"},

];

scheduler.createTimelineView({
				name: "timeline",
				x_unit: "hour",
				x_date: "%H:%i",
				x_step: 8,
				//x_size: 33,
				//x_length:33,
				x_size: 21,
				x_length:21,
				event_dy:60,
				resize_events:false,
				y_unit: sections,
				y_property: "client",
				render: "bar",
				second_scale:{
					x_unit: "day", // unit which should be used for second scale
					x_date: "%F %d (%D)" // date format which should be used for second scale, "July 01"
				}
			});
		scheduler.date.timeline_start = scheduler.date.week_start;
			//scheduler.date.timeline_start = scheduler.date.day_start;
			scheduler.createUnitsView({
				name: "unit",
				property: "client",
				//list: sections
				list: sections
			});


scheduler.init("scheduler_here",new Date(2020, 5, 29),"timeline");
scheduler.parse([
  { "id":1, "start_date": "2020-06-29 09:00", "end_date": "2020-06-30 08:00", "text":"Richard", "section_id": 1},
  { "id":2,"start_date": "2020-06-29 10:00", "end_date": "2020-07-05 9:00", "text":"John", "section_id": 2},
  { "id":3,"start_date": "2020-06-29 10:00", "end_date": "2020-06-31 9:00", "text":"Lisa", "section_id": 3, "unchangeable": 1},
  { "id":4,"start_date": "2020-06-29 09:00", "end_date": "2020-06-30 15:00", "text":"Jeff", "section_id": 4},
  { "id":5,"start_date": "2020-06-30 11:00", "end_date": "2020-07-03 15:00", "text":"Ann", "section_id": 1, "unchangeable": 1},
  { "id":6, "start_date": "2020-07-06 12:00", "end_date": "2020-07-07 15:00", "text":"Elisabeth", "section_id": 2}
]);

scheduler.updateCollection("sections", [
    { key: 5, label: "Section E" },
    { key: 6, label: "Section F" },
    { key: 7, label: "Section G" }
]);

So i want to see 3 new sections on Y axis instead of 8 old sections, but still there are these 8 old sections. Why?

p.s. snippet of my code - http://snippet.dhtmlx.com/5/9adb53241

#4

Haha, i solved it. updateCollection() works with serverList, so the right code is:

scheduler.config.start_on_monday = true;
var sections=[
  {key:1, label:"Apartment 1"},
  {key:2, label:"Apartment 2"},
  {key:3, label:"Apartment 3"},
  {key:4, label:"Apartment 4"},
  {key:5, label:"Apartment 5"},
  {key:6, label:"Apartment 6"}, 
  {key:7, label:"Apartment 7"},
  {key:8, label:"Apartment 8"},

];
scheduler.serverList("sections", sections);
scheduler.createTimelineView({
				name: "timeline",
				x_unit: "hour",
				x_date: "%H:%i",
				x_step: 8,
				//x_size: 33,
				//x_length:33,
				x_size: 21,
				x_length:21,
				event_dy:60,
				resize_events:false,
				y_unit: scheduler.serverList("sections"),
				y_property: "client",
				render: "bar",
				second_scale:{
					x_unit: "day", // unit which should be used for second scale
					x_date: "%F %d (%D)" // date format which should be used for second scale, "July 01"
				}
			});
		scheduler.date.timeline_start = scheduler.date.week_start;
			//scheduler.date.timeline_start = scheduler.date.day_start;
			scheduler.createUnitsView({
				name: "unit",
				property: "client",
				//list: sections
				list: scheduler.serverList("sections")
			});


scheduler.init("scheduler_here",new Date(2020, 5, 29),"timeline");
scheduler.parse([
  { "id":1, "start_date": "2020-06-29 09:00", "end_date": "2020-06-30 08:00", "text":"Richard", "section_id": 1},
  { "id":2,"start_date": "2020-06-29 10:00", "end_date": "2020-07-05 9:00", "text":"John", "section_id": 2},
  { "id":3,"start_date": "2020-06-29 10:00", "end_date": "2020-06-31 9:00", "text":"Lisa", "section_id": 3, "unchangeable": 1},
  { "id":4,"start_date": "2020-06-29 09:00", "end_date": "2020-06-30 15:00", "text":"Jeff", "section_id": 4},
  { "id":5,"start_date": "2020-06-30 11:00", "end_date": "2020-07-03 15:00", "text":"Ann", "section_id": 1, "unchangeable": 1},
  { "id":6, "start_date": "2020-07-06 12:00", "end_date": "2020-07-07 15:00", "text":"Elisabeth", "section_id": 2}
]);

scheduler.updateCollection("sections", [
    { key: 5, label: "Section E" },
    { key: 6, label: "Section F" },
    { key: 7, label: "Section G" }
]);
1 Like