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.)

Get into the local directory of our Splunk App, and into the views directory where all our Simple XML code is for all our dashboards:
```
cd $SPLUNK_HOME/etc/apps/nasa_squid_web/local/data/ui/views
```

We are going to work on the simplexmldashboard.xml file. Open this file with a text editor or your favorite code editor. Don't forget, you can also use the Splunk Code Editor if you are not comfortable with other methods.

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.

Let's start by changing the name of the dashboard that is displayed to the user. Change line 2 to the following line of code (don't include the line numbers):
```
2   <label>Educational Site Access</label>
```

Move down to line 16 and you will see that we have closed off our row element with a </row>. We are going to add in a new row where we will place our new chart. After the sixteenth line, add the following three lines to create a new row element, a new panel to add our chart, and finally, open up our new chart element:
```
17   <row>
     18     <panel>
     19       <chart>
```

The next two lines will give our chart a title and we can then open up our search:
```
20         <title>Top Educational User</title>
     21         <search>
```

To create a new search, just like we would enter in the Splunk search bar, we will use the query tag as listed with our next line of code. In our search element, we can also set the earliest and latest times for our search, but in this instance we are using the entire data source:
```
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>
```

We have completed our search and we can now modify the way the chart will look on our panel with the option chart elements. In our next four lines of code, we set the chart type as a column chart, set the legend to the bottom of the chart area, remove any master legend, and finally set the height as 250 pixels:
```
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>
```

We need to close off the chart, panel, row, and finally the dashboard elements. Make sure you only close off the dashboard element once:
```
30       </chart>
     31     </panel>
     32   </row>
     33 </dashboard> 
```

We have done a lot of work here. We should be saving and testing our code for every 20 or so lines that we add, so save your changes. And as we mentioned earlier in the article, we want to refresh our cache by entering the following URL into our browser:
```
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.

But we’re not done with that chart yet. We want to put a line overlay showing the average site access per day for our user. Open up simplexmldashboard.xml again and change our query in line 22 to the following:
```
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 ]]>.

We now need to add two new option lines into our Simple XML code. After line 29, add the following two lines, without replacing all of the closing elements that we previously entered. The first will set the chart overlay field to be displayed for the average field; the next will set the color of the overlay:
```
30         <option name="charting.chart.overlayFields">average</option>
     31         <option name="charting.fieldColors">{"count": 0x639BF1, "average":0xFF5A09}</option>   
```

Save your new changes, refresh the cache, and then reload your page. You should be seeing something similar to the following screenshot:

The Simple XML of charts

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:

charting.chart: This is where you set the chart type, with area, bar, bubble, column, fillerGauge, line, markerGauge, pie, radialGauge, and scatter being the charts that you can choose from.

charting.backgroudColor: Set the background color of your chart with a Hex color value.

charting.drilldown: Set to either all or none. This allows the chart to be clicked on to allow the search to be drilled down for further information.

charting.fieldColors: This can map a color to a field as we did with our average field in the preceding example.

charting.fontColor: Set the value of the font color in the chart with a Hex color value.

height: The height of the chart in pixels. The value must be between 100 and 1,000 pixels.

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.

Expanding our Splunk App with maps

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":

Get into the local directory of our Splunk App, and into the views directory where all our Simple XML code is for our Basic Dashboard:
```
cd $SPLUNK_HOME/etc/apps/nasa_squid_web/local/data/ui/views
```

Open the basic_dashboard.xml file with a text editor or your favorite code editor. Don't forget, you can also use the Splunk Code Editor if you are not comfortable with other methods.

We might as well remove all of the code that is in there, because it is going to look completely different than the way it did originally.

Now start by setting up your dashboard and label elements, with a label that will give you more information on what the dashboard contains:
```
1 <dashboard>
2   <label>Show Me Your Maps</label>
```

Open your row, panel, and map elements, and set a title for the new visualization. Make sure you use the map element and not the chart element:
```
3   <row>
    4     <panel>
      5       <map>
       6         <title>User Locations</title>      
```

We can now add our search query within our search elements. We will only search for IP addresses in our data and use the geostats Splunk function to extract a latitude and longitude from the data:

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.

adding-charts-dashboards-img-1

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:

After our search element is closed off, we can add the following options. First we will set the maximum clusters to be displayed on our map as 100. This will hopefully speed up our map being displayed, and allow all the data points to be viewed further with the drilldown option:
```
    12         <option name="mapping.data.maxClusters">100</option>
13         <option name="mapping.drilldown">all</option>
```

We can now set our central point for the map to load using latitude and longitude values. In this instance, we are going to set the heart of USA as our central point. We are also going to set our zoom value as 4, which will zoom in a little further from the default of 2:
```
    14         <option name="mapping.map.center">(38.48,-102)</option>
15         <option name="mapping.map.zoom">4</option>
```

Remember that we need to have our map, panel, row, and dashboard elements closed off. Save the changes and reload the cache. Let's see what is now displayed:

adding-charts-dashboards-img-2

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.