Adding charts to dashboards

We now have a development branch to work from and we are now 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 user. We will change the label of the dashboard, and finally we will place an average overlay on top of our chart:

1. We go 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 
   

2. 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 that you can also use the Splunk Code Editor if you are not comfortable with the other methods.

   Tip

   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.

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

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

           17   <row> 
           18     <panel> 
           19       <chart>
   

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

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

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

8. Finally, we need to close off the chart, panel, row and dashboard elements. Make sure you only close off the dashboard element once:

         30       </chart> 
         31     </panel> 
         32   </row> 
         33 </dashboard>  
   

9. 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 chapter, we want to refresh our cache by entering the following URL in our browser: http://<host:port>/debug/refresh.
10. 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.
11. 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 the simplexmldashboard.xml file again and change the 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> 
    

    Tip

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

12. We now need to add two new option lines into our Simple XML code. After line 29, add the following new lines without replacing all 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> 
    

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