HI, This is an example of bar chart with values above enter code here
// THIS IS AN EXAMPLE OF BAR CHART WITH VALUES ON TOP
// XML CODE:
<dashboard script="custom_chart.js, autodiscover.js" stylesheet="custom_chart.css">
<label>Custom Chart Overlay</label>
<row grouping="2">
<html>
<h2>Line + Bar Chart</h2>
<div id="chart1" />
</html>
<table id="table1">
<searchString>index=_internal | stats count by sourcetype</searchString>
<earliestTime>0</earliestTime>
<latestTime>now</latestTime>
</table>
</row>
</dashboard>
// Js CODE:
/*
* A custom chart example based on the d3chartview of the web framework.
* The component is initialized in Javascript which provides more flexibility and formatting options.
*/
require([
'underscore',
'jquery',
'splunkjs/mvc/utils',
'splunkjs/mvc',
'splunkjs/mvc/d3chart/d3chartview',
'util/moment',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, utils, mvc, D3ChartView, moment) {
// Re-use the search manager of the results table
var tableManagerid = mvc.Components.get('table1').settings.get('managerid');
// Create the D3 chart view
var bar_chart = new D3ChartView({
"id": "chart1",
"managerid": tableManagerid,
"type": "discreteBarChart",
"el": $('#chart1')
}).render();
bar_chart.settings.set("setup", function(chart) {
// Configure chart formatting
chart.color(d3.scale.category10().range());
//chart.margin({right: 100, left: 80, top: 70, bottom: 70 });
chart.staggerLabels(true);
chart.showValues(true);
});
});
// CSS CODE:
#chart1, #chart2 {
height: 450px;
}
NOTE:To test it copie custom_chart.js and custom_chart.css in Splunk_etc_apps_AppName_appserver_static
And create a dashboar in your App with the XML CODE.
... View more