Morris graph always display labels

Question

Morris charts shows labels when the user hovers over datapoints.

I would like these hovers to always be displayed. I have tried using the hideHover: false option, but this doesn't seem to work (http://jsfiddle.net/N7NpT/).

var day_data = [
    {"elapsed": "I", "value": 34},
    {"elapsed": "II", "value": 24},
    {"elapsed": "III", "value": 3},
    {"elapsed": "IV", "value": 12},
    {"elapsed": "V", "value": 13},
    {"elapsed": "VI", "value": 22},
    {"elapsed": "VII", "value": 5},
    {"elapsed": "VIII", "value": 26},
    {"elapsed": "IX", "value": 12},
    {"elapsed": "X", "value": 19}
];
Morris.Line({
    element: 'graph-line',
    data: day_data,
    xkey: 'elapsed',
    ykeys: ['value'],
    labels: ['value'],
    lineColors:['#000'],
    parseTime: false,
    hideHover: false,
});

I would also like to use the hoverCallback function so that I can use HTML and only display data if it is available (or bring in data from an outside array).

I have attached a basic representation of what I am trying to achieve.

Answer 1

Here is my quick custom for label always display but only work after hover over all point. Hope this help.

Step 1: Edit source file morris.js like this (here i use version v0.5.0):

Line.prototype.hoverContentForRow = function(index) {
  var content, j, row, y, _i, _len, _ref;
  row = this.data[index];
  content = "<div class='morris-hover-row-label'>" + row.label + "</div>";
  _ref = row.y;
  for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) {
    y = _ref[j];
    content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n  " + this.options.labels[j] + ":\n  " + (this.yLabelFormat(y)) + "\n</div>";
  }
  if (typeof this.options.hoverCallback === 'function') {
      //edit the line bellow right here. add new params "row._x, row._ymax"
      content = this.options.hoverCallback(index, this.options, content, row.src, row._x, row._ymax);
  }
  return [content, row._x, row._ymax];
};

Step 2: At your define graph: Edit event 'hoverCallback' like this:

function ShowDSTheoNgay(data) {
    var line = new Morris.Line({
        element: 'LINECHART_DSTheoNgay',
        resize: true,
        data: data,
        xkey: 'ngay',
        ykeys: ['dsOnline', 'dsOffline'],
        labels: ['Online', 'Offline'],
        lineColors: ['#61af20', "#a86400"],
        hideHover: false,
        hoverCallback: function (index, options, content, row, x , y) {
            var default_html = "<div class='morris-hover morris-default-style'> </div>";
            var default_html = $(default_html).append(content);
            moveTo($(default_html), $('#LINECHART_DSTheoNgay'), x, y);
            return '';
        }
    });
}

Step 3: Add custom 'moveTo' function:

function moveTo(el, options, x, y) {
    options.append(el);
    var hoverHeight, hoverWidth, left, parentHeight, parentWidth, top;
    parentWidth = options.innerWidth();
    parentHeight = options.innerHeight();
    hoverWidth = el.outerWidth();
    hoverHeight = el.outerHeight();

    left = Math.min(Math.max(0, x - hoverWidth / 2), parentWidth - hoverWidth);
    if (y != null) {
        top = y - hoverHeight - 10;
        if (top < 0) {
            top = y + 10;
            if (top + hoverHeight > parentHeight) {
                top = parentHeight / 2 - hoverHeight / 2;
            }
        }
    } else {
        top = parentHeight / 2 - hoverHeight / 2;
    }

    el.css({
        left: left + "px",
        top: parseInt(top) + "px"
    });

    return;
}

Note : this Code is my quick custom. I'm not focus to performance right now.