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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

Calling All Security Pros: Ready to Race Through Boston?

Hey Splunkers, .conf25 is heading to Boston and we’re kicking things off with something bold, competitive, and ...

Beyond Detection: How Splunk and Cisco Integrated Security Platforms Transform ...

Financial services organizations face an impossible equation: maintain 99.9% uptime for mission-critical ...

Customer success is front and center at .conf25

Hi Splunkers, If you are not able to be at .conf25 in person, you can still learn about all the latest news ...