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
Get Updates on the Splunk Community!

Stay Connected: Your Guide to May Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars this month. This ...

They're back! Join the SplunkTrust and MVP at .conf24

With our highly anticipated annual conference, .conf, comes the fez-wearers you can trust! The SplunkTrust, as ...

Enterprise Security Content Update (ESCU) | New Releases

Last month, the Splunk Threat Research Team had two releases of new security content via the Enterprise ...