New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Bullet Chart

  • Bullet Chart Settings
Series Target
First Item

This example demonstrates an ASP.NET AJAX Chart, configured as a Bullet Chart (it uses BulletSeries or VerticalBulletSeries). It is a variation of a bar or a column chart, depending on whether VerticalBulletSeries or BulletSeries are used. You can use it as a replacement for dashboard gauges and meters. The bullet graph compares a given quantitative measure (such as temperature) against qualitative ranges (e.g. warm, hot, mild, cool, chilly, cold, freezing, icy, frosty) and a symbol marker that encodes the comparative measure (for example the max temperature a year ago).

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.HtmlChart.ChartTypes.BulletChart.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="BulletChart1" Width="800" Height="500" Transitions="true">
            <PlotArea>
                <Series>
                    <telerik:VerticalBulletSeries>
                        <Target Color="#ffffff"></Target>
                        <SeriesItems>
                            <telerik:BulletSeriesItem Current="750" Target="762.5" />
                            <telerik:BulletSeriesItem Current="762" Target="770" />
                            <telerik:BulletSeriesItem Current="753" Target="760" />
                            <telerik:BulletSeriesItem Current="740" Target="760" />
                            <telerik:BulletSeriesItem Current="765" Target="768" />
                            <telerik:BulletSeriesItem Current="768" Target="770" />
                            <telerik:BulletSeriesItem Current="763" Target="768" />
                            <telerik:BulletSeriesItem Current="754" Target="768.5" />
                            <telerik:BulletSeriesItem Current="764" Target="773" />
                            <telerik:BulletSeriesItem Current="748" Target="765" />
                            <telerik:BulletSeriesItem Current="755" Target="758" />
                            <telerik:BulletSeriesItem Current="776" Target="783" />
                            <telerik:BulletSeriesItem Current="760" Target="762.5" />
                            <telerik:BulletSeriesItem Current="758" Target="766" />
                        </SeriesItems>
                    </telerik:VerticalBulletSeries>
                </Series>
                <XAxis AxisCrossingValue="0" MajorTickType="Outside" MinorTickType="Outside"
                    Reversed="false">
                    <Items>
                        <telerik:AxisItem LabelText="1"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="3"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="4"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="5"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="6"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="7"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="8"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="9"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="10"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="11"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="12"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="13"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="14"></telerik:AxisItem>
                    </Items>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="mmHg"></TitleAppearance>
                    <MajorGridLines Visible="false" />
                    <MinorGridLines Visible="false" />
                </XAxis>
                <YAxis AxisCrossingValue="0" MajorTickSize="1" MajorTickType="Outside" MinValue="715" MaxValue="790"
                    MinorTickType="None" Reversed="false">
                    <MajorGridLines Visible="false" />
                    <MinorGridLines Visible="false" />
                    <PlotBands>
                        <telerik:PlotBand From="715" To="752" Color="#2890cc" Alpha="200" />
                        <telerik:PlotBand From="752" To="772" Color="#2890cc" Alpha="100" />
                        <telerik:PlotBand From="772" To="790" Color="#2890cc" Alpha="200" />
                        <telerik:PlotBand From="761" To="761.5" Color="#ff0000" Alpha="0" />
                    </PlotBands>
                </YAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="BulletChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Bullet Chart Settings">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium" Title="Series Target">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="SeriesTargetLineWidth" runat="server" AutoPostBack="true" MaxLength="3" Label="Line Width" Size="Narrow">
                            </qsf:NumericTextBox>
                            <qsf:ColorPicker runat="server" ID="SeriesTargetColor" AutoPostBack="true" Label="Color" CssClass="fb-sized"></qsf:ColorPicker>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium" Title="First Item">
                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="ItemCurrent" runat="server" AutoPostBack="true" MaxLength="3" Label="Current" Size="Narrow">
                            </qsf:NumericTextBox>
                            <qsf:NumericTextBox ID="ItemTarget" runat="server" AutoPostBack="true" MaxLength="3" Label="Target" Size="Narrow">
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance