topic Re: Simple d3chart incorrect size and missing axis, legend, gridlines? in Splunk Dev

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

unclethan — Fri, 25 Oct 2013 23:04:58 GMT

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?

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

magnew_splunk — Mon, 28 Oct 2013 16:42:41 GMT

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.

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

unclethan — Mon, 28 Sep 2020 15:06:27 GMT

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!