Using SplunkJS to build a bar chart with expected Drilldown

[MikeJu25]

Hi,

I want to build a bar chart that shows the anomaly_count for each data_source in JS. But I also want to keep the database_id field to be used in the drilldown. Using the search query below, I got a chart looks like this

 

, where database_id is also counted. How can I hide the database_id field in the chart but use it as a key to drill down to another dashboard?

index=\"assets_py\" asset_type=database | fields data_source, anomaly_count", database_id | fields - _time _cd _bkt _indextime _raw _serial _si _sourcetype

This is my JS code for drilldown: 

anomalycountchart.on("click", function(e) {
        e.preventDefault();      
        tokenSet.set("databaseID_tok", "");        
        utils.redirect("anomaly?databaseID_tok="+e.data['row.database_id']); 
    });

 Thank you in advance! 

[kamlesh_vaghela · Accepted solution]

@MikeJu25 

For removing database_id from your chart you need to remove the field from the results. And you cannot access the field which is not available in results.

Well for this situation I would like you to go with base search mechanism to have search executed once and used for both purpose. 

Can you please try below code for same?

<dashboard script="a.js">
  <label>Bar Chart Drilldown</label>
  <search id="base_search">
    <query>| makeresults | eval _raw="data_source, anomaly_count, database_id
DB1,100,1_0
DB2,50,2_0
DB3,40,3_0" | multikv forceheader=1 | table data_source, anomaly_count, database_id</query>
    <earliest>-24h@h</earliest>
    <latest>now</latest>
    <sampleRatio>1</sampleRatio>
  </search>
  <row>
    <panel>
      <chart id="anomalycountchart">
        <search base="base_search">
          <query>| table data_source, anomaly_count</query>
        </search>
        <option name="charting.chart">bar</option>
        <option name="charting.drilldown">all</option>
        <drilldown>
          <condition></condition>
        </drilldown>
      </chart>
    </panel>
  </row>
</dashboard>

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
    var tokenSet = mvc.Components.get("default");
    var utils = require("splunkjs/mvc/utils");
    var data = [],
        fields = [];
    var anomalycountchart = mvc.Components.get('anomalycountchart');
    var mySearch = mvc.Components.get("base_search");
    mySearch.on('search:done', function(properties) {
        var myResults = mySearch.data("results");
        myResults.on("data", function() {
            fields = myResults.data().fields;
            data = myResults.data().rows;
            console.log(fields);
            console.log(data);
        })
    })
    anomalycountchart.on("click", function(e) {
        e.preventDefault();
        var result = $.grep(data, function(v, i) {
            return v[0] === e.data["click.value"];
        });
        console.log(result);
        tokenSet.set("databaseID_tok", "");
        utils.redirect("anomaly?databaseID_tok=" + result[0][2], "_blank");
    });
});

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

[MikeJu25]

Thank you very much!

[kamlesh_vaghela]

@MikeJu25 

Can you please share you sample search for chart?

[MikeJu25]

Sorry what do you mean by sample search? The data sample or the search query? 

[kamlesh_vaghela]

@MikeJu25 

Sample search means the search you have used to produce a chart which you added in question. Why I use word sample , if you want to mask confidential TERM like index or field name.. 🙂 

[MikeJu25]

Ohh I see! I think I have posted the search in the question but I will post it here again

index=\"assets_py\" asset_type=database | fields data_source, anomaly_count", database_id | fields - _time _cd _bkt _indextime _raw _serial _si _sourcetype