topic Re: Using D3 chart in HTMLDashboard causes problem with require.js in Dashboards & Visualizations

Using D3 chart in HTMLDashboard causes problem with require.js

splunkbeginner2 — Thu, 10 Jul 2014 22:19:45 GMT

Hello,

I would like to use the a d3 Chart in a HTML-Dashboard.
Dearly I have got a problem in combination with require.js that is used by splunk.

In the following you could find a first require, that works (I corrected the path so that d3 works, and I get the d3-Version in the console.)

Afterwards I use the same thing again, but this time in combination with some other modules. As a result, d3 is undefined.

require(["d3"],function(d3){
console.log(d3.version);

});

//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
//
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.

require([

"splunkjs/mvc",
"splunkjs/mvc/utils",
"splunkjs/mvc/tokenutils",
"underscore",
"jquery",
"splunkjs/mvc/simplexml",
"splunkjs/mvc/headerview",
"splunkjs/mvc/footerview",
"splunkjs/mvc/simplexml/dashboardview",
"splunkjs/mvc/simplexml/element/chart",
"splunkjs/mvc/simplexml/element/event",
"splunkjs/mvc/simplexml/element/html",
"splunkjs/mvc/simplexml/element/list",
"splunkjs/mvc/simplexml/element/map",
"splunkjs/mvc/simplexml/element/single",
"splunkjs/mvc/simplexml/element/table",
"splunkjs/mvc/simpleform/formutils",
"splunkjs/mvc/simpleform/input/dropdown",
"splunkjs/mvc/simpleform/input/radiogroup",
"splunkjs/mvc/simpleform/input/multiselect",
"splunkjs/mvc/simpleform/input/checkboxgroup",
"splunkjs/mvc/simpleform/input/text",
"splunkjs/mvc/simpleform/input/timerange",
"splunkjs/mvc/simpleform/input/submit",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/savedsearchmanager",
"splunkjs/mvc/postprocessmanager",
"splunkjs/mvc/simplexml/urltokenmodel",

// Add comma-separated libraries and modules manually here, for example:
// ..."splunkjs/mvc/simplexml/urltokenmodel",
// "splunkjs/mvc/checkboxview"
"d3"],{
console.log(d3.version);

The specific error message I receive from chrome at this point is the following:
"Uncaught ReferenceError: d3 is not defined "

Do you have any idea, how to fix such an issue? Thank you very much for your support!

UPDATE Work-around 16th July 2014

Meanwhile it works, but the solution looks very creepy:

I require a few of the packages mentioned above (I think all before the map-element + d3) and print the d3-version-number into the commandline before I require everything in sum and run my normal stuff.

If someone would have an idea, which module could use its own d3 here, it would be great to fix that.

Kind regards,

Xantor

Re: Using D3 chart in HTMLDashboard causes problem with require.js

kikexclusive — Tue, 10 Nov 2015 10:00:06 GMT

Hi splunkbeginner21, can you paste the code regarding the Work-around 16th July 2014 you mentioned? I have the exact same problem and seems like nobody answered back since July 2014. Thanks!

Re: Using D3 chart in HTMLDashboard causes problem with require.js

bmacias84 — Tue, 10 Nov 2015 22:36:57 GMT

Hello, you are missing require.config in html dashboard. You need the require.config to specify the path to the lib.

require.config({
   paths: {
     "app": "../app"
   }
 });
 require([
 "splunkjs/mvc",
 "splunkjs/mvc/utils",
 "splunkjs/mvc/tokenutils",
 "underscore",
 "jquery",
 "app/<your_app>/components/d3/d3", // this is the path under appserver/static directory in your app.
 "splunk.util",
 "splunkjs/mvc/simplexml",
 "splunkjs/mvc/headerview",
 "splunkjs/mvc/footerview",
 "splunkjs/mvc/simplexml/dashboardview",
 "splunkjs/mvc/simplexml/dashboard/panelref",
 "splunkjs/mvc/simplexml/element/html",
 "splunkjs/mvc/simplexml/element/list",
 "splunkjs/mvc/simplexml/element/map",
 "splunkjs/mvc/simpleform/formutils",
 "splunkjs/mvc/simplexml/eventhandler",
 "splunkjs/mvc/simpleform/input/dropdown",
 "splunkjs/mvc/simpleform/input/multiselect",
 "splunkjs/mvc/simpleform/input/text",
 "splunkjs/mvc/simpleform/input/submit",
 "splunkjs/mvc/textinputview",
 "splunkjs/mvc/radiogroupview",
 "splunkjs/mvc/multidropdownview",
 "splunkjs/mvc/searchmanager",
 // Add comma-separated libraries and modules manually here, for example:
 // ..."splunkjs/mvc/simplexml/urltokenmodel",
 // "splunkjs/mvc/checkboxview" ],
function(
mvc,
utils,
TokenUtils,
_,
$,
d3,
SplunkUtil,
DashboardController,
HeaderView,
FooterView,
Dashboard,
PanelRef,
HtmlElement,
ListElement,
MapElement,
FormUtils,
EventHandler,
DropdownInput,
MultiSelectInput,
TextInput,
SubmitButton,
TextInputView,
RadioGroupView,
MultiDropdownView,
SearchManager)

This should fix this issue. You can check out my apps in Splunk Base, config modeler app use this method to load d3.