Second X-Axis Scale in Timeline View Gets Taller with each Page Load

Scheduler
#1

If I add a second x-axis scale to a Timeline View, with each page load, the x-axis for both scales becomes taller. This does not happen when I have a single x-axis.

Worth noting: when I say “page load”, I’m switching to another page on the site then coming back to this page. Our site is such that this action does not literally reload the javascript for the page. If I do a Ctrl+F5, the page completely reloads and the axis is restored to its original height.

My code to create the view:

        scheduler.createTimelineView({
            name: "timeline",
            render: "tree",       //view mode (otherwise: bar)
            x_unit: "minute",     //measuring unit of the X-Axis.
            x_step: 60,           //X-Axis step in "x_unit"s
            x_start: 0,           //X-Axis offset in "x_unit"s (was 6)
            x_size: 24 * $scope.daysToLoad,           //X-Axis length specified as the total number of "x_step"s
            x_length: 24,         //number of "x_step"s that will be scrolled at a time
            y_unit: jsonResourceListData,
            second_scale: {  // the only difference is that I added this for the second x-axis scale.
                x_unit: "day",
                x_date: "%M %j"
            },
            folder_dy: 16,        // height of the tree groups
            dy: 18,
            event_dy: 12,
            event_min_dy: 12,
            y_property: "assignToId", //mapped data property
            section_autoheight: false,
            scrollable: true,
            column_width: GRID_WIDTH / 16
        });

After one reload:

After
After1549×601 30.6 KB

#2

Hi @trentrockport,
I think, that this problem occurs because when you are using a timeline with the second scale - the scheduler doubles scale_height to create the second scale. When you leave the timeline view it brings scale_height back and, for some reason, it doesn’t work correctly in your case.
Without an example, I can advise you to try to set up scale_height manually before each scheduler.init() call, like in this example:

scheduler.xy.scale_height = 20; 
scheduler.init("scheduler_here");

For more detailed help, could you prepare and send me some kind of an example that I can run and see the issue?
Docs:
https://docs.dhtmlx.com/scheduler/api__scheduler_xy_other.html

#3

Still same issue, always double height randomly when switching timelines

#4

Hello @Ian_Pee ,

Yes, the previous answer wasn’t fully correct - the issue can occur if you are setting this config only in initializing scheduler, but not reset it on each recreating the timeline.

As each createTimelineView call doubles the previous scale_height value, you should reset it before each method call, like follows:

function recreateTimeline(){
  // This  line fixes the scale height on each timeline create
  scheduler.xy.scale_height = 20; 
  scheduler.createTimelineView({
    name:	"timeline",
    x_unit:	"hour",
    x_date:	"%H:%i",
    x_step:	4,
    x_size: 48,
    x_start: 2,
    x_length: 48,
    y_unit:	sections,
    y_property:	"section_id",
    render:"bar",
    second_scale:{
      x_unit: "day", 
      x_date: "%F %d" 
    }
  });
}

Here is a demo(Click the Reset button):
http://snippet.dhtmlx.com/5/83e16ee83

If the issue still exists, could you please reproduce it in the demo above(open the snippet => reproduce the issue on HTML/CODE tabs => click the “Share” button => post here a new link).

Kind regards,