Timepicker as part of embedded dashboard

[sqpdln]

We have a use case where we're going to embed dashboards in iframes. One thing we see really lacking is the limited ability to zoom in time (especially zoom out). One solution could be to (preferably as an option) bring the timepicker into the embedded dashboard. (Kibana 4)

(I guess a workaround would be to hack it in the URL).

[rashidkpc]

We'd love to add input panels to the dashboards eventually.

[carlosvega]

This would be cool, please.

[davidsandoz]

I would love to see that feature as well!

[carlosvega]

I had to make my own time picker using jquery. I put two dates (using a date picker from bootstrap) on the fields and when I click the "Filter" button I change the iframe src URL altering the part: "time:(from:now-60d,mode:quick,to:now))" from the URL.
If you want absolute dates like "2014-02-24" you need to change the mode to "absolute". I have two modes, relative (like "now-2M"), and absolute. I think is a feature relatively easy to do.

[sqpdln]

@carlosvega yes, i did something similar, but there are still things you can't do, like making it show the correct date range after selecting it within a visualisation. also, it's a longer turnaround since it needs to reload kibana via the iframe src. or did you manage to solve any of this?

[carlosvega]

If you are referring to the lack of zoom out feature when you zoom in on the charts (which I think is also easy to do and necessary) what I do is refreshing the iframe with a button and jquery.
And no, it's not possible to change with my own timepicker ™ the chart without reloading the entire iframe. The only way to do that it's selecting the interval time in one of the date histograms, but, as you said, is not that precise.

But, I think it do not reloads exactly the entire iframe. It's faster or something, check it out

[sqpdln]

yeah, with "can't do" I ment by just by url-hacking your own solution while waiting for this feature.
zoom out, or rather go back to previous zoom level, can actually be achieved with the backbutton history. what I meant was that with my url-hack-timepicker my dropdown says "last 7 days" even if the user zoomed in on a different date range.

[mablae]

👍

[benediktarnold]

+1

[mablae]

@rashidkpc Any news on this?

[adrianolimit]

Hi everybody,

I'm working with Elasticsearch and Kibana 4.1.1 and my question is :
Is it possible to create a filter of date range in a dashboard?

For exemple, I would want to have 3 filters at the top of the dashboard "2000 to 2005", "2005 to 2010" and "2010 to 2015" in order to the user could easily filter the dates.

Thanks in advance for your help.

[carlosvega]

Yes, you can do a range filter like:
date_field: [12341243513 TO 12312124111]
Date beign in miliseconds

[adrianolimit]

To modify a dashboard, I update the dashboard kibana index stored in Elasticsearch. So this is my command :

post .kibana/dashboard/my_dashboard_demo
{
"title": "my_dashboard_demo",
"hits": 0,
"description": "",
"panelsJSON": "[{"col":1,"id":"my_first_pie","row":3,"size_x":6,"size_y":5,"type ":"visualization"}]",
"version": 1,
"kibanaSavedObjectMeta": {
"searchSourceJSON":"{"filter":[{"meta":{"disabled":true,"index":"my_index","key":"USER","negate":false,"value":"Owner"},"query":{"match":{"USER":{"query":"Owner","type":"phrase"}}}},{"meta":{"index":"my_index","key":"CREATION_DATE","value":"Creation_Date","negate":false,"disabled":true},"query":{"match":{"CREATION_DATE":{"query":"2012-12-06T18:10:30","type":"phrase"}}}}]}"}
}

With this command, I have a simple dashboard with 2 filters : 1 on the field "USER" and 1 other on the field "CREATION_DATE". I want to modify my second filter in order to obtain a range date, so I just need to change this
"{"query":"2012-12-06T18:10:30,"type":"phrase"}
by this
"{"query":CREATION_DATE: [12341243513 TO 12312124111] ,"type":"phrase"} ?

Thanks in advance for your help.

[mpok3]

+1

[gloyka]

+1

[ferranmunoz]

+1

[mablae]

Kibana isn't worth anymore

[carlosvega]

What do you use then?

[kaib]

+1

[samuelmr]

+1

[mablae]

@carlosvega I think I will go into manual direction again for Business Analysis, like have some JS on page that fetches the data via xhr from framework (symfony) which then queries elasticsearch and normalizes the data into a format that a third party charting app could read.

However, Kibana is great tool to craft the queries, which I then reuse in my PHP code. But for the end-user Kibana is to complicated and has not enough features to make it easy to customize.

Even the color-palette is so ugly... 😄 For log analysis I will migrate to graylog2 soon. It already has alerting and such built in and utilizes ES as storage backend.

[kaib]

can someone elaborate why it is so hard to display the normal timepicker in the embedded dashboard?
Or why it is hidden in the first place?

[carlosvega]

+1

[pecegit]

+1

[udaysagar2177]

Yes, Timepicker as a part of embedded dashboard will be a very useful feature. My dashboard(http://52.23.29.98:21772/app/kibana#/dashboard/Twitter-Analytics) consist many charts with Time on one of the axes. Embedding this dashboard will not be useful anymore

[kuring]

+1

[rvera-tt]

+1

[tianchao-haohan]

@Bargs The enhancement created in Jan 24, 2015. It has passed 1.5 years now. Is there any plan for this enhancement?

[Bargs]

It's not on any sort of roadmap, as a P4 it's not a high priority. To be honest, the most likely way this will get implemented is through a community pull request.

[marfago]

+1

[sjivan]

@carlosvega I'm looking to develop a jQuery date picker plugin component. Is the one you developed open source by any chance? I would love to use it as-is or as a starting point

[mschrieck]

time visualization plugin works fine. but it would be nice to have such a plugin directly in the distribution.

[ytzlax]

+1

[star437]

Hello there,

Is there a possibility to install the time visualization plugin on a Elastic cluster on the Cloud, I mean using the Saas option of Elastic? If not, what would you suggest?

[carlosvega]

There are many plugins for kibana, doesn't matter if you have a cluster, the plugins are for the front-end, Kibana.
You just need to use the kibana-time-plugin or develop your own.

For example: Make a little jquery script like this:

$('.content > .navbar').removeClass('hide')
This must be executed from the iframe perspective, otherwise you need to do something like $('#iframe').find( ... ) in order to get to the '.content > .navbar' element of the dashboard.
Then you just need to remove the links in a similar way in order to avoid access to the kibana admin console.

[star437]

Hello Carlos, Thank you for your answer. Actually, let me be more accurate. We are using the Elastic Cloud solution. You can see in this page the section Restriction that tell us that no plugin of Kibana can be installed: https://www.elastic.co/guide/en/cloud/current/official-plugins.html I have previously installed the kibana-time-plugin but on a local installation of Kibana on our servers. Here we use the Kibana As A Service. So in that case, how can we embed a time plugin in the dashboard, whether it is in the frame or outside. Thanks, Gilles Barnier De : Carlos Vega [mailto:[email protected]] Envoyé : mardi 14 février 2017 16:25 À : elastic/kibana <[email protected]> Cc : Gilles Barnier - Invengo Technologies <[email protected]>; Comment <[email protected]> Objet : Re: [elastic/kibana] Timepicker as part of embedded dashboard (#2739) There are many plugins<https://www.elastic.co/guide/en/kibana/current/known-plugins.html> for kibana, doesn't matter if you have a cluster, the plugins are for the front-end, Kibana. You just need to use the kibana-time-plugin<https://github.com/nreese/kibana-time-plugin> or develop your own. For example: Make a little jquery script like this: $('.content > .navbar').removeClass('hide') This must be executed from the iframe perspective, otherwise you need to do something like $('#iframe').find( ... ) in order to get to the '.content > .navbar' element of the dashboard. Then you just need to remove the links in a similar way in order to avoid access to the kibana admin console. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#2739 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ATYcUr1uquc3UJVNOkPHo4S_ei6B1Yxmks5rccc8gaJpZM4DWWsH>.

[carlosvega]

If I were you I would use a secondary website with the dashboard embeded as an iframe, just as I explained in one of my answers. Then, I would use the datepicker from bootstrap or jquery UI.
It is an easy process. You just need two calendars and a button. The calendars set the dates, and the button callback must parse the src attribute from the iframe replacing the part in which the date is written.

This part usually looks like: "time:(from:now-60d,mode:quick,to:now))" in the dashboard URL.

[star437]

Ok thanks I will do it that way

[altmind]

hmm, will this css rule on embeded page show the nav panel? it shows time nav panel that works just fine.

.localNav.localNav{ display: block !important; }

[xycloud]

@altmind no effect

[desai10]

can you please tell me how you got the time visualization plugin (https://github.com/nreese/kibana-time-plugin) to work? I am using kibana 5.4.3. I followed the steps in the readme markdown (under install -> kibana 5.x). I can see the files in the directory but i am not able to use the plugin in kibana.
@mschrieck @Bargs @nreese

[nreese]

The plugin has not been updated to support 5.4 yet.

[piotrkochan]

+1

[stacey-gammon]

This is covered as part of #9575

Closing this to consolidate issues which will help us have a more accurate view of how important an issue/topic is to the community. Please continuing following progress over there! If anyone objects to closing this, please let me know and I can re-open.