Example: Charts using JavaScript for apps outside Splunk Web

This example uses JavaScript to display an example of each of the possible chart types.

To use this code, save it as an HTML file in your own web site's directory. Be sure to update the splunkjs.config section for your own web app. The authenticate function redirects to a login_form.html example login page, which you can find here. For more, see Use SplunkJS Stack in your own web apps.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Charts</title>

    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="static/splunkjs/css/dashboard.css"/>
</head>

<body>
    <div class="dashboard-body container-fluid main-section-body">
        <div class="row">
            <div class="dashboard-header">
                <h2>Charts</h2>
            </div>
        </div>

        <div class="dashboard-row">
            <!-- First cell -->
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="panel-head">
                        <h3>Bar</h3>
                    </div>
                    <div class="panel-body">
                        <div id="mybarchart"></div>
                    </div>
                </div>
            </div>
            <!-- Second cell -->
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="panel-head">
                        <h3>Column</h3>
                    </div>
                    <div class="panel-body">
                        <div id="mycolumnchart"></div>
                    </div>
                </div>
            </div>

        </div>

        <div class="dashboard-row">
            <!-- First cell -->
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="panel-head">
                        <h3>Line</h3>
                    </div>
                    <div class="panel-body">
                        <div id="mylinechart"></div>
                    </div>
                </div>
            </div>
            <!-- First cell -->
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="panel-head">
                        <h3>Area</h3>
                    </div>
                    <div class="panel-body">
                        <div id="myareachart"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dashboard-row">
            <!-- Second cell -->
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="panel-head">
                        <h3>Pie</h3>
                    </div>
                    <div class="panel-body">
                        <div id="mypiechart"></div>
                    </div>
                </div>
            </div>

            <!-- Second cell -->
            <div class="dashboard-cell" style="width: 50%;">
                <div class="dashboard-panel">
                    <div class="panel-head">
                        <h3>Scatter</h3>
                    </div>
                    <div class="panel-body">
                        <div id="myscatterchart"></div>
                    </div>
                </div>
            </div>
        </div>

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

    </div>

    <script src="static/splunkjs/config.js"></script>

    <script>
        // Configure SplunkJS Stack
        splunkjs.config({
            proxyPath: "/proxy",
            scheme: "https",
            host: "localhost",
            port: 8089,
            authenticate: function(done) { 
                require([
                    "jquery",
                    "jquery.cookie"
                ], function($) {
                    // Retrieve the session key and username from cookies
                    var splunkSessionKey = $.cookie("splunk_sessionkey");
                    var splunkCurrentUser = $.cookie("splunk_username");

                    // Log in using the session key and username
                    if (splunkSessionKey) {
                        done(null, {sessionKey: splunkSessionKey, username: splunkCurrentUser}); 
                    }
                    // If there is no session key, redirect to the login form
                    else {
                        window.location.replace("login_form.html");
                    }
                });
            }
        });
        
        // Configure the web site's base URL
        require.config({
            baseUrl: "static/"
        });

        // Set up the Web Framework components
        var deps = [
            "splunkjs/ready!",
            "splunkjs/mvc/searchmanager",
            "splunkjs/mvc/chartview"
        ];
        require(deps, function(mvc) {
            // Load individual components
            var SearchManager = require("splunkjs/mvc/searchmanager");
            var ChartView = require("splunkjs/mvc/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);
            });
        });
    </script>
</body>
</html>