Rickshaw Chart Hovering Multiple Values

D3 is a great javascript library for creating data visualization chart. I have been a big fan of it for over a year now. However, whenever I need to develop a quick chart prototype, I use an alternative library called Rickshaw. It’s an extension from D3, so you can get greatness from both of them.

One thing that was challenging me recently that I needed to create a chart when user hovered on it, it would reveal all y-values at the cursor position.

The source code for this was simple, as seen below:

<div id="chart_container">
    <div id="chart"></div>
</div>
// set up our data series with 50 random data points

var seriesData = [ [], [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);

for (var i = 0; i < 150; i++) {
    random.addData(seriesData);
}

// instantiate our graph!

var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    width: 600,
    height: 300,
    renderer: 'line',
    series: [
        {
            color: "#c05020",
            data: seriesData[0],
            name: 'New York'
        }, {
            color: "#30c020",
            data: seriesData[1],
            name: 'London'
        }, {
            color: "#6060c0",
            data: seriesData[2],
            name: 'Tokyo'
        }
    ]
} );

graph.render();
var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {
    render: function(args) {
        var lines = document.createElement('div');
        lines.className = 'line-wrapper';
        lines.innerHTML = args.formattedXValue;
        lines.style.top = args.mouseY + "px";
        this.element.appendChild(lines);
        var boundingRect = this.element.parentNode.getBoundingClientRect();
        if ( args.mouseX > ( boundingRect.width * 2 / 3 ) ) {
            this.element.classList.remove('left');
            this.element.classList.add('right');
        } else {
            this.element.classList.remove('right');
            this.element.classList.add('left');
        }

        args.detail.sort(function(a, b) { return a.order - b.order }).forEach( function(d) {

            var line = document.createElement('div');
            line.className = 'line';

            var swatch = document.createElement('div');
            swatch.className = 'swatch';
            swatch.style.backgroundColor = d.series.color;

            var label = document.createElement('div');
            label.className = 'label';
            label.innerHTML = d.name + ": "+ d.formattedYValue;

            line.appendChild(swatch);
            line.appendChild(label);

            lines.appendChild(line);

            var dot = document.createElement('div');
            dot.className = 'dot';
            dot.style.top = graph.y(d.value.y0 + d.value.y) + 'px';
            dot.style.borderColor = d.series.color;

            this.element.appendChild(dot);

            dot.className = 'dot active';

            // Assume left alignment until the element has been displayed and
            // bounding box calculations are possible.

            this.show();

        }, this );
    }
});

var hover = new Hover( { graph: graph } );