Dashboards & Visualizations

Example Of Chart Overlay ?

john_loch
Explorer

Hi Folks,

I'm trying to find an example of a view with chart overlays. Basically I want to take a chart with Y axis on Left, then a Y axis on right, and overlay the two..

The docs suggest this exact scenario but fall short of an actual example.

Can anyone provide an example of the XML you would use to do this please ?

Thanks in advance 🙂

Tags (3)
1 Solution

bbingham
Builder

Here's another example that's very similar to the one above:

    <module name="HiddenSavedSearch" layoutPanel="panel_row5_col1" group="Rolling Claim Data" autoRun="True">
            <param name="savedSearch">HTAnalytics_RollingDelta_Data</param>
            <module name="HiddenChartFormatter">
                    <param name="charting.chart">column</param>
                    <param name="charting.chart.columnAlignment">.5</param>
                    <param name="charting.axisX">time</param>
                    <param name="charting.axisLabelsX.majorUnit">P1M</param>
                    <param name="charting.axisLabelsX.minorUnit">P1M</param>
                    <param name="charting.axisY">numeric</param>
                    <param name="charting.axisY.minimumNumber">-80</param>
                    <param name="charting.axisY.maximumNumber">80</param>
                    <param name="charting.axisTitleX.text">Month of Year</param>
                    <param name="charting.axisTitleY.text">Percent Increase/Decrease</param>
                    <param name="charting.axisY2">numeric</param>
                    <param name="charting.axisY2.minimumNumber">-80</param>
                    <param name="charting.axisY2.maximumNumber">80</param>
                    <param name="charting.axisLabelsY2">#axisLabelsY</param>
                    <param name="charting.axisLabelsY2.axis">@axisY2</param>
                    <param name="charting.axisLabelsY2.placement">right</param>
                    <param name="charting.data0">results</param>
                    <param name="charting.data0.jobID">@data.jobID</param>
                    <param name="charting.data1">view</param>
                    <param name="charting.data1.table">@data0</param>
                    <param name="charting.data1.columns">[0,1]</param>
                    <param name="charting.data2">view</param>
                    <param name="charting.data2.table">@data0</param>
                    <param name="charting.data2.columns">[0,2]</param>
                    <param name="charting.chart.data">@data1</param>
                    <param name="charting.chart2">line</param>
                    <param name="charting.chart2.axisY">@axisY2</param>
                    <param name="charting.chart2.data">@data2</param>
                    <param name="charting.layout.charts">[@chart,@chart2]</param>
                    <param name="charting.layout.axisTitles">[@axisTitleX,@axisTitleY,@axisTitleY2]</param>
                    <module name="FlashChart">
                            <param name="height">600px</param>
                    </module>
            </module>
    </module>

This module creates a 2 separate types of graphs and places them on top one another based on 1 input series. The first chart builds a column chart based on the 1 "column" of the series and the second chart builds a line chart based on the second series. Basically a table like this:

Month_Of_Year      ColumnChart(incrase/decrease)         LineChart(rolling average)
Jan                           %10                                  .5%
Feb                           %15                                  .5%
Mar                           %20                                   5%
Apr                           %05                                  10%
May                          -%10                                  -1%
Jun                           %50                                  .5%
Jly                           %20                                  .5%
Aug                          -%20                                  .5%
Sep                          -%50                                  .5%

etc, and here's the sample chart: SampleChart

Here's how it works:

Create a base module using a saved search for my data:

    <module name="HiddenSavedSearch" layoutPanel="panel_row5_col1" group="Rolling Claim Data" autoRun="True">
            <param name="savedSearch">HTAnalytics_RollingDelta_Data</param>

Next, take the results from that search and format a chart, in this case, the first chart, our column chart:

            <module name="HiddenChartFormatter">
                    <param name="charting.chart">column</param>
                    <param name="charting.chart.columnAlignment">.5</param>
                    <param name="charting.axisX">time</param>
                    <param name="charting.axisLabelsX.majorUnit">P1M</param>
                    <param name="charting.axisLabelsX.minorUnit">P1M</param>
                    <param name="charting.axisY">numeric</param>
                    <param name="charting.axisY.minimumNumber">-80</param>
                    <param name="charting.axisY.maximumNumber">80</param>
                    <param name="charting.axisTitleX.text">Month of Year</param>
                    <param name="charting.axisTitleY.text">Percent Increase/Decrease</param>

Now lets adjust the some base settings for our second (line) chart's axis's:

                    <param name="charting.axisY2">numeric</param>
                    <param name="charting.axisY2.minimumNumber">-80</param>
                    <param name="charting.axisY2.maximumNumber">80</param>
                    <param name="charting.axisLabelsY2">#axisLabelsY</param>
                    <param name="charting.axisLabelsY2.axis">@axisY2</param>
                    <param name="charting.axisLabelsY2.placement">right</param>

Now we need to tell splunk how to get the data for each chart:

                    <param name="charting.data0">results</param>
                    <param name="charting.data0.jobID">@data.jobID</param>

The 2 lines above tell splunk to use the base data from the saved search and send it to a new definition data0

After Data0's defined, we're going to establish which columns are used for what chart:

                    <param name="charting.data1">view</param>
                    <param name="charting.data1.table">@data0</param>
                    <param name="charting.data1.columns">[0,1]</param>

The above tells splunk to create another definition "data1", pull the results from data0, but only to pull first column for the xaxis (time) and then only the 1 column of data in the series.

Now do the same thing for our line chart, but tell splunk to use the 2nd column in the series for the line:

                    <param name="charting.data2">view</param>
                    <param name="charting.data2.table">@data0</param>
                    <param name="charting.data2.columns">[0,2]</param>

Now establish the column chart to use our new data source for it's input:

                    <param name="charting.chart.data">@data1</param>

I then tell the 2nd chart to be a line chart, and I give it a hidden axis incase I ever want to change the scale of my line graph (defined earlier with axisY2):

                    <param name="charting.chart2">line</param>
                    <param name="charting.chart2.axisY">@axisY2</param>

Lastly I set the input mode for the 2nd chart:

                    <param name="charting.chart2.data">@data2</param>

Then tell the layout portion of the charting module to draw2 charts:

                    <param name="charting.layout.charts">[@chart,@chart2]</param>

And then to build my custom axis:

                    <param name="charting.layout.axisTitles">[@axisTitleX,@axisTitleY,@axisTitleY2]</param>

And lastly, draw the graph:

                    <module name="FlashChart">
                            <param name="height">600px</param>
                    </module>
            </module>
    </module>

Hope this helps!

View solution in original post

Get Updates on the Splunk Community!

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...