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!

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...

Introducing Splunk Enterprise 9.2

WATCH HERE! Watch this Tech Talk to learn about the latest features and enhancements shipped in the new Splunk ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...