Solved: Where can I find an example of a custom Splunk vis...

melonman · ‎03-01-2016

Hi,

I am looking for an example of Splunk custom visualization using dc.js.
https://dc-js.github.io/dc.js/

If anyone has tried to create one, could you share how to use this library with Splunk?
I looked at Splunkbase for any visualization example using dc.js, but so far no luck..

Thank you!

jeffland · ‎03-01-2016

I personally haven't heard of any dc.js examples with splunk. That is probably because splunks built-in dashboard components (which I believe are mainly based on Highcharts) feature the same basic visualization elements, and they a) come with an in-browser drag-and-drop method to create and b) are from there somewhat customizable with XML, which in my opinion makes the whole procedure easier than to write javascript directly (but that might be different for others).
Is there are specific reason you want to use dc.js, like previous experience with it? Feature- or visualization-wise, I can't see much that warrants a need for dc.js over the standard visualizations.
From what I've read so far (especially this tutorial, which seems to explain things quite well), you can simply use the results of your searches in json and be on your way with dc.js. You basically need a search in your dashboard with an id and a place for your visualizations to go like so:

<dashboard script="your_javascript.js">
  <search id="data_search">
    <query>...
  <html>
    <div id="place_viz"></div>
  <html>
</dashboard>

And in your javascript you do something like

var search = splunkjs.mvc.Components.getInstance("data_search");
var myResults = search.data("results", {output_mode: "json_rows", count: "0");
myResults.on("data", function() {
    var collection = myResults.collection().toJSON();
    // you can now do as you please
});

I hope this helps you on your way. If you successfully create a working example, maybe you could post it here for others to find?

View solution in original post

jeffland · ‎03-01-2016

I personally haven't heard of any dc.js examples with splunk. That is probably because splunks built-in dashboard components (which I believe are mainly based on Highcharts) feature the same basic visualization elements, and they a) come with an in-browser drag-and-drop method to create and b) are from there somewhat customizable with XML, which in my opinion makes the whole procedure easier than to write javascript directly (but that might be different for others).
Is there are specific reason you want to use dc.js, like previous experience with it? Feature- or visualization-wise, I can't see much that warrants a need for dc.js over the standard visualizations.
From what I've read so far (especially this tutorial, which seems to explain things quite well), you can simply use the results of your searches in json and be on your way with dc.js. You basically need a search in your dashboard with an id and a place for your visualizations to go like so:

<dashboard script="your_javascript.js">
  <search id="data_search">
    <query>...
  <html>
    <div id="place_viz"></div>
  <html>
</dashboard>

And in your javascript you do something like

var search = splunkjs.mvc.Components.getInstance("data_search");
var myResults = search.data("results", {output_mode: "json_rows", count: "0");
myResults.on("data", function() {
    var collection = myResults.collection().toJSON();
    // you can now do as you please
});

I hope this helps you on your way. If you successfully create a working example, maybe you could post it here for others to find?

melonman · ‎03-02-2016

Thank you for your post, I will try to pass the search result in Jason to crossfilter and go from there.

Where can I find an example of a custom Splunk visualization using dc.js?

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

.conf24 | Session Scheduler is Live!!

Introducing the Splunk Community Dashboard Challenge!