Example: Charts using JavaScript in a template

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

[example]

To use this code, save it as an HTML file under an existing app in $SPLUNK_HOME/etc/apps/app_name/django/app_name/templates, then view the page in Splunk. For example, to view mypage.html in mysplunkapp, go to http://localhost:8000/dj/mysplunkapp/mypage. For more about creating an app, see How to create a Web Framework app using SplunkJS Stack.

{% extends 'splunkdj:base_with_app_bar.html' %}

{% load splunkmvc %}

{% block title %}Charts (JavaScript){% endblock title %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}{{app_name}}/custom.css" />
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css" />
{% endblock css %}

{% block content %}
<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>
{% endblock content %}

{% block js %}
<script>
    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: "-5s", 
            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>
{% endblock js %}