When certain chart types are created, they seem to have too much whitespace surrounding them. This is especially noticeable with pie charts when embedding them in other apps or programs, but is noticeable in some others as well.
For example, this run-anywhere example, when you display as a pie chart...
index=_internal component=SavedSplunker OR component=DeployedApplication OR component=ClientSessionsManager
| stats count by component
Looks like this
![Pic of too much whitespace][1]
Yet I'd like the graphic and labels to take up as MUCH of the whitespace as it can - essentially nearly zero margin. Let the words run right up to the edge of that panel. Let the graphic expand until it almost touches an edge.
![Pic of something better][2]
This begs repeating to make sure it's clear: I am NOT looking to increase the size of the actual "area" of the Pie chart's canvas, page, panel - whatever you'd like to call it. That's easy. The problem isn't how high the entire panel is or how wide it is, it's how big the pie chart is within that space, or how much of that area the actual pie chart takes up.
Some things I've checked (I'm sure this list isn't exhaustive, but it's a good indication of the general areas I've looked at or checked).
Changing the height/width of the iframe (and similar things)
iframe height="670" width="480"
But those don't change the proportion of the chart itself within that area, only the size of the area its contained within.
Settings for what I need don't seem to be contained in the [docs for display formatting options][3]. There are things in there like
display.visualizations.chartHeight = 670
But that and all other settings I can find in that page that could remotely affect this only change the size of the overall panel, NOT the size of the pie chart within the panel. Still too much margin and whitespace, just like changing the iframe height/width.
When I examine a page in developer mode in Firefox, it clearly states in the displayed code
Created with Highcharts 4.0.4 /Highstock 2.0.4
So I tried looking through the [Highchart API docs][4] to see if there were any hints in there. There might be - a lot of things look like they can be adjusted, specifically a lot of the `plotOptions` contained therein look promising. Unfortunately I can't find where to apply them at. I've searched in my file system for js files that contain the word `plotOptions` but can't find anything. Seems like a dead end, but I don't know what I don't know, so suggestions would be helpful!
I've also looked/searched through the file `$SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/js/js_charting/visualizations/Visualization.js` but I couldn't see anything that might affect my use case in there.
I found some other promising looking things in the file `$SPLUNK_HOME/splunk/search_mrsparkle/exposed/js/views/shared/jschart/vizeditorschemas/pit_chart.js` but that seemed to not have any of the calculations for size in it.
More useful - and I really thought I was on to something here - is the (non-highcharts) stuff at `$SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/js/js_charting/visualizations/charts/PieChart.js` which has, in a function called "drawEmptyPieChart: function()", the promising-looking
circleRadius = Math.min(height * 0.85, width / 3) / 2;
(That's one of my attempts at changing - it was .75 I think before). That didn't do it. Even getting rid of that nearly completely...
circleRadius = Math.min(height, width) * 0.95 ;
... didn't change anything.
In that file right above it is a comment `// TODO [sff] this logic is duplicated in PieSeries translatePreHook()`
So I changed one in `$SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/js/js_charting/series/PieSeries.js` too.
The new version is
translatePreHook: function(pieSeries) {
var chart = pieSeries.chart;
if(pieSeries.options.dataLabels.enabled) {
pieSeries.options.size = Math.min(chart.plotHeight * 0.95, chart.plotWidth / 2);
}
else {
pieSeries.options.size = Math.min(chart.plotHeight * 0.95, chart.plotWidth * 0.95);
}
Because why not? I can always replace the file with the original if I totally mess it up. But even after a Splunk restart it did not change how full the canvas is of piecharts, if you get my drift.
So I'm at a loss - does anyone know where to look? Is there some silly option I just missed that would have saved me a few hours of digging?
Many thanks!
-Rich
[1]: /storage/temp/207037-screen-shot-pie-too-small.png
[2]: /storage/temp/207038-screen-shot-pie-better.png
[3]: https://docs.splunk.com/Documentation/Splunk/6.6.2/Admin/Savedsearchesconf#Display_Formatting_Options
[4]: http://api.highcharts.com/highcharts
↧