Can you dynamically change the charts (ie. from bar to line), using a dropdown menu?

[GaryZ]

Can you dynamically change the charts (ie. from bar to line), using a dropdown menu?

At the moment, I've created multiple charts and utilizing show and hide (depending on the options selected), to serve this purpose.   I was wondering if there's an easier/cleaner/simpler way of achieving this.

[GaryZ]

@bowesmana 

Is there a way to switch from chart to table?  The options given earlier seems to only apply to variations of charts.  Curious if there's options to go from chart to table.

[bowesmana · Accepted solution]

@GaryZ Unfortunately you can't go from chart to table. Look at the XML and you will see that 

<chart> or <table> are completely separate XML types and have a whole different bunch of configuration options. The token replacement mechanism simply replaces the

<option name="charting.chart">$chart$</option>

with the appropriate piece of text - all other options being equal, the replacement will work.

The way to solve this problem is to have both panels, one for charts and one for table and use token dependency to switch between the panels, like this example. Note that it uses a base search which is used to populate both searches, so no duplication. You can then use any post processing in a panel that requires additional processing to suit the visualisation.

<form version="1.1">
  <label>Visualisation Selection</label>
  <search id="base_panel_data">
    <query>
      | makeresults count=5000
      | eval car=mvindex(split("Volvo,Mercedes,VW,Porsche,Jaguar,Tesla,BYD,Toyota,Suzuki",","), ((random() % 97) * (random() % 71)) % 9)
      | stats count by car
    </query>
  </search>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="dropdown" token="viz_type" searchWhenChanged="true">
        <label>What viz type</label>
        <choice value="pie">Pie</choice>
        <choice value="bar">Bar</choice>
        <choice value="line">Line</choice>
        <choice value="column">Column</choice>
        <choice value="table">Table</choice>
        <change>
          <condition value="table">
            <unset token="show_chart"></unset>
            <set token="show_table"></set>
          </condition>
          <condition>
            <set token="show_chart"></set>
            <unset token="show_table"></unset>
          </condition>
        </change>
      </input>
      <chart depends="$show_chart$">
        <search base="base_panel_data">
          <query>
          </query>
        </search>
        <option name="charting.chart">$viz_type$</option>
        <option name="charting.drilldown">all</option>
      </chart>
      <table depends="$show_table$">
        <search base="base_panel_data">
          <query>
          </query>
        </search>
      </table>
    </panel>
  </row>
</form>

[GaryZ]

@bowesmana 

Thank you for confirming.  That was how I understood this as well.  I was curious if there were options I wasn't aware of.  

Thank you once again.

[danspav]

Hi @GaryZ,

As far as I understand, this is not possible with dashboard studio so the best solution would be to have both charts there, but only one displaying depending on the token.

However, you can do it with Classic Dashboards (i.e. simple XML dashboards).

Here's an example:

<form version="1.1" theme="light">
  <label>Splunk answers</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="chart" searchWhenChanged="true">
      <label>Chart Style</label>
      <choice value="line">Line Chart</choice>
      <choice value="column">Bar Chart</choice>
      <default>line</default>
      <initialValue>line</initialValue>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Chart</title>
      <chart>
        <search>
          <query>| gentimes start=-20
| eval sample=random()%100
| eval _time = starttime
| timechart span=1d max(sample) as value</query>
          <earliest>-20d@d</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">$chart$</option>
        <option name="charting.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</form>

The trick here is to create a token with the value of the chart you'd like to show ("line" or "column") and then use that token in the XML:

<option name="charting.chart">$chart$</option>

This might get annoying to develop though, as you can't edit the chart while this value is set. You can always change it while editing and then change it back when you're done.

[GaryZ]

Hello @danspav , Is there a listing of all the different charting options?  I've tried to use what are some of the possible names for the different charting types.  Some worked and some didn't.  I'm sure there's some that I've missed as well.  

Is there an option where I can also switch from a chart to a table? 

TIA

The following work

<choice value="line">Line Chart</choice>
<choice value="column">Bar Chart</choice>
<choice value="area">Area</choice>
<choice value="bar">Bar</choice>
<choice value="pie">Pie</choice>
<choice value="scatter">scatter</choice>
<choice value="bubble">bubble</choice>

The following DIDN'T work

<choice value="box-plot">boxplot</choice>.
<choice value="histogram">histogram</choice>
<choice value="horizon">horizon</choice>
<choice value="scatterline">scatterline</choice>

[danspav]

Your best bet to switch from a chart to a table is to show/hide pre-built panels using tokens. 

Tables have different options in the XML code - e.g. column formatting, coloring, drill-downs, highlighting when the mouse hovers. None of these options are relevant for a chart visualization type.

The main reason you can't use tokens to change from a chart to a table vis is that the charts use a <chart> tag, while the table vis uses a <table> tag. Simple XML doesn't support using tokens to set XML tags in the dashboard code like that.

The cleanest way, in my opinion, is to have hidden panels that you switch between using tokens.

[bowesmana]

Yes, it's very easy.

Just edit the chart type setting in the XML to use a token and then in your input give the appropriate options, e.g.

    <panel>
      <input type="dropdown" token="viz_type" searchWhenChanged="true">
        <label>What viz type</label>
        <choice value="pie">Pie</choice>
        <choice value="bar">Bar</choice>
        <choice value="line">Line</choice>
        <choice value="column">Column</choice>
      </input>
      <chart>
        <search>
          <query>
            | makeresults count=5000
            | eval car=mvindex(split("Volvo,Mercedes,VW,Porsche",","),random() % 4)
            | stats count by car
          </query>
        </search>
        <option name="charting.chart">$viz_type$</option>
        <option name="charting.drilldown">all</option>
      </chart>
    </panel>