Getting Started

jqxBulletChart represents a UI component which features two measures - a primary one (the pointer) and a comparative one (the target) and displays them in the context of a number of differently styled qualitative ranges.

Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

jqxBulletChart widget requires the following files:

• jqxbulletchart.js
• jqxtooltip.js

The next step is to create html element within the body of the html document and add the initialization attributes.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart animation-duration="500" labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>

To call a function(method), you need to pass the method name and parameters(if any) in the jqxBulletChart’s instance.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)" instance="getInstance()"></jqx-bullet-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["val"](50);									
	}									
</script>									
}       
        

To bind to an event of a UI widget, you can use on-event-type syntax. The example code below demonstrates how to bind to an event.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart on-change="eventHandler()"></jqx-bullet-chart>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}
    

Basic Sample