Hide day labels on a given band

[khayes]

Is it possible to hide the date labels at the bottom of a band? I have
multiple bands and I only want to show the labels on one of 4 bands
that I have.

[Michael Nosal]

There's two ways to do this:
Turn the labels off via CSS
or
Don't draw the labels in the first place (which improves performance)

The first is easy. Add this css rule to your stylesheet:
#timeline-band-x div.timeline-date-label {display:none}
where x is the index of the band you wish to turn labels off. The first band is 0, the second is 1, etc.

The second way is not difficult, but it requires some custom Javascript coding.
This happens in the EtherPainter and in the EtherIntervalMarkerLayout code.
When you create a band, it is assigned an ether painter, usually the GregorianEtherPainter. One attribute of the GregorianEtherPainter (and HotZoneGregorianEtherPainter) is the _intervalMarkerLayout. This is a instance of the EtherIntervalMarkerLayout class which draws both the lines (the tick marks) and the date labels.

Quick-n-dirty example:
Make a copy of the EtherIntervalMarkerLayout class and call it "NoLabelMarkerLayout" or whatever. Delete or comment out the code that adds the label div to the markerDiv inside the createIntervalMarker function.

After you create your bands, grab the one you want and change it's ether painter's _intervalMarkerLayout to the NoLabelMarkerLayout.

var ep = tl.getBand(0).getEtherPainter();
ep._intervalMarkerLayout = new Timeline.NoLabelMarkerLayout(
ep._timeline, ep._band, ep._theme, "hAlign", true);

--Mike

[khayes]

Yeah CSS was what I first considered but knew it wasn't going to be my preferred way.

I like the idea of creating a new marker layout, this is better than what I ended up doing. I think I will revert my code and got that route instead.

[Kyle Hayes]

Ok, I implemented the method you mentioned and it seems to have worked beautifully. Instead of specifying the layout outside of the core classes, I extended the default theme class to include an ether.interval.label.show property which defaults to true:

    this.ether = {

        backgroundColors: [

        //    "#EEE",

        //    "#DDD",

        //    "#CCC",

        //    "#AAA"

        ],

     //   highlightColor:     "white",

        highlightOpacity:   50,

        interval: {

            line: {

                show:       true,

                opacity:    25

               // color:      "#aaa",

            },

            label: {

              show: true

            },

And then inside the GregorianEtherPainter initialize method I added the following:

    var showLabel = ("showLabel" in this._params) ? this._params.showLabel :

        this._theme.ether.interval.label.show;

    

    var MarkerLayout = showLabel ? Timeline.EtherIntervalMarkerLayout : Timeline.NoLabelMarkerLayout;

    

    this._intervalMarkerLayout = new MarkerLayout(

            this._timeline, this._band, this._theme, align, showLine);

Cheers,
Kyle

--
You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group.
To view this discussion on the web visit https://groups.google.com/d/msg/simile-widgets/-/7pxTCyqhleoJ.
To post to this group, send email to simile-...@googlegroups.com.
To unsubscribe from this group, send email to simile-widget...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.

[Michael Nosal]

Kyle,

That's a great solution. Many folks aren't comfortable with customizing the Javascript, but glad to see you go diving right in. For non-JS savvy folks, the CSS option will work for them. 

--Mike