Building for the Splunk Platform

ChartOverlay in SplunkJS

Path Finder

Hi There,

Can someone tell me what is wrong with my SplunkJS. I have litterally used the exact example from the XML side and I cannot get it to work in the JS side.

All I see is a stacked chart but no line chart - I'm sure I'm doing something wrong.

        proxyPath: splunk_proxy,
        scheme: splunk_scheme,
        host: splunk_host,
        port: splunk_port,
        authenticate: {username: splunk_username, password: splunk_password }

    // Set up the Web Framework components
    var deps = [


    require(deps, function(mvc) {
        var SearchManager = require('splunkjs/mvc/searchmanager');
        var ChartView = require('splunkjs/mvc/chartview');
        var TableView = require('splunkjs/mvc/tableview');

        var search_5 = new SearchManager({
            id: 'search_5',
            preview: true,
            earliest_time:  $('#id_earliest').val(),
            latest_time:  'now',
            search: ' library_type!=NULL change!=NULL | timechart count(path) as "Files" | addtotals fieldname=_Total | streamstats sum(_Total) as Total'

        new ChartView({
            id: 'chart_5',
            managerid: 'search_5',
            el: $('#chart_5'),
            '': 999 ,

            // -- set up alternative palatte for stacked chart, transparancy makes the line chart more visible -- // 
            'charting.transparentBrushPalette': 'solidFill',
            'charting.transparentBrushPalette.colorPalette': '@colorPalette',
            'charting.transparentBrushPalette.alpha': '0.7',

            // -- set chart to use columns 0,1,2,3 where @data is the original 'cube', and 0 is the time-- //
            'charting.data1': 'view',
            'charting.data1.table': '@data',
            'charting.data1.columns': [0,1],
            '': '@data1',

            // -- set chart2 to use columns 0,4,5, where 0 is time, 4 + 5 are data -- //
            'charting.data2': 'view',
            'charting.data2.table': '@data',
            'charting.data2.columns': [0,2],
            '': '@data2',

            // -- splunk doesnt support 2 Y axis, so we have to clone -- //
            'charting.axisY2': '#axisY',                 // -- clone the Yaxis into axisY2 -- //
            'charting.axisLabelsY2': '#axisLabelsY',     // -- clone the Yaxis Labels -- //
            'charting.axisLabelsY2.axis': '@axisY2',     // -- associate the new Y2 axis-labels with the Y2 axis -- //

            // --create the 1st chart -->
            'charting.chart': 'column',
            'charting.chart.columnBrushPalette': '@transparentBrushPalette',
           'charting.chart.stackMode': 'stacked',
            'charting.chart.useAbsoluteSpacing': 'True',
            'charting.chart.columnSpacing': '20',
            'charting.chart.columnAlignment': '.5',
            'charting.axisTitleY.text': 'Files changed over time',
            'charting.axisLabelsY.placement': 'left',
            'charting.axisTitleX.text': 'Month of Year',
            'charting.axisTitleX.visibility': 'collapsed',

            // --create the 2nd chart -- //
            'charting.chart2': 'line',
            'charting.chart2.nullValueMode': 'zero',
            'charting.chart2.axisY': '@axisY2',          // -- the Yaxis of chart 2 is a link to charting.axisY2 -- //
            'charting.axisTitleY2': 'axisTitle',
            'charting.axisTitleY2.text': 'Total',
            'charting.axisLabelsY2.placement': 'right',

            // -- throw the structure to layout -- //
            'charting.layout.charts': ['@chart','@chart2'],
            'charting.layout.axisLabels': ['@axisLabelsX','@axisLabelsY', '@axisLabelsY2'],
            'charting.layout.axisTitles': ['@axisTitleX','@axisTitleY', '@axisTitleY2'],



Tags (2)
0 Karma

Path Finder

The answer is simple. charting.chart.overlayFields. Wish this was documented somewhere..

    new ChartView({
        id: 'chart_5',
        managerid: 'search_5',
        el: $('#chart_5'),
        '': 999 ,
        "charting.chart": 'column',
        "charting.chart.columnAlignment": .5,
        "charting.axisX": 'time',
        "charting.axisLabelsX.majorUnit": 'P1M',
        "charting.axisLabelsX.minorUnit": 'P1M',
        "charting.axisY": 'numeric',
        "charting.axisTitleX.text": 'Month of Year',
        'charting.axisTitleX.visibility': 'collapsed',
        'charting.legend.placement': 'none',
        "charting.axisTitleY.text": 'Files changed over time',
        "charting.axisY2": 'numeric',
        'charting.chart.overlayFields': 'Total'

0 Karma
Get Updates on the Splunk Community!

Streamline Data Ingestion With Deployment Server Essentials

REGISTER NOW!Every day the list of sources Admins are responsible for gets bigger and bigger, often making the ...

Remediate Threats Faster and Simplify Investigations With Splunk Enterprise Security ...

REGISTER NOW!Join us for a Tech Talk around our latest release of Splunk Enterprise Security 7.2! We’ll walk ...

Introduction to Splunk AI

WATCH NOWHow are you using AI in Splunk? Whether you see AI as a threat or opportunity, AI is here to stay. ...