Aggregate ElasticSearch data and visualize into Gantt chart

Elastic Stack Kibana
1

First of all, I think this question is related to Kibana, let me know if I am wrong:-)

My question is that I want to aggregate my ElasticSearch Index data and then visualize it into the Gantt chart, I don't know if I am on the right path for solving the problem.

Here is the example of my data:
[{
ID: ID1,
StartEndFlag: Start
Date: 2011-01-01
},
{
ID: ID1,
StartEndFlag: End
Date: 2011-01-02
},{
ID: ID2,
StartEndFlag: Start
Date: 2011-01-03
},
{
ID: ID2,
StartEndFlag: End
Date: 2011-01-04
}]

and I want to display it as the Gantt chart with x-axis being date time, and y-axis being ID1 and ID2, and the horizontal bar will be displayed from 2011-01-01 to 2011-01-02 for ID1 and 2011-01-03 to 2011-01-04 for ID2

What I am thinking about the steps as follows:

  1. Aggregate the ElasticSearch data using the query in Kibana into something like below:
    {ID: ID1
    StartDate: 2011-01-01
    EndDate: 2011-01-02
    }
  2. Using Vega component to display as in this thread:
    Gantt Chart timeline issue with Vega visualization

Note: The reason I did not want to aggregate the data was to keep the original timestamp (which I did not add into my example above) and I want to generate other charts using the raw data.

What I could think of possibly is that maybe I don't need to aggregate the data and some functionalities exist?

Please advise, thanks a lot in advance!

2

Vega should definitely help here. Did you see if it helps?

Thanks,
Bhavya

3

Vega is also new to me, and yesterday I found it can do the pivot but haven't tried yet.

Will try today, but if you have an example, it will be really helpful.

4

I tried below, but no luck, can you help?

Vega code:

data:{
name:"tables",
values:[
{
"country":"Norway",
"type":"gold",
"count":14
},
{
"country":"Norway",
"type":"silver",
"count":14
},
{
"country":"Norway",
"type":"bronze",
"count":11
},
{
"country":"Germany",
"type":"gold",
"count":14
},
{
"country":"Germany",
"type":"silver",
"count":10
},
{
"country":"Germany",
"type":"bronze",
"count":7
},
{
"country":"Canada",
"type":"gold",
"count":11
},
{
"country":"Canada",
"type":"silver",
"count":8
},
{
"country":"Canada",
"type":"bronze",
"count":10
}
],
"transform":[
{
"type":"pivot",
"groupby":[
"country"
],
"field":"type",
"value":"count"
}
]
}

Here is the output from Chrome Console:

[
{
"country": "Norway",
"type": "gold",
"count": 14
},
{
"country": "Norway",
"type": "silver",
"count": 14
},
{
"country": "Norway",
"type": "bronze",
"count": 11
},
{
"country": "Germany",
"type": "gold",
"count": 14
},
{
"country": "Germany",
"type": "silver",
"count": 10
},
{
"country": "Germany",
"type": "bronze",
"count": 7
},
{
"country": "Canada",
"type": "gold",
"count": 11
},
{
"country": "Canada",
"type": "silver",
"count": 8
},
{
"country": "Canada",
"type": "bronze",
"count": 10
}
]

Not the expected as in this url:

[
  {"country": "Norway",  "gold": 14, "silver": 14, "bronze": 11},
  {"country": "Germany", "gold": 14, "silver": 10, "bronze":  7},
  {"country": "Canada",  "gold": 11, "silver":  8, "bronze": 10},
]

What did I do wrong?

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.