timechart zoom

timechart_zoom.js

require([
    'jquery',
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
],
function(
    $,
    _,
    mvc
) {
    var unsubmitted_tokens = mvc.Components.get('default');

    // Look for a chart with the id=timechart in Simple XML
    // Look for a search with the id=timechart_search
    // <chart id="timechart">
    //   <search id="timechart_search">
    //     <query>index=foo sourcetype=bar | timechart avg(point) by subject</query>
    //     <earliest>$earliest$</earliest>
    //     <latest>$latest$</latest>
    //   </search>
    // </chart>
    var timechart_id        = "timechart";
    var timechart_search_id = "timechart_search";

    var timechart        = mvc.Components.get(timechart_id);
    var timechart_search = mvc.Components.get(timechart_search_id);

    var timechart_search_earliest = timechart_search.get("earliest_time", {tokens: true}).replace(/\$/g, "");
    var timechart_search_latest   = timechart_search.get("latest_time",   {tokens: true}).replace(/\$/g, "");

    timechart.on("selection", function(e) {
        e.preventDefault();
        if(e.isReset) {
            $("#zoom_in").hide();
        }
        else {
            var start = e.startValue;
            var end   = e.endValue;

            if($("#zoom_in").length) {
                $("#zoom_in").show();
            }
            else {
                var zoom_in = $('<a id="zoom_in" class="btn-link btn-reset-selection" style="top: 10px; right: 130px;"><i class="icon-check-circle"></i> Zoom In</a>');
                $("#" + timechart_id + " .highcharts-container").append(zoom_in);

                zoom_in.on("click", function(e) {
                    unsubmitted_tokens.set(timechart_search_earliest, start);
                    unsubmitted_tokens.set(timechart_search_latest,   end);
                });
            }
        }
    });
});