ChartOverlay in SplunkJS

[sklass]

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.

    splunkjs.config({
        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 = [
        'splunkjs/ready!',
        'splunkjs/mvc/searchmanager',
        'splunkjs/mvc/searchmanager',
        'splunkjs/mvc/chartview',
        'splunkjs/mvc/timelineview',
        'splunkjs/mvc/tableview'

    ];

    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'),
            'charting.data.count': 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],
            'charting.chart.data': '@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],
            'charting.chart2.data': '@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'],

        }).render();
    });

Thanks

[sklass]

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

    new ChartView({
        id: 'chart_5',
        managerid: 'search_5',
        el: $('#chart_5'),
        'charting.data.count': 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'

    }).render();