Example: Charts using a Simple XML extension

This example uses a Simple XML extension to display an example of each of the possible chart types.

[example]

To use this code:

  1. Save the XML file under an existing app in $SPLUNK_HOME/etc/apps/app_name/local/data/ui/views/.
  2. Save the JS file under $SPLUNK_HOME/etc/apps/app_name/appserver/static/.
  3. Restart Splunk.
  4. Open Splunk Web and view the dashboard in your app. For example, to view myexample in mysplunkapp, go to http://<localhost:port>/app/mysplunkapp/myexample.

example_chart.xml

<dashboard script="example_chart.js" >
    <label>Charts</label>
    <row>
        <panel>
            <html>
                <table class="table">
                    <tr>
                        <!-- First cell -->
                        <td style="width: 50%;">
                            <h3>Bar</h3>
                            <div id="mybarchart"></div>
                        </td>
                        <!-- Second cell -->
                        <td style="width: 50%;">
                            <h3>Column</h3>
                            <div id="mycolumnchart"></div>
                        </td>
                    </tr>

                    <tr>
                        <!-- First cell -->
                        <td style="width: 50%;">
                            <h3>Line</h3>
                            <div id="mylinechart"></div>
                        </td>
                        <!-- First cell -->
                        <td style="width: 50%;">
                            <h3>Area</h3>
                            <div id="myareachart"></div>
                        </td>
                    </tr>

                    <tr>
                        <!-- Second cell -->
                        <td style="width: 50%;">
                            <h3>Pie</h3>
                            <div id="mypiechart"></div>
                        </td>

                        <!-- Second cell -->
                        <td style="width: 50%;">
                            <h3>Scatter</h3>
                            <div id="myscatterchart"></div>
                        </td>
                    </tr>

                    <tr>
                        <!-- first cell -->
                        <td style="width: 33%;">
                            <h3>Radial Gauge</h3>
                            <div id="myrgchart"></div>
                        </td>
                        <!-- Second cell -->
                        <td style="width: 33%;">
                            <h3>Marker Gauge</h3>
                            <div id="mymgchart"></div>
                        </td>
                        <!-- Third cell -->
                        <td style="width: 33%;">
                            <h3>Filler Gauge</h3>
                            <div id="myfgchart"></div>
                        </td>
                    </tr>
                </table>
            </html>
        </panel>
    </row>
</dashboard>

example_chart.js

require([
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/chartview",
    "splunkjs/mvc/simplexml/ready!"
], function(
   SearchManager,
   ChartView
) {

    // Set up search managers
    var search1 = new SearchManager({
        id: "example-search",
        search: "index=_internal | head 10000 | timechart count by bytes limit=10",
        preview: true,
        cache: true
    });

    var search2 = new SearchManager({
        id: "example-search-gauge",
        search: "index=_internal | stats count",
        earliest_time: "-15s",
        latest_time: "now",
        preview: true,
        cache: true
    });

    // Set up the charts
    barchart = new ChartView({
        id: "example-bar-chart",
        managerid: "example-search",
        "charting.chart.stackMode": "stacked",
        "charting.legend.placement": "bottom",
        type: "bar",
        el: $("#mybarchart")
    }).render();

    linechart = new ChartView({
        id: "example-chart-line",
        managerid: "example-search",
        type: "line",
        "charting.legend.placement": "bottom",
        el: $("#mylinechart")
    }).render();

    piechart = new ChartView({
        id: "example-chart-pie",
        managerid: "example-search",
        type: "pie",
        "charting.chart.showPercent": true,
        el: $("#mypiechart")
    }).render();

    areachart = new ChartView({
        id: "example-chart-area",
        managerid: "example-search",
        type: "area",
        el: $("#myareachart")
    }).render();

    scatterchart = new ChartView({
        id: "example-chart-scatter",
        managerid: "example-search",
        type: "scatter",
        el: $("#myscatterchart")
    }).render();

    columnchart = new ChartView({
        id: "example-chart-column",
        managerid: "example-search",
        type: "column",
        "charting.chart.stackMode": "stacked100",
        el: $("#mycolumnchart")
    }).render();

    fillergaugechart = new ChartView({
        id: "example-chart-fg",
        managerid: "example-search-gauge",
        type: "fillerGauge",
        el: $("#myfgchart")
    }).render();

    markergaugechart = new ChartView({
        id: "example-chart-mg",
        managerid: "example-search-gauge",
        type: "markerGauge",
        el: $("#mymgchart")
    }).render();

    radialgaugechart = new ChartView({
        id: "example-chart-rg",
        managerid: "example-search-gauge",
        type: "radialGauge",
        el: $("#myrgchart")
    }).render();

    // Respond to a click event on the bar chart
    barchart.on("click:chart", function (e) {
        e.preventDefault();
        console.log("Clicked chart: ", e);
    });

});