CODEWITHSUNDEEP
jqueryrickshaw
mpwhite
mpwhite

Reputation: 13

How can I access the value shown in the hover modal of a rickshaw graph?

I have a graph using rickshaw that includes a hoverDetail, and I want to dynamically change another area of the page using JQuery based on the value that is currently being hovered over. Is this possible using rickshaw and JQuery? Or will another approach be necessary?

Upvotes: 1

Views: 134

Answers (1)

Jin Ng
Jin Ng

Reputation: 146

This example shows clearly how to edit the render() function of the hoverDetail object http://code.shutterstock.com/rickshaw/examples/hover.html

Instead of showing the data as a label, it is showing the data in a fixed position on the page.

var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {

render: function(args) {

    legend.innerHTML = args.formattedXValue;

    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;

Upvotes: 1

Related Questions