Add labels to events #124

Closed
leereilly opened this Issue Nov 24, 2012 · 3 comments

Projects

None yet

5 participants

@leereilly

Friendly feature request: I'd like to be able to attach labels to events. If I have more than a couple on a linegraph - it's hard to tell what they're for.

Morris.Line({
  element: 'graph',
  data: weekly_data,
  xkey: 'dem-numbers',
  ykeys: ['new', 'updated'],
  labels: ['New', 'Updated'],
  events: [
    '2012-12-25' // <---- I'd like to give this a label
  ]
});

Cheers,
Lee 🍻

@tiraeth
Contributor
tiraeth commented Nov 24, 2012

This is for sure a good thing to have. When Olly merges my HTML popup replacement I will work on providing same functionality for events/goals. Right now it isn't easy to implement labels for events/goals. Please remember that the label shouldn't be covered by a series popup.

@MaZderMind

Try this:

    // inject name-drawing
    var originalDrawEvent = Morris.Grid.prototype.drawEvent;
    Morris.Grid.prototype.gridDefaults.eventTextSize = 12;
    Morris.Grid.prototype.drawEvent = function(event, color) {
        originalDrawEvent.apply(this, arguments);

        var idx = $.inArray(event, this.events);
        if(!this.options.eventLabels || !this.options.eventLabels[idx])
            return;

        this.raphael.text(this.transX(event),this.top - this.options.eventTextSize, this.options.eventLabels[idx]).attr('stroke', color).attr('font-size', this.options.eventTextSize);
    }

use it like this

        Morris.Line({
            ...
            events: ["2013-04-26", "2013-04-28"]
            eventLineColors: ["#B78779", "#7580AF"],
            eventLabels: ["Foo", "Bar"],
            //eventTextSize: 12,
            ...
        })
@mkkmail
mkkmail commented Jun 17, 2015

Hi . thanks @MaZderMind
how can use Html in Events.
JS Bin: http://jsbin.com/cavodohujo/edit?html,js,output

@jaminellis jaminellis closed this Dec 23, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment