ChartView

The Chart view

Description

The Chart view displays any series of data you want to plot in any of the following configurable chart types:

Documentation

Library path

Simple XML wrapper

Properties

Name

Default value

Description

id Required. The unique ID for this control.
charting.* Splunk JSChart library properties. Must be set in JavaScript. For a list of charting properties, see the Chart Configuration Reference.
data"preview"The type of data to retrieve from the search results
results | preview | events ).
drilldown"all"Indicates whether drilldown is enabled. Possible values are "all" to enable drilldown, or "none" to disable it.
drilldownRedirecttrueIndicates whether to redirect to a search page when clicked. When true, a refined search corresponding to the point that was clicked is displayed in the search app. When false, you must create a click event handler to define a drilldown action. You can also use the preventDefault method in the click event handler to bypass the default redirect to search.
height250Height of the chart, in pixels.
manageridnullThe ID of the search manager to bind this control to.
resizablefalseIndicates whether the view can be resized.
type"column"The type of chart to create
line | bar | area | pie | scatter | radialGauge | fillerGauge | markerGauge | column ).

Methods

Name

Description

renderDraws the control to the screen. Called only when you create the control manually in JavaScript.

Events

Name

Description

click:chartFired when the chart is clicked.
click:legendFired when the legend is clicked.

Example (Django tag)

{% chart id="example-chart" managerid="example-search" type="line" %}

Example (JavaScript)

<script>
    var deps = [
        "splunkjs/ready!",
        "splunkjs/mvc/chartview"
    ];
    require(deps, function(mvc) {
        var ChartView = require("splunkjs/mvc/chartview");

        // Instantiate components
        barchart = new ChartView({
            id: "example-chart",
            managerid: "example-search",
            type: "bar",
            "charting.chart.stackMode": "stacked", // Place complex property names within quotes
            "charting.legend.placement": "bottom",
            el: $("#mybarchart")
        }).render();

        // Respond to a click event
        barchart.on("click:chart", function (e) {
            e.preventDefault(); // Prevent redirecting to the Search app
            console.log("Clicked chart: ", e); // Print event info to the console
        });

    });
</script>

Code examples