Dashboards & Visualizations

Using SplunkJS to build a bar chart with expected Drilldown

MikeJu25
Path Finder

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

image.png

, 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! 

Labels (3)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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.

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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
Path Finder

Thank you very much!

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@MikeJu25 

Can you please share you sample search for chart?

 

0 Karma

MikeJu25
Path Finder

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

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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.. 🙂 

0 Karma

MikeJu25
Path Finder

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

 

0 Karma
Get Updates on the Splunk Community!

Technical Workshop Series: Splunk Data Management and SPL2 | Register here!

Hey, Splunk Community! Ready to take your data management skills to the next level? Join us for a 3-part ...

Spotting Financial Fraud in the Haystack: A Guide to Behavioral Analytics with Splunk

In today's digital financial ecosystem, security teams face an unprecedented challenge. The sheer volume of ...

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability As businesses scale ...