Your search did not match any results.
Bullet Charts

Bullet Charts

Documentation

This demo shows a collection of bullets. Here, the horizontal bar of each bullet indicates the current temperature, while its vertical line indicates the average temperature for a corresponding week.

<div class="long-title"><h3>Daily temperature</h3></div> <div id="chart-demo"> <table class="demo-table"> <tr> <th> </th> <th>June</th> <th>July</th> <th>August</th> </tr> <tr> <th>First week</th> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(23) .Target(20) .Color("#ebdd8f") ) </td> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(27) .Target(24) ) </td> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(20) .Target(26) .Color("#e55253") ) </td> </tr> <tr> <th>Second week</th> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(24) .Target(22) .Color("#ebdd8f") ) </td> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(28) .Target(24) ) </td> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(30) .Target(24) .Color("#e55253") ) </td> </tr> <tr> <th>Third week</th> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(35) .Target(24) .Color("#ebdd8f") ) </td> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(24) .Target(26) ) </td> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(28) .Target(22) .Color("#e55253") ) </td> </tr> <tr> <th>Fourth week</th> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(29) .Target(25) .Color("#ebdd8f") ) </td> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(24) .Target(27) ) </td> <td> @(Html.DevExtreme().Bullet() .StartScaleValue(0) .EndScaleValue(35) .Tooltip(t => t.CustomizeTooltip("customizeTooltip")) .ElementAttr("class", "bullet") .Value(21) .Target(21) .Color("#e55253") ) </td> </tr> </table> </div> <script> function customizeTooltip(arg) { return { text: 'Current t&#176: ' + arg.value + '&#176C<br>' + 'Average t&#176: ' + arg.target + '&#176C' }; } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult SimpleBullets() { return View(); } } }
#chart-demo { height: 440px; width: 100%; } .demo-table { margin-top: 80px; width: 100%; border: 1px solid #c2c2c2; border-collapse: collapse; } .demo-table th, .demo-table td { text-align: center; font-weight: 400; width: 200px; padding: 25px 10px 5px 10px; border: 1px solid #e5e5e5; } .demo-table th { padding: 25px 15px 20px 15px; border: 1px solid #c2c2c2; } .demo-table tr:nth-child(2) td { border-top: 1px solid #c2c2c2; } .demo-table td:first-of-type { border-left: 1px solid #c2c2c2; } .demo-table .bullet { width: 200px; height: 30px; } .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }