Line Timechart drilldown question, how to get value from timechart for permalink panel at the same dashboard?

[axl88]

Hi, I am trying to modify "Splunk 6 Dashboard Examples" application -> drilldown elements -> In-Page Drilldown with Perma-Linking. it is gonna be a long explanation.

my xml code is like below:
<form><label>Deneme</label><description>Saved Dashboard to Application</description>
<fieldset submitButton="false">
<input type="text" token="sourcetype" searchWhenChanged="true" />
</fieldset>
<row>
<chart id="master">
<title>Master</title>
<searchString>index=generalErrorLog| stats count by sourcetype</searchString>
<earliestTime>-30d@d</earliestTime>
<latestTime>now</latestTime>
<option name="charting.drilldown">all</option>
<option name="charting.chart">line</option><row>
</row>
<row>
<chart id="detail">
<title>Detail: $sourcetype$</title>
<searchTemplate>index=generalErrorLog sourcetype=$sourcetype$ | timechart count</searchTemplate>
<earliestTime>-30d@d</earliestTime>
<latestTime>now</latestTime>
</chart>
</row>
</form>

And my JavaScript code is as following:

require(['jquery','underscore','splunkjs/mvc','util/console','splunkjs/mvc/simplexml/ready!'], function($, _, mvc, console){    
// Get a reference to the dashboard panels
var masterView = mvc.Components.get('master');
var detailView .........

if(!submittedTokens.has('source')) {
    // if there's no value for the $sourcetype$ token yet, hide the dashboard panel of the detail view
    detailView.$el.parents('.dashboard-panel').hide();
}'

submittedTokens.on('change:sourcetype', function(){
    alert("submitted tokens ON");

    // When the token changes...
    if(!submittedTokens.get('sourcetype')) {
        // ... hide the panel if the token is not defined
        //alert("no token");
        detailView.$el.parents('.dashboard-panel').hide();
    } else {
        alert("got a token");
        // ... show the panel if the token has a value
        detailView.$el.parents('.dashboard-panel').show();
    }
});
masterView.on('click', function(e) {
    alert("click function is ON");
    e.preventDefault();
    //**I suspect the function below.**
    var newValue = e.data['row.sourcetype'];
    alert("Sourcetype: "+ newValue);
    detailView.$el.parents('.dashboard-panel').show();
    // Submit the value for the source field
    unsubmittedTokens.set('form.sourcetype', newValue);
    submittedTokens.set(unsubmittedTokens.toJSON());
    urlTokens.saveOnlyWithPrefix('form\\.', unsubmittedTokens.toJSON(), {
        replaceState: false
    });
});

Above code works

As you can see in Js code, that I m checking value passes between panels with alert() function. When same code above works with "stats" responding to the Js Function:

var newValue = e.data['row.sourcetype'];

it doesn't work with timechart. "row.sourcetype" returns "UNDEFINED" when I click on line or sourcetype values on the right side of the panel.
I tried couple combinations like column.sourcetype 🙂 so far it didn't work out.

So that wise guy with the information, I need your help again. Thank you all for your time.
Edit1: Grammar
Edit2: Snapshot to visualize - I need the sourcetype value @ detail panel

[jklumpp_splunk · Accepted solution]

I believe you have a couple problems here. First is that charts have different listeners than tables. You are using 'click' when you should either be using click:chart or click:legend. Also the variables are different. You should be using e.value or e.name2 respectively. Check out this example from the SplunkJS documentation... How to listen for events on views using SplunkJS Stack

[axl88]

Sorry for late response, your advice is correct for my question. thnx