here is one example you can use to display your single value.
{% extends "splunkdj:base_with_app_bar.html" %}
{% load splunkmvc %}
{% block title %}Single Value - Web Framework Toolkit{% endblock title %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css">
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}{{app_name}}/custom.css" />
<style>
#timerange {
margin-top: 5px;
float: right;
}
.panel {
overflow: visible;
}
</style>
{% endblock css %}
{% block content %}
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="row">
<div class="span12 dashboard-header clearfix">
<h2>Single Value</h2>
</div>
</div>
<div class="dashboard-row">
<div class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel">
<div class="dashboard-element">
<div class="panel-head">
</div>
<div class="panel-body">
<p>
In this example, the TimeRange view
sets the timebounds for the searche that drive
the Single view.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard-row">
<div class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel">
<div class="dashboard-element">
<div class="panel-head">
<h3>Single value with time range</h3>
</div>
<div class="panel-body">
{% timerange id="timerange" %}
{% single id="single1" managerid="simplesearch1" beforeLabel="_internal event Count: " %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content%}
{% block managers %}
{% searchmanager id="simplesearch1" search="index=_internal | stats count"
preview=True cache=True status_buckets=0 auto_finalize_ec=100000 autostart=True %}
{% endblock managers %}
{% block js %}
<script>
require(["splunkjs/ready!"], function(mvc) {
var search1 = mvc.Components.getInstance("simplesearch1");
var timerange1 = mvc.Components.getInstance("timerange");
timerange1.on("change", function() {
search1.search.set(timerange1.val());
});
});
</script>
{% endblock js %}