jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
43 lines (41 loc) • 2.31 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery BarGauge, BarGauge, Radial BarGauge, jqxBarGauge" />
<meta name="description" content="In the following demo you can see how to initialize basic jqxBarGauge with default settings. You can set range's start and end width, start and end distance from the gauge's bundaries and custom style." />
<title id='Description'>jqxBarGauge displays an indicator within a range of values. Gauges
can be used in a table or matrix to show the relative value of a field in a range
of values in the data region.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbargauge.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$('#barGauge').jqxBarGauge({
colorScheme: "scheme02",
width: getWidth('barGauge'),
height: getHeight('barGauge'),
values: [102, 115, 130, 137], max: 150, tooltip: {
visible: true, formatFunction: function (value)
{
var realVal = parseInt(value);
return ('Year: 2018<br/>Price Index:' + realVal);
},
}
});
});
</script>
</head>
<body>
<div id="barGauge"></div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>