Splunk Dev

Simple d3chart incorrect size and missing axis, legend, gridlines?

unclethan
Path Finder

I created a search and attached it to a chart and a d3 chart. The regular chart showed the graphs as usual, but the d3chart was being clipped, as well as not having any axis, gridlines or legend.
Am I missing something or this feature not ready?

0 Karma
1 Solution

magnew_splunk
Splunk Employee
Splunk Employee

Hi unclethan,

Can you say a little more about what you are trying to do? The d3 chart is supported at this point, but my not be documented as well as the other framework components. Additionally, due to the nature of the APIs of the libraries the d3 chart is wrapping, some of it's features can only be accessed in JavaScript.

The one extra parameter that is always required on d3 chart but not on other controls is type. To see the complete list of options for this, look at the NVD3 documentation here: http://nvd3.org/ghpages/examples.html . NVD3 is the library the the framework is using for the d3 chart and the options that can be set on NV charts can be set on the framework's d3 chart.

Here's a Django example of a d3 chart with type discreteBarChart.

                        {% d3chart id="chart1" managerid="simplesearch1" type="discreteBarChart" %}

Do you have the Splunk Web Framework Toolkit? It has some more samples of using the d3 chart from javascript as well as some other charts you might find serve your purposes. You can download it here: http://apps.splunk.com/app/1613/ . That might be a good place to get started.

Good luck.

View solution in original post

0 Karma

magnew_splunk
Splunk Employee
Splunk Employee

Hi unclethan,

Can you say a little more about what you are trying to do? The d3 chart is supported at this point, but my not be documented as well as the other framework components. Additionally, due to the nature of the APIs of the libraries the d3 chart is wrapping, some of it's features can only be accessed in JavaScript.

The one extra parameter that is always required on d3 chart but not on other controls is type. To see the complete list of options for this, look at the NVD3 documentation here: http://nvd3.org/ghpages/examples.html . NVD3 is the library the the framework is using for the d3 chart and the options that can be set on NV charts can be set on the framework's d3 chart.

Here's a Django example of a d3 chart with type discreteBarChart.

                        {% d3chart id="chart1" managerid="simplesearch1" type="discreteBarChart" %}

Do you have the Splunk Web Framework Toolkit? It has some more samples of using the d3 chart from javascript as well as some other charts you might find serve your purposes. You can download it here: http://apps.splunk.com/app/1613/ . That might be a good place to get started.

Good luck.

0 Karma

unclethan
Path Finder

I had followed the django bindings tutorial (http://dev.splunk.com/view/SP-CAAAESP), and had duplicated the line: {% chart id="chart_sourcetype" managerid="search_chart" type="line" drilldown="none" %}
wherein I replaced chart with c3chart and id="chart.. with id="d3chart..
Setting the type to "lineChart" has made the graph render properly.
It appears that type="line" renders the data lines at a huge scale, without any gridlines or axis.
Thanks for the answer!

0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Step into “Hunt the Insider: An Splunk ES Premier Mystery” to catch a cybercriminal ...

After a whole week of being on call, you fell asleep on your keyboard, and you hit a sequence of buttons that ...

SplunkTrust Application Period is Officially OPEN!

It's that time, folks! The application/nomination period for the 2026-2027 SplunkTrust is officially open. If ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...