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
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