ASP .NET Core MVC Documentation
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
<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.
To bind to an event of a UI widget, you can use<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>}
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>}