Bullet Graphs

The BulletGraph is a type of linear gauge designed specifically for use in dashboards. It displays a single key measure along with a comparative measure and qualitative ranges to instantly signal whether the measure is good, bad, or in some other state.

Bullet Graphs were created and popularized by dashboard design expert Stephen Few.

Revenue US$, thousands			400
Profit %			50
Order Size US$, average			600
New Customers count			1,500
Satisfaction 0 to 5			5

// This file locates: "Scripts/Lesson/C1Gauge/BulletGraphs.js".
c1.documentReady(function () {
    // dashboard dada
    var dashboard = [
      { heading: 'Revenue', sub: 'US$, thousands', max: 400, actual: 345, target: 340, bad: 210, good: 300 },
      { heading: 'Profit', sub: '%', max: 50, actual: 37, target: 32, bad: 20, good: 30 },
      { heading: 'Order Size', sub: 'US$, average', max: 600, actual: 320, target: 520, bad: 400, good: 500 },
      { heading: 'New Customers', sub: 'count', max: 1500, actual: 1100, target: 1000, bad: 600, good: 900 },
      { heading: 'Satisfaction', sub: '0 to 5', max: 5, actual: 4, target: 4.5, bad: 2.5, good: 4.5 },
    ];
 
    // create the dashboard
    var table = document.createElement('table');
    document.getElementById('dashboard').appendChild(table);
    dashboard.forEach(function (item) {
        var tr = document.createElement('tr');
        table.appendChild(tr);
 
        // heading
        var td = document.createElement('td');
        tr.appendChild(td);
        var fmt = '<div class="heading">{heading}</div><div class="sub">{sub}</div>';
        td.innerHTML = wijmo.format(fmt, item);
 
        // warning
        td = document.createElement('td');
        tr.appendChild(td);
        if (item.actual < item.target) {
            td.innerHTML = '<span class="glyphicon glyphicon-thumbs-down warning"></span>';
        }
 
        // bullet graph
        td = document.createElement('td');
        tr.appendChild(td);
        var bg = new wijmo.gauge.BulletGraph(document.createElement('div'), {
            value: item.actual,
            target: item.target,
            max: item.max,
            bad: item.bad,
            good: item.good
        });
        td.appendChild(bg.hostElement);
 
        // max value
        td = document.createElement('td');
        tr.appendChild(td);
        td.innerHTML = wijmo.format('<div class="max">{max:n0}</span>', item);
    });
});

// This file locates: "Content/css/Lesson/C1Gauge/BulletGraphs.css".
#dashboard {
  padding: 12px;
  background: rgba(0, 0, 0, .02);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);  
}
.heading {
  font-weight: bold;
  text-align: right;
}
.sub {
  font-size: 70%;
  text-align: right;
}
.max {
  font-size: 70%;
}
.warning {
  color: darkred;
  padding-left: 12px;
}
.wj-gauge {
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 6px;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1GaugeController : Controller
    {
        // GET: BulletGraphs
        public ActionResult BulletGraphs()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Gauge.BulletGraphs_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Gauge.BulletGraphs_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Gauge.BulletGraphs_Text2)
</p>
 
<div id="dashboard">
</div>