The Chart view displays any series of data you want to plot in any of the following configurable chart types:
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. |
drilldownRedirect | true | Indicates 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. |
height | 250 | Height of the chart, in pixels. |
managerid | null | The ID of the search manager to bind this control to. |
resizable | false | Indicates whether the view can be resized. |
type | "column" | The type of chart to create ( line | bar | area | pie | scatter | radialGauge | fillerGauge | markerGauge | column ). |
Name | Description |
render | Draws the control to the screen. Called only when you create the control manually in JavaScript. |
Name | Description |
click:chart | Fired when the chart is clicked. |
click:legend | Fired when the legend is clicked. |
{% chart id="example-chart" managerid="example-search" type="line" %}
<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>