Dashboards & Visualizations
Highlighted

How do I correctly use tokens from a custom time range picker?

Champion

I am building a dashboard in a new app. I define several panels in Simple XML on that page and also include a Javascript file:

<form script="custom.js">
  <label>Tweets</label>
    <fieldset submitButton="false">
      <html>
        <div id="div_time"/>
      </html>
   </fieldset>
   <row>
     <panel>
       <chart>
         <title>Top 10 Hashtags</title>
           <search>
             <query>index=twitter | rename entities.hashtags{}.text as hashtags | fields hashtags | mvexpand hashtags | top hashtags</query>
             <earliest>$time.earliest$</earliest>
             <latest>$time.latest$</latest>
           </search>
           <option name="charting.chart">bar</option>
           ... more of these
      </chart>
    </panel>
  </row>
</form>

In that custom.js, I create a custom time range picker with custom settings like this:

// Presets for timerangepicker
var presetvalues = [
    {label: 'Today', earliest_time: "@d", latest_time: "now"},
    {label: 'Yesterday', earliest_time: "-1d@d", latest_time: "@d"},
    {label: 'Two days ago', earliest_time: "-2d@d", latest_time: "-1d@d"},
    {label: 'Three days ago', earliest_time: "-3d@d", latest_time: "-2d@d"},
    {label: 'Four days ago', earliest_time: "-4d@d", latest_time: "-3d@d"},
    {label: 'Five days ago', earliest_time: "-5d@d", latest_time: "-4d@d"},
];

// Settings for timerangepicker: Show the Presets panel, hide the Real-time and Advanced panels
var presetsettings = {
    showPresets: true,
    showPresetsRealTime: false,
    showPresetsAllTime: false,
    showCustom: false
};

// Custom timerangepicker to select days
var timerangepicker = new TimeRangeView({
    id: "time_custom",
    presets: presetvalues,
    dialogOptions: presetsettings,
    value: "$time$",
    default: presetvalues[0],
    el: $("#div_time")
}, {tokens: true}).render();

Now when I try to use the time range picker as above, it doesn't work. The charts simply say "Search is waiting for input", as if the token was never set. There are no errors on the console and further js code is executed correctly.
The above way to do it is taken from here, but in that example the time range picker is created in Simple XML as well. Can someone help me figure out how to do this?
Thanks!

0 Karma
Highlighted

Re: How do I correctly use tokens from a custom time range picker?

Motivator

hi jeffland,

it is because you have not given a default value to the token time.

0 Karma
Highlighted

Re: How do I correctly use tokens from a custom time range picker?

Champion

Isn't that the line default: presetvalues[0] during the creation of the time range picker?
Also, it still doesn't work after I change the time range picker to something manually, so I don't think this is the reason.

0 Karma
Highlighted

Re: How do I correctly use tokens from a custom time range picker?

Path Finder

Pretty sure this answer is right, just not detailed; I've only used simple XML but the token value from the time picker is what matters to your dashboard components.

In SimpleXML the time picker has me specify
input type="time" token="field1" searchWhenChanged="true"
and then for each dashboard component I have to specify
$field1.earliest$
$field1.latest$
inside of my search tags.

0 Karma
Highlighted

Re: How do I correctly use tokens from a custom time range picker?

Champion

But I defined the token in the setup of my timerange picker, that's the value attribute. It's set to the same value as the search.

Maybe I still didn't understand what you were trying to say, sorry.

0 Karma
Highlighted

Re: How do I correctly use tokens from a custom time range picker?

Path Finder

What was the solution here?

I'm having a similar issue with a similar approach.

0 Karma
Highlighted

Re: How do I correctly use tokens from a custom time range picker?

Champion

Unfortunately, I haven't exactly found a solution. I've done it differently, creating the time picker in Simple XML and then setting options from js.