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!
