All Apps and Add-ons

Does anybody have a working example of a force-directed graph template?

Communicator

Hi all,
I'm working on building a few force-directed graphs for some use cases I have. I'm using the Splunk Web Framework Toolkit (with the components ported over to Enterprise Security) in order to build the visualizations. I've followed the tutorials located here: http://dev.splunk.com/view/webframework-htmldashboards/SP-CAAAEV6, and I've been trying to adapt them to cover my force-directed graph. However, it seems like no matter what I try, I can't get the page to load properly! I've tried looking at the example provided in the Web Framework Toolkit, but it doesn't seem like it will actually let me dig into the underlying HTML - my old trick of adding "?showsource=1" to the end of the URL is failing, and I can't find any sort of a base view for that example anywhere within Splunk.

I also don't have a lot of web development experience, which I know is part of the problem, but I also feel like I don't have any good way to get started building these dashboards. Does anybody have a working example of a force-directed graph template that they'd be willing to share? Or, if examples of working HTML5 code are available somewhere and I've missed them, would someone mind pointing me in the right direction? Thanks so much!

0 Karma

Splunk Employee
Splunk Employee

Just in case anyone comes past this link looking for a working Force Directed Viz, here is my new app that has force directed packaged as a visualization. No customization needed :).

May the force be with you!
https://splunkbase.splunk.com/app/3767/

0 Karma

Explorer

How i got the DG started...

  1. Have the WFT installed under etc/apps
  2. Generate a basic django project: http://dev.splunk.com/view/SP-CAAAESQ
  3. Locate the faa.demo.csv file and place in the lookups directory of your new app
  4. Cut-n-paste the example code from the WFT for directed graph into your new app ... home.html under /django//templates/home.html a. The div item will be placed in the content section b. The script will be placed in the script section c. Code a searchmanager item for the managers section using the inputlookup from the WTF directed graph example

...with a working graph, replace the searchmanager and modify the DG parameters to see variation.

Note: to change height of actual DG use the 'height' : item in the new ForceDirected declaration.

0 Karma

Explorer

Even better, reference the Complex dashbaord with drilldown under WFT examples and note the bubblechart implementation etc/app/splunk_wftoolkit/django/splunk_wftoolkit/airlinedashboard.html. Use the following in your own solution to leverage the forcedirected item in a similar manner.

{% load splunkmvc %}
{% load splunk_wftoolkit %}
...
{% block content %}
...
{% forcedirected id="chart1" managerid="one" height=400 %}
...
{% endblock content %}
{% block managers %}
...
{% searchmanager id="one" ... %}
...
{% endblock managers %}
...
{% block js %}
...
var chart1 = mvc.Compnents.getInstance("forcedirected");
...
{% endblock js %}
0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!