ZingChart: Sticky Crosshairs

When using our API to simulate a live feed of the data using methods ( setseriesdata, appendseriesvalues, addnode etc..) the chart updates and the crosshair disappears. You can easily remedy this with our API.

Non Sticky Crosshair

If you have no idea what I'm talking about watch below as we hover the mouse over the following chart and notice how the crosshair values disappear too rapidly to be useful.  

Try it yourself to experience the annoyance first hand.

Example: https://demos.zingchart.com/view/embed/78YO4HL7

Sticky Crosshair

Obviously if a data feed was slow enough the cross hair changing might not be a problem, but for fast data or in situations where you don't want to pause a feed we need what we call a "sticky crosshair" as it stays with the item inspected even as it moves.  We can implement this behavior rather easily using the ZingChart API.  

// global value used between functions
var guide_scale_keyvalue = null;/*
 * register all movements of the crosshair
 */
zingchart.bind('zc', 'guide_mousemove', function(p) {
    if (p.items.length) {
        guide_scale_keyvalue = p.items[0].keyvalue;
    }
});/*
 * register all movements of the crosshair
 */
zingchart.bind('zc', 'guide_mouseout', function(p) {
    guide_scale_keyvalue = null;
});/*
 * Everytime the chart finishes rendering from appendseriesvalues
 * set the guid to appear at the last position is was
 */
zingchart.bind('zc', 'complete', function() {
    if (guide_scale_keyvalue) {
        zingchart.exec('zc', 'setguide', {
            keyvalue : guide_scale_keyvalue
        });
    }
});

The example below illustrates this in action

Example: https://demos.zingchart.com/view/embed/I6DRI86H

Documentation

crosshair Tutorial
crosshairX JSON Docs
API Methods
API Events