# Want to Create Pie Chart Visualization (Showing Most Popular Browsers)

**URL:** <https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393>\
**Category:** Kibana\
**Created:** [July 12, 2015, 4:16pm UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393 "2015-07-12T16:16:14Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bhutchinson](https://avatars.discourse-cdn.com/v4/letter/b/2acd7d/32.png) [@bhutchinson](https://discuss.elastic.co/u/bhutchinson)\
**Post date:** [July 12, 2015, 4:16pm UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/1 "2015-07-12T16:16:14Z")

</div>

Windows 7  
elasticsearch v1.6.0  
logstash v1.5.2  
kibana v4.1.0  
Apache Access Log file (access\_log)

**Background**  
I have successfully used logstash to import an Apache Access log with the Grok Fitler "COMBINEDAPACHELOG"

I need help creating a simple visualization. I need to create a pie chart that shows the top 5 browser used (agents) with user friendly names. Showing browser name and version. Google Chrome XX.X, Firefox vXX.X, IE9, IE10, IE11, Safari vXX.X

My pie chart visualization criteria  
split slices  
metric tab --\> slice size --\> count  
buckets tab  
aggregation --\> Terms  
field --\> agent  
order --\> top  
size --\> 5  
order by --\> metric: Count

My pie chart legend shows agent names "mozilla", "nt", "windows", "6.1" "trident". I really want more user friendly browser names and browser versions. I am not sure what browser names and versions correspond with Example Google Chrome vXX.X, Firefox vXX.X, Safari, vXX.X, IE9, IE10.

**Question**  
Can someone help me understand how to create my pie chart visualization?

Here is my logstash configuration file that I used to import data from my Apache Access File to elasticsearch.

> input {  
> file {  
> path =\> "c:\websites\elkstack\logs\combinedtuesday"  
> type =\> "apache-access"  
> start\_position =\> "beginning"  
> }  
> }

> filter {  
> grok {  
> match =\> ["message", "%{COMBINEDAPACHELOG}"]  
> }

> date {  
> locale =\> "en"  
> match =\> ["timestamp" , "dd/MMM/YYYY:HH:mm:ss Z"]  
> }  
> }

> output {  
> elasticsearch {  
> host =\> "localhost"  
> cluster =\> "bauer"  
> index =\> "cxp"  
> }

> stdout {  
> codec =\> rubydebug  
> }  
> }

---

<div class="post-metadata">

**Author:** ![warkolm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/warkolm/32/39224_2.png) [@warkolm](https://discuss.elastic.co/u/warkolm)\
**Post date:** [July 12, 2015, 9:57pm UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/2 "2015-07-12T21:57:23Z")

</div>

Check out [https://www.elastic.co/blog/kibana-4-video-tutorials-part-1](https://www.elastic.co/blog/kibana-4-video-tutorials-part-1) for some example videos.

---

<div class="post-metadata">

**Author:** ![bhutchinson](https://avatars.discourse-cdn.com/v4/letter/b/2acd7d/32.png) [@bhutchinson](https://discuss.elastic.co/u/bhutchinson)\
**Post date:** [July 12, 2015, 10:08pm UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/3 "2015-07-12T22:08:04Z")

</div>

Thank you Mark for your reply. I have watched the videos that you mentioned. I guess my challenge is not understanding how to get the Kibana Pie Chart "Legend" to display browser names and versions that as user-friendly names.

Good news is that I have the "agent" field populated in elasticsearch (from my Apache Access Log FIle), but the agent field does not contain browser names and versions like Google Chrome vXX.X, Firefox vXX.X, Safari vXX.X, or IE9, IE10, IE11.

How can I display more user-friendly browser names, versions in my Kibana Pie Chart "Legend"?

---

<div class="post-metadata">

**Author:** ![tbragin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tbragin/32/45166_2.png) [@tbragin](https://discuss.elastic.co/u/tbragin)\
**Post date:** [July 12, 2015, 10:24pm UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/4 "2015-07-12T22:24:49Z")

</div>

This is not currently possible, but is on the roadmap: [https://github.com/elastic/kibana/issues/1896](https://github.com/elastic/kibana/issues/1896)

---

<div class="post-metadata">

**Author:** ![bhutchinson](https://avatars.discourse-cdn.com/v4/letter/b/2acd7d/32.png) [@bhutchinson](https://discuss.elastic.co/u/bhutchinson)\
**Post date:** [July 12, 2015, 10:38pm UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/5 "2015-07-12T22:38:35Z")

</div>

Good to know. Thank you for taking the time to reply.

---

<div class="post-metadata">

**Author:** ![warkolm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/warkolm/32/39224_2.png) [@warkolm](https://discuss.elastic.co/u/warkolm)\
**Post date:** [July 12, 2015, 10:44pm UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/6 "2015-07-12T22:44:20Z")

</div>

Given you are using ELK, use one of the `.raw` fields, it should help.

---

<div class="post-metadata">

**Author:** ![asafyigal](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/asafyigal/32/685_2.png) [@asafyigal](https://discuss.elastic.co/u/asafyigal)\
**Post date:** [July 13, 2015, 5:27am UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/7 "2015-07-13T05:27:10Z")

</div>

@bhutchinson - What does the agent field contain?

We use ELK to monitor our web traffic as you can see [here](http://logz.io/blog/log-analysis-technical-seo/) and we do extract the browser and the version being used and graph it.

-- Asaf.

---

<div class="post-metadata">

**Author:** ![bhutchinson](https://avatars.discourse-cdn.com/v4/letter/b/2acd7d/32.png) [@bhutchinson](https://discuss.elastic.co/u/bhutchinson)\
**Post date:** [July 13, 2015, 1:04pm UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/8 "2015-07-13T13:04:22Z")

</div>

@asafyigal - Thank you for your reply and article. I will check it out.

My pie chart legend shows agent names "mozilla", "nt", "windows", "6.1" "trident". I really want more user friendly browser names and browser versions. I am not sure what browser names and versions correspond with Example Google Chrome vXX.X, Firefox vXX.X, Safari, vXX.X, IE9, IE10. Any idea what I can do to have my legend display more user friendly names like the visualizations that display in the link you provided me?

Here are a couple of lines from my Apache Access Log file. The "agent" field value is the last field value on the line.  
Example "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)"

> 75.78.177.126 - cthibodeaux [21/Jun/2015:00:17:32 -0400] "GET /wps/myportal/WestInteractivePortalDemo/site/HostedIVR HTTP/1.1" 302 - "-" "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)"  
> 75.78.177.126 - cthibodeaux [21/Jun/2015:00:17:35 -0400] "GET /wps/myportal/WestInteractivePortalDemo/site/HostedIVR HTTP/1.1" 200 81441 "-" "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)"

---

<div class="post-metadata">

**Author:** ![asafyigal](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/asafyigal/32/685_2.png) [@asafyigal](https://discuss.elastic.co/u/asafyigal)\
**Post date:** [July 13, 2015, 2:37pm UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/9 "2015-07-13T14:37:26Z")

</div>

@bhutchinson - I am not sure that your data is parsed correctly when entered. This is an example of the data in our system for "agent" and we then break it further - "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.132 Safari/537.36"

This is the config that we're using for apache logs and you can send me a sample raw line and I can take a look - you can email me at [asaf@logz.io](mailto:asaf@logz.io)

> grok {  
> match =\> ["message" , "%{COMBINEDAPACHELOG}+%{GREEDYDATA:extra\_fields}"]  
> overwrite =\> ["message"]  
> }

> ```
> mutate {
> convert => ["response", "integer"]
> convert => ["bytes", "integer"]
> convert => ["responsetime", "float"]
> }
> 
> ```

> ```
> useragent {
> source => "agent"
> }
> 
> ```

-- Asaf.

---

<div class="post-metadata">

**Author:** ![raamee](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/raamee/32/5110_2.png) [@raamee](https://discuss.elastic.co/u/raamee)\
**Post date:** [October 12, 2015, 5:57pm UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/10 "2015-10-12T17:57:03Z")

</div>

**Edit:** Understood and got the resolution 😄

Sorry for bumping old thread, but I think this is nice place to ask rather than creating a new thread.

@asafyigal Could you please explain more? I need to show the browser versions in pie chart and OS version and I don't understand your last reply.

My current filter is

```
grok {
      match => ["message", "(%{IPORHOST:clientip})? %{USER:ident} %{USER:auth} \[%{HTTPDATE:timestamp}\] \"(?:%{WORD:verb} %{NOTSPACE:request}(?: HTTP/%{NUMBER:httpversion})?|%{DATA:rawrequest})\" %{NUMBER:response} (?:%{NUMBER:bytes:int}|-) %{NUMBER:response_time:float} %{QS:referrer} %{QS:agent}" ]
```

---

<div class="post-metadata">

**Author:** ![asafyigal](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/asafyigal/32/685_2.png) [@asafyigal](https://discuss.elastic.co/u/asafyigal)\
**Post date:** [October 13, 2015, 10:20am UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/11 "2015-10-13T10:20:47Z")

</div>

@raamee - You would need to add the useragent filter in order to extract the browser version and the OS.

-- Asaf.

---

<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:** [July 6, 2017, 2:11pm UTC](https://discuss.elastic.co/t/want-to-create-pie-chart-visualization-showing-most-popular-browsers/25393/12 "2017-07-06T14:11:29Z")

</div>


