animationDuration
|
int
|
null
|
Sets or gets the animationDuration property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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>
|
barSize
|
string
|
50%
|
Sets or gets the barSize property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});"; } <jqx-bullet-chart bar-size="40%" 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>
|
description
|
string
|
'Description'
|
Sets or gets the description property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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)"></jqx-bullet-chart>
|
disabled
|
bool
|
false
|
Sets or gets the disabled property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});"; } <jqx-bullet-chart disabled="true" 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>
|
height
|
int
|
100
|
Sets or gets the height property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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)"></jqx-bullet-chart>
|
labelsFormat
|
string
|
null
|
Sets or gets the labelsFormat property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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)"></jqx-bullet-chart>
|
labelsFormatFunction
|
string
|
null
|
Sets or gets the labelsFormatFunction property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});"; } <jqx-bullet-chart labels-format-function="labelsFormatFunction" 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>
|
orientation
|
string
|
"horizontal"
|
Sets or gets the orientation property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});"; } <jqx-bullet-chart orientation="horizontal" 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>
|
pointer
|
string
|
{ value: 65, label: "Value", size: "25%", color: "" }
|
Sets or gets the pointer property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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)"></jqx-bullet-chart>
|
rtl
|
bool
|
false
|
Sets or gets the rtl property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});"; } <jqx-bullet-chart rtl="true" 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>
|
ranges
|
List<string>
|
[{ startValue: 0, endValue: 50, color: "#000000", opacity: 0.7 }, { startValue: 50, endValue: 80, color: "#000000", opacity: 0.5 }, { startValue: 80, endValue: 100, color: "#000000", opacity: 0.3}]
|
Sets or gets the ranges property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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)"></jqx-bullet-chart>
|
showTooltip
|
bool
|
true
|
Sets or gets the showTooltip property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});"; } <jqx-bullet-chart show-tooltip="false" 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>
|
target
|
string
|
{ value: 85, label: "Target", size: 4, color: "" };
|
Sets or gets the target property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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)"></jqx-bullet-chart>
|
ticks
|
string
|
{ position: "far", interval: 20, size: 10 }
|
Sets or gets the ticks property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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)"></jqx-bullet-chart>
|
title
|
string
|
'Title'
|
Sets or gets the title property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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)"></jqx-bullet-chart>
|
tooltipFormatFunction
|
string
|
null
|
Sets or gets the tooltipFormatFunction property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});"; } <jqx-bullet-chart tooltip-format-function="tooltipFormatFunction" 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>
|
width
|
int
|
500
|
Sets or gets the width property.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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)"></jqx-bullet-chart>
|
|
change
|
Event
|
|
Code examples
Bind to the change event of jqxBulletChart.
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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) {
|
|
destroy
|
Method
|
|
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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) {
|
render
|
Method
|
|
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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) {
|
refresh
|
Method
|
|
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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) {
|
val
|
Method
|
|
<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 labelsFormat Function = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };" string tooltipFormat Function = "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) {
|