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. For a list of charting properties, see the Chart Configuration Reference. Note that the properties for Flash-only charts are not supported. | |
| 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 "250px" | Height of the chart, in pixels. Can be a Number or a String. |
| 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 ( area | bar | bubble | column | fillerGauge | line | markerGauge | pie | radialGauge| scatter ). |
| settings | The properties of the view. See the methods below to get and set values. |
Note: When setting properties for a ChartElement wrapper, you might need to prepend "charting" to the property name, for example "charting.drilldown".
Name | Description |
| render | Draws the control to the screen. Called only when you create the view manually. |
| settings.get( property ) | Returns the value of property for the current component. |
| settings.set( property, value ) | Sets the value of property to the specified value for the current component. |
Name | Description |
| click:chart | Fired when the chart is clicked. |
| click:legend | Fired when the legend is clicked. |
require([
"splunkjs/mvc/chartview",
"splunkjs/mvc/simplexml/ready!"
], function(ChartView) {
// Instantiate components
var 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
});
});