Is it possible to show values in the column/bar ch...

Parameshwara · ‎08-25-2014

Checked the documentation of latest Splunk, and this function still not available. Anyone managed to get values showing on Column/Bar Chart?

stephane_cyrill · ‎12-17-2014

HI, This is an example of bar chart with values aboveenter 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.

nabeel652 · ‎08-18-2015

The code woks fine but there is a slight mistake

in custom_chart.js replace mvc.Components.get('table1') with mvc.Components.get('chart1') as chart1 is the id of the chart to apply style on. Cheers

bharathkumarnec · ‎01-11-2016

Code working as is with out making changes "place mvc.Components.get('table1') with mvc.Components.get('chart1') as chart1", ensure you have d3.js script in the same app from where you are saving these custom js & css scripts.

giancarlobergam · ‎04-27-2015

The same to me: there's no values displayed on top at every bar

kmcarrol · ‎04-21-2015

Not sure if I'm doing something wrong, but I stored custom_chart.js and custom_chart.css in C:\Program Files\Splunk\etc\apps\search\static but I don't get a chart at all when I create a dashboard with the XML source above. The search runs fine but there is no chart.

HattrickNZ · ‎03-10-2015

@stephane_cyrille where do i get custom_chart.js and custom_chart.css from?

HattrickNZ · ‎03-10-2015

oh how silly of me 🙂 is it code under // Js CODE: goes into custom_chart.js
and code under // CSS CODE: goes into custom_chart.css

Is it possible to show values in the column/bar chart?

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life