How do you create the below chart in Splunk?

aravindpadmin — Wed, 24 Oct 2018 02:33:28 GMT

I am working on Sentiment Analysis for twitter logs. The client requirement is to produce the graph/chart as mentioned in the below image. I have the data of TwitterText, Sentiment,Score, Location, TwitterID, TwitterName, TwitterTimestamp, TwitterDate. I am also getting the Twitter feed to Splunk at every 1 minute. Kindly advise how best we can plot the chart as per below

Re: How do you create the below chart in Splunk?

aravindpadmin — Wed, 24 Oct 2018 02:37:28 GMT

I have a requirement on Sentiment Analysis on Twitter for my organisation. I have a data for TwitterText, Name, Location, Sentiment (Positive/Negative/Neutral), Score, Location, Date, Time. I need to plot the graph as mentioned above with respect to applications. How best this can be achieved?

Re: How do you create the below chart in Splunk?

HiroshiSatoh — Wed, 24 Oct 2018 08:51:14 GMT

It is not good for Splunk to put graph elements in a table. It is only a spark line.
I think that the graph on the right side is a spark line and the others are expressed by table data.
Changing the color of the row(Negative,Neutral,Positive) makes it look better a little.

Re: How do you create the below chart in Splunk?

mstjohn_splunk — Wed, 24 Oct 2018 20:46:43 GMT

hi @aravindpadmin,

Did the answer below solve your problem? If so, please resolve this post by approving it! If your problem is still not solved, keep us updated so that someone else can help ya. Thanks for posting!

Re: How do you create the below chart in Splunk?

aravindpadmin — Tue, 30 Oct 2018 01:33:58 GMT

@HiroshiSatoh , thanks for your response. Is there any way to color the count of Sentiment (positive or Negative or Neutral count) based on value of the count? Example, if there are 5 positive 3 negative and 10 nuetral tweets for application ATM. Then ATM app should be displayed with background colour green with it length extended based on number of tweets received.

I want this one look similar to Gant chart. Please advise.

Re: How do you create the below chart in Splunk?

niketn — Tue, 06 Nov 2018 21:41:19 GMT

@aravindpadmin here is a run anywhere example with some cooked up data from Splunk's _internal index to mimic a scenario for Sentiments Negative, Neutral and Positive (PS: as stated not based on actual sentiment data).

The example usese Table Sparkline Formatting options and extending Table with Data Bars example from Splunk Dashboard Examples app.

Following is the Simple XML Dashboard Code:

<form script="table_with_multiple_data_bars.js">
  <label>Sentiments table with colored Data Bars and Sparklines</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="time" token="tokTime" searchWhenChanged="true">
        <label></label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
      </input>
      <html depends="$alwaysHideCSSStylePanel$">
        <style>
          .data-bar-cell{
            padding: 4px 8px;
          }
          .data-bar-tooltip{
              height: 16px;
              min-width: 0px;
              text-align:center;
              color:white;
          }          
          .data-bar-tooltip .data-bar-tooltip-text{
            visibility: hidden;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 2px 5px;
            /* Position the tooltip */
            position: relative;
            top:-15px;
            z-index: 1;
          }
          .data-bar-tooltip:hover .data-bar-tooltip-text {
              visibility: visible;
          }
          .data-bar-tooltip.negative{
              background: #ff0000;
          }
          .data-bar-tooltip.neutral{
              background: #D2691E;
          }
          .data-bar-tooltip.positive{
              background: #008000;
          }          
        </style>
      </html>
      <table id="tableWithMultipleDataBars">
        <search>
          <query>index=_internal sourcetype=splunkd log_level="*"
| stats count(eval(date_second>0 AND date_second<=20)) as Negative count(eval(date_second>20 AND date_second<=40)) as Neutral count(eval(date_second>40 AND date_second<=60)) as Positive sparkline(count(eval(date_second>0 AND date_second<=20))) as Negative_Sparkline sparkline(count(eval(date_second>20 AND date_second<=40))) as Neutral_Sparkline sparkline(count(eval(date_second>40 AND date_second<=60))) as Positive_Sparkline by component
| eval sentiment=Negative."|".Neutral."|".Positive
| table component sentiment Negative_Sparkline Neutral_Sparkline Positive_Sparkline</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <format field="Negative_Sparkline" type="sparkline">
          <option name="lineColor">#ff0000</option>
        </format>
        <format field="Neutral_Sparkline" type="sparkline">
          <option name="lineColor">#D2691E</option>
        </format>
        <format field="Positive_Sparkline" type="sparkline">
          <option name="lineColor">#008000</option>
        </format>
      </table>
    </panel>
  </row>
</form>

Following is the required JavaScript extension file table_with_multiple_data_bars.js with Splunk JS code to render Data Bars with Tooltips in required table cell. PS: Negative, Neutral and Positive values in sentiments column need to be present with Pipe | as delimiter character i.e. there should value of 0 instead of null. Also the table with Sentiments data bar should have id="tableWithMultipleDataBars" for the changes to work. PS: Since this example requires Static changes (JavaScript file), you may need to refresh, bump or restart your Splunk changes depending on your environment and debug settings. Also typically you need to put the JS file under your Splunk App's appserver/static folder i.e. $SPLUNK_HOME/etc/apps/<yourAppName>/appserver/static

require([
    'jquery',
    'underscore',
    'splunkjs/mvc',
    'views/shared/results_table/renderers/BaseCellRenderer',
    'splunkjs/mvc/simplexml/ready!'
], function($, _, mvc, BaseCellRenderer) {
    console.log("Script Started");
    var DataBarCellRenderer = BaseCellRenderer.extend({
        canRender: function(cell) {
            return (cell.field === 'sentiment');
        },
        render: function($td, cell) {
            var negative = parseInt(cell.value.split("|")[0]);
            var neutral = parseInt(cell.value.split("|")[1]);
            var positive = parseInt(cell.value.split("|")[2]);
            var total=negative+neutral+positive;
            var negative_percent,neutral_percent,positive_percent;
            if(total==0){
                negative_percent=0.00;
                neutral_percent=0.00;
                positive_percent=0.00;
                negative=0;
                neutral=0;
                positive=0;
            }else{
                negative_percent=((negative/total)*100).toFixed(2);
                neutral_percent=((neutral/total)*100).toFixed(2);
                positive_percent=((positive/total)*100).toFixed(2);
            }
            $td.addClass('data-bar-cell').html(_.template(
               '<div class="data-bar-container" style="display:flex">'+
                  '<div class="data-bar-tooltip negative" style="width:<%- negative_percent %>%;"><%- negative %>'+
                     '<span class="data-bar-tooltip-text negative"><%- negative_percent %>%</span>'+
                  '</div>'+
                  '<div class="data-bar-tooltip neutral" style="width:<%- neutral_percent %>%;"><%- neutral %>'+
                     '<span class="data-bar-tooltip-text neutral"><%- neutral_percent %>%</span>'+
                  '</div>'+
                  '<div class="data-bar-tooltip positive" style="width:<%- positive_percent %>%;"><%- positive %>'+
                     '<span class="data-bar-tooltip-text positive"><%- positive_percent %>%</span>'+
                  '</div>'+
               '</div>', {
                negative_percent: negative_percent,
                negative: negative,
                neutral_percent: neutral_percent,
                neutral: neutral,
                positive_percent: positive_percent,
                positive: positive
            }));
        }
    });
    mvc.Components.get('tableWithMultipleDataBars').getVisualization(function(tableView) {
        tableView.addCellRenderer(new DataBarCellRenderer());
    });
});

I have used built in sparkline feature and used Sparkline formatting to apply lineColor to sparklines as per their category. I did not overly the sparkline as it would be possible to draw tristate sparkline over a period of time, provided your stats/chart query for sparkline() can generate three type of values i.e. -1 for Loss, 0 for Draw or 1 for Win. Refer to my Splunk wiki talk Topic 11: Types of jQuery Sparklines in Splunk (besides Line and Bar that we know :))

Or the following run anywhere example to generate some tristate sparkline :

Following is the Simple XML Dashboard code for above example:

<dashboard>
  <label>Sparkline tristate</label>
  <row>
    <panel>
      <table>
        <search>
          <query>| gentimes start=-10 increment=1d
| eval _time=starttime
| fields _time
| eval random=random()%2
| streamstats count as sno
| eval random=if(sno==2 OR sno==7,-1,random)
| bin _time span=1d
| stats sparkline(max(random)) as tristate avg(random) as average
| table average tristate</query>
          <earliest>-1s</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <format type="number" field="average">
          <option name="precision">0</option>
          <option name="useThousandSeparators">false</option>
        </format>
        <format field="tristate" type="sparkline">
          <option name="type">tristate</option>
        </format>
      </table>
    </panel>
  </row>
</dashboard>

Re: How do you create the below chart in Splunk?

niketn — Tue, 14 Apr 2020 02:55:29 GMT

@aravindpadmin can you please confirm whether the above option worked for you?

topic Re: How do you create the below chart in Splunk? in Splunk Search

How do you create the below chart in Splunk?

Re: How do you create the below chart in Splunk?

Re: How do you create the below chart in Splunk?

Re: How do you create the below chart in Splunk?

Re: How do you create the below chart in Splunk?

Re: How do you create the below chart in Splunk?

Re: How do you create the below chart in Splunk?