




















































In this article by Vince Sesto, author of the book Learning Splunk Web Framework, we will study adding charts to dashboards. We have a development branch to work from and we are going to work further with the SimpleXMLDashboard dashboard. We should already be on our development server environment as we have just switched over to our new development branch. We are going to create a new bar chart, showing the daily NASA site access for our top educational users. We will change the label of the dashboard and finally place an average overlay on top of our chart:
(For more resources related to this topic, see here.)
cd $SPLUNK_HOME/etc/apps/nasa_squid_web/local/data/ui/views
It is not compulsory to indent and nest your Simple XML code, but it is a good idea to have consistent indentation and commenting to make sure your code is clear and stays as readable as possible.
2 <label>Educational Site Access</label>
17 <row>
18 <panel>
19 <chart>
20 <title>Top Educational User</title>
21 <search>
22 <query>index=main sourcetype=nasasquidlogs | search calclab1.math.tamu.edu | stats count by MonthDay </query>
23 <earliest>0</earliest>
24 <latest></latest>
25 </search>
26 <option name="charting.chart">column</option>
27 <option name="charting.legend.placement">bottom</option>
28 <option name="charting.legend.masterLegend">null</option>
29 <option name="height">250px</option>
30 </chart>
31 </panel>
32 </row>
33 </dashboard>
http://<host:port>/debug/refresh
When we view our page, we should see a new column chart at the bottom of our dashboard showing the usage per day for the calclab1.math.tamu.edu domain.
22 <query>index=main sourcetype=nasasquidlogs | search calclab1.math.tamu.edu | stats count by MonthDay| eventstats avg(count) as average | eval average=round(average,0)</query>
Simple XML contains some special characters, which are ', <, >, and &. If you intend to use advanced search queries, you may need to use these characters, and if so you can do so by either using their HTML entity or using the CDATA tags where you can wrap your query with <![CDATA[ and ]]>.
30 <option name="charting.chart.overlayFields">average</option>
31 <option name="charting.fieldColors">{"count": 0x639BF1, "average":0xFF5A09}</option>
As we can see from our example, it is relatively easy to create and configure our charts using Simple XML. When we completed the chart, we used five options to configure the look and feel of the chart, but there are many more that we can choose from.
Our chart element needs to always be in between its two parent elements, which are row and panel. Within our chart element, we always start with a title for the chart and a search to power the chart. We can then set out additional optional settings for earliest and latest, and then a list of options to configure the look and feel as we have demonstrated below. If these options are not specified, default values are provided by Splunk:
1 <chart>
2 <title></title>
3 <search>
4 <query></query>
5 <earliest>0</earliest>
6 <latest></latest>
7 </search>
8 <option name=""></option>
9 </chart>
There is a long list of options that can be set for our charts; the following is a list of the more important options to know:
A lot of the options seem to be self-explanatory, but a full list of options and a description can be found on the Splunk reference material at the following URL: http://docs.splunk.com/Documentation/Splunk/latest/Viz/ChartConfigurationReference.
We will now go through another example in our NASA Squid and Web Data App to run through a more complex type of visualization to present to our user. We will use the Basic Dashboard that we created, but we will change the Simple XML to give it a more meaningful name, and then set up a map to present to our users where our requests are actually coming from. Maps use a map element and don't rely on the chart element as we have been using.
The Simple XML code for the dashboard we created earlier in this article looks like the following:
<dashboard>
<label>Basic Dashboard</label>
</dashboard>
So let's get to work and give our Basic Dashboard a little "bling":
cd $SPLUNK_HOME/etc/apps/nasa_squid_web/local/data/ui/views
1 <dashboard>
2 <label>Show Me Your Maps</label>
3 <row>
4 <panel>
5 <map>
6 <title>User Locations</title>
7 <search>
8 <query>index=main sourcetype="nasasquidlogs" | search From=1* | iplocation From | geostats latfield=lat longfield=lon count by From</query>
9 <earliest>0</earliest>
10 <latest></latest>
11 </search>
The search query that we have in our Simple XML code is more advanced than the previous queries we have implemented. If you need further details on the functions provided in the query, please refer to the Splunk search documentation at the following location: http://docs.splunk.com/Documentation/Splunk/6.4.1/SearchReference/WhatsInThisManual.
Now all we need to do is close off all our elements, and that is all that is needed to create our new visualization of IP address requests:
visualization of IP address requests:
12 </map>
13 </panel>
14 </row>
15 </dashboard>
If your dashboard looks similar to the image below, I think it looks pretty good. But there is more we can do with our code to make it look even better. We can set extra options in our Simple XML code to zoom in, only display a certain part of the map, set the size of the markers, and finally set the minimum and maximum that can be zoomed into the screen.
The map looks pretty good, but it seems that a lot of the traffic is being generated by users in USA. Let's have a look at setting some extra configurations in our Simple XML to change the way the map displays to our users. Get back to our basic_dashboard.xml file and add the following options:
12 <option name="mapping.data.maxClusters">100</option>
13 <option name="mapping.drilldown">all</option>
14 <option name="mapping.map.center">(38.48,-102)</option>
15 <option name="mapping.map.zoom">4</option>
Your map should now be displaying a little faster than what it originally did. It will be focused on USA, where a bulk of the traffic is coming from. The map element has numerous options to use and configure and a full list can be found at the following Splunk reference page: http://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML.
In this article we covered about Simple XML charts and how to expand our Splunk App with maps.