how to set default preview width to Rickshaw.Graph.RangeSlider

Question

I am new to Rickshaw JS toolkit. In the example give at http://code.shutterstock.com/rickshaw/examples/extensions.html the preview bar(Rickshaw.Graph.RangeSlider) at the bottom of the graph used to select the time frame is by default the total time frame available.

How to customize the default preview as last one minute and minimum preview width for RangeSlider?

Thanks in Advance.

Answer 1

It looks all the zooming and preview redraw stuff is done right inside the mousemove handler. So there doesn't appear to be any way to change or default the preview width other than using those event handlers - odd that it's not factored out somewhere so you can manually set the zoom?

As a horrible hack you can explicitly trigger a series of mouse events to simulate a mouse down/drag/up, setting the clientX value based on whatever fraction of the container width you want to move to. For example (in Chrome) we send mousedown to the left handle, then mousemove ane mouseup to document, where w is my container width and I want to zoom to the range t1 - t2 instead of the default t0 - t2.

    // fake handle move
    edown = document.createEvent("HTMLEvents");
    edown.initEvent("mousedown", true, true);
    edown.clientX = 0;
    emove = document.createEvent("HTMLEvents");
    emove.initEvent("mousemove", true, true);
    emove.clientX = 0.9 * w * (t1 - t0) / (t2 - t0) ;
    eup = document.createEvent("HTMLEvents");
    eup.initEvent("mouseup", true, true);
    $('#slider .left_handle')[0].dispatchEvent(edown);
    document.dispatchEvent(emove);
    document.dispatchEvent(eup); 

Answer 2

I know that this question is old, but in case anyone stumbles upon the same problem: DON'T fake mouse events. Looking at the slider's code, what it does when slided is to set the xMin and xMax of the graph window and update it then. We can do the same - after the initialization of the graph call:

// lower limit            
graph.window.xMin = 5;
// upper limit
graph.window.xMax = 10;
// this will also update the slider
graph.update();