Dashboards & Visualizations

How can I align my charts' content (i.e. how can I change the width of the legend and axis descriptions)?

Champion

I have this sample dashboard:

<dashboard>
  <label>Legend with fixed width</label>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal name=batchreadertpool OR name=app_downloads | timechart count by name</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.legend.maximumWidth">10</option>
        <option name="charting.legend.minimumWidth">10</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal name=aq OR name=aeq | timechart count by name</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.legend.maximumWidth">10</option>
        <option name="charting.legend.minimumWidth">10</option>
        <option name="charting.visibility">hidden</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal name=aq OR name=aeq | timechart count by name | eval aeq=aeq*1000 | eval aq=aq*1000</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.legend.labelStyle.maximumWidth">10</option>
        <option name="charting.legend.labelStyle.minimumWidth">10</option>
      </chart>
    </panel>
  </row>
</dashboard>

It has three searches, all across the same time range. The first one however has columns with longer names than the other two, so the legend is wider, and the third one has a larger number of results, so the axis unit labels are wider. All in all, the three actual bar charts (less axis labes and legend) differ in where they begin and where they end, which I find unsatisfying given that they should show the same time span (see screenshot).
alt text
So now my question is, how do I get these to begin and end on the same level? I've found this answer from 2013, but it seems that the "charting.legend.labelStyle.maximumWidth"-option only works with Flash Charts (which I don't use). I also can't seem to get anywhere with CSS as the elements of the chart are some low-level svg elements, and I don't see how to give them a fixed width or something like that.

0 Karma

SplunkTrust
SplunkTrust

@jeffland, since the Splunk chart is heavily built with SVG and all the components adjust dynamically based on values of other components. Hence, messing around with various components of the chart without impacting others is nearly impossible unless done from code.

See if following workaround fits the need.

  1. Hide Legends on Charts.
  2. Give ids to chart search queries for post processing.
  3. Give Panels ids.
  4. Add a panel with table in each row. Give tables ids.
  5. Use the chart queries in table through post processing and perform transpose to get the Legend names.
  6. Format Table Legend column in Edit mode and Color by Values with Automatic option (this applies similar colors as Series Color. If you have Field Colors applied for your chart instead of default/manual Series Colors then you will have to use Define Rules instead of Automatic.)
  7. Use ids for Panel to adjust width of panels using CSS Override like 75% for chart & 25% for Legend
  8. Use table ids to add padding/margin on top of the table using CSS Override (this is to bring legends to the center. PS: Other formatting can also be applied on Legends table through CSS Override like Hide the Legend Table Header, Center Text etc.

alt text

Following is the Simple XML Dashboard code as explained above:

<dashboard>
  <label>Align Charts with Legend on Right</label>
  <row>
    <panel id="panelTimechartLogLevel">
      <html depends="$alwaysHideCSSHtmlPanel$">
          <style>
            #panelTimechartLogLevel,
            #panelTimechartComponent{
              width:75% !important;
            }
            #panelLegendLogLevel,
            #panelLegendComponent{
              width:25% !important;
            }
            #tableLegendLogLevel,
            #tableLegendComponent{
              margin-top:20% !important;
            }
          </style>
      </html>
      <chart>
        <search id="baseLogLevel">
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count by log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">column</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">none</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
    <panel id="panelLegendLogLevel">
      <table id="tableLegendLogLevel">
        <search base="baseLogLevel">
          <query>| head 1
| fields - _time
| transpose column_name="Legends"
| search Legends!="_*"
| table Legends</query>
        </search>
        <option name="drilldown">cell</option>
        <option name="refresh.display">progressbar</option>
        <format type="color" field="Legends">
          <colorPalette type="sharedList"></colorPalette>
          <scale type="sharedCategory"></scale>
        </format>
      </table>
    </panel>
  </row>
  <row>
    <panel id="panelTimechartComponent">
      <chart>
        <search id="baseComponent">
          <query>index=_internal sourcetype=splunkd log_level!="INFO"
| timechart count by component limit=2 useother=f</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">column</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">none</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
    <panel id="panelLegendComponent">
      <table id="tableLegendComponent">
        <search base="baseComponent">
          <query>| head 1
| fields - _time
| transpose column_name="Legends"
| search Legends!="_*"
| table Legends</query>
        </search>
        <option name="count">10</option>
        <option name="drilldown">cell</option>
        <option name="refresh.display">progressbar</option>
        <format type="color" field="Legends">
          <colorPalette type="sharedList"></colorPalette>
          <scale type="sharedCategory"></scale>
        </format>
      </table>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

Builder

Problem with this is that you can not holde the mouse over a legend so that its data get highlighted.
It becomes separated data.

0 Karma

Builder

This is some I like as well.
Putting the legend below is not a good solution for me.
I would like the x axis to be align for more than 10 dashboards.
This would help me to see fault across different various of messages.

0 Karma

Path Finder

I want this as well. 🙂

I'm trying to build dashboards that help my users understand the relationships between different characteristics of our systems over time.

I spent some time trying to figure out how to possibly scale the SVG components, but like you, I didn't get there. The SVG/HTML charting seems to use HighCharts and those definitely allow for these kinds of control, but I haven't been able to understand where I might inject changes into the Splunk JS stack (Mr. Sparkle?)

If I figure anything out, I'll give you a shout. 🙂

0 Karma

Champion

That would be nice, also for anyone else coming here searching for a solution.

0 Karma

Esteemed Legend

The simplest way is to move your legend to the bottom. Click Edit -> Edit Panels. Then click the paint brush icon (last/rightmost one) and select Legend and click on the top listbox and select Top or Bottom.

Champion

That might help with the differently sized legends, but it doesn't with the axis labels. At any rate, it changes how the entire dashboard looks, and I would prefer if the legend stayed to the right of the charts - just with an adjustable width.

0 Karma