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.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<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°: ' + arg.value + '°C<br>' + 'Average t°: ' + arg.target + '°C'
};
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
namespace DevExtreme.NETCore.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;
}