topic Re: Using SplunkJS to build a bar chart with expected Drilldown in Dashboards & Visualizations

Using SplunkJS to build a bar chart with expected Drilldown

MikeJu25 — Thu, 15 Jul 2021 14:17:03 GMT

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!

Re: Using SplunkJS to build a bar chart with expected Drilldown

kamlesh_vaghela — Thu, 15 Jul 2021 14:55:26 GMT

@MikeJu25

Can you please share you sample search for chart?

Re: Using SplunkJS to build a bar chart with expected Drilldown

MikeJu25 — Thu, 15 Jul 2021 15:57:04 GMT

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

Re: Using SplunkJS to build a bar chart with expected Drilldown

kamlesh_vaghela — Thu, 15 Jul 2021 16:11:28 GMT

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

Re: Using SplunkJS to build a bar chart with expected Drilldown

MikeJu25 — Thu, 15 Jul 2021 17:02:54 GMT

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

Re: Using SplunkJS to build a bar chart with expected Drilldown

kamlesh_vaghela — Fri, 16 Jul 2021 06:07:52 GMT

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

Re: Using SplunkJS to build a bar chart with expected Drilldown

MikeJu25 — Fri, 16 Jul 2021 16:41:13 GMT

Thank you very much!