# Custom Dashboard in kibana

**URL:** https://discuss.elastic.co/t/custom-dashboard-in-kibana/176070
**Category:** Kibana
**Tags:** canvas
**Created:** [April 9, 2019, 4:44pm UTC](https://discuss.elastic.co/t/custom-dashboard-in-kibana/176070 "2019-04-09T16:44:52Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![syedsfayaz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/syedsfayaz/32/46657_2.png) [@syedsfayaz](https://discuss.elastic.co/u/syedsfayaz)
#### Post date: [April 9, 2019, 4:44pm UTC](https://discuss.elastic.co/t/custom-dashboard-in-kibana/176070/1 "2019-04-09T16:44:53Z")

</div>

Hi

I am trying to create a dashboard to monitor different components of our software, migrating from one environment to another.

```auto
Package A

Dev --> test --> QA --> UAT --> Prod

Package B

Dev --> test --> QA --> UAT --> Prod

Package C

Dev --> test --> QA --> UAT --> Prod

Package D

Dev --> test --> QA --> UAT --> Prod

```

Each package has different jenkins jobs in different environment which performs certain tasks. I want to show this flow on Kibana dashboard.

I was told there is a way to get data in to Elasticsearch using jenkins api via metric beats.

> [@Get jenkins jobs data in to elastic search](https://discuss.elastic.co/t/get-jenkins-jobs-data-in-to-elastic-search/175951/4):
>
> Take a look at [https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-module-http.html](https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-module-http.html)

Can I create Custom Dashboard.  
3. I have seen Canvas demonstration. Can I use this feature to create custom dashboard. Which fits my needs. I don't need graphs or any other things coz I want to show only current state of job(Success, Failure, Progress). I also want to show some ${build variables} like build number, timestamp, package name. etc.

Attached Sample image just for understanding. I am open to suggestions to take a different approach.

 ![Dashboard_SecondPage2](https://us1.discourse-cdn.com/elastic/original/3X/a/8/a8d6dd08be57e9a245aaaa66681044ec30d2922f.jpeg)

---

<div class="post-metadata">

### Author: ![Marius\_Dragomir](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marius_dragomir/32/42087_2.png) [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)
#### Post date: [April 12, 2019, 10:11am UTC](https://discuss.elastic.co/t/custom-dashboard-in-kibana/176070/2 "2019-04-12T10:11:49Z")

</div>

Canvas is indeed the best method of achieving this. This is a good resource to get started with: [https://www.elastic.co/webinars/intro-to-canvas-a-new-way-to-tell-visual-stories-in-kibana](https://www.elastic.co/webinars/intro-to-canvas-a-new-way-to-tell-visual-stories-in-kibana)

---

<div class="post-metadata">

### Author: ![syedsfayaz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/syedsfayaz/32/46657_2.png) [@syedsfayaz](https://discuss.elastic.co/u/syedsfayaz)
#### Post date: [April 12, 2019, 3:42pm UTC](https://discuss.elastic.co/t/custom-dashboard-in-kibana/176070/3 "2019-04-12T15:42:33Z")

</div>

@Marius_Dragomir Thanks for your response.

I have two questions.

1. Before creating one dashboard on canvas. Is there a way I can upload my test.js file to elastic search to check if it works. Each jenkins job gives me one json file. I want to upload one to elastic search and use it as a datasource to create a sample dashboard.

2. I was looking at markdown. But I see it only in rectangular shape. Is there a way can change the shape to like the above in image. Or any shape. Do we have that flexibility? If yes, Can you guide me where I can.

---

<div class="post-metadata">

### Author: ![Marius\_Dragomir](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marius_dragomir/32/42087_2.png) [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)
#### Post date: [April 16, 2019, 11:40am UTC](https://discuss.elastic.co/t/custom-dashboard-in-kibana/176070/4 "2019-04-16T11:40:31Z")

</div>

1. Yeah, just use the API calls to add a document in Elasticsearch.
2. You can create any object in Canvas. if you look at the examples there's even bottle shaped boxes and so on.

---

<div class="post-metadata">

### Author: ![syedsfayaz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/syedsfayaz/32/46657_2.png) [@syedsfayaz](https://discuss.elastic.co/u/syedsfayaz)
#### Post date: [April 17, 2019, 4:28am UTC](https://discuss.elastic.co/t/custom-dashboard-in-kibana/176070/5 "2019-04-17T04:28:53Z")

</div>

@Marius_Dragomir I was looking at expression editor. May I know what Programming language is used in Expression editor on Canvas. Is it Basic HTML/Css or some thing else.

---

<div class="post-metadata">

### Author: ![Marius\_Dragomir](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marius_dragomir/32/42087_2.png) [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)
#### Post date: [April 19, 2019, 10:21am UTC](https://discuss.elastic.co/t/custom-dashboard-in-kibana/176070/6 "2019-04-19T10:21:57Z")

</div>

It's a custom expression language, for which you can find documentation here: [https://www.elastic.co/guide/en/kibana/current/canvas-function-reference.html](https://www.elastic.co/guide/en/kibana/current/canvas-function-reference.html)

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)
#### Post date: [May 17, 2019, 10:21am UTC](https://discuss.elastic.co/t/custom-dashboard-in-kibana/176070/7 "2019-05-17T10:21:57Z")

</div>

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