jqwidgets-framework
Version:
jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
83 lines (79 loc) • 4.19 kB
HTML
<html lang="en">
<head>
<title id='Description'>This demo showcases the 64-bit number support of jqxGauge and
how to change the decimal notation of its labels.</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/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#gaugeContainer').jqxGauge({
int64: true,
width: 500,
height: 500,
startAngle: 40,
endAngle: 300,
ranges: [{ startValue: '0', endValue: '250000000000000', style: { fill: '#CCCCE6', stroke: '#B2B2D9' }, endWidth: 5, startWidth: 1 },
{ startValue: '250000000000000', endValue: '500000000000000', style: { fill: '#9999CC', stroke: '#8080C0' }, endWidth: 10, startWidth: 5 },
{ startValue: '500000000000000', endValue: '750000000000000', style: { fill: '#6666B3', stroke: '#4D4DA6' }, endWidth: 15, startWidth: 10 },
{ startValue: '750000000000000', endValue: '1000000000000000', style: { fill: '#333399', stroke: '#19198D' }, endWidth: 20, startWidth: 15}],
ticksMinor: { interval: '50000000000000', size: '5%' },
ticksMajor: { interval: '250000000000000', size: '9%' },
labels: {
interval: '100000000000000',
formatValue: function (value) {
return value;
}
},
cap: { style: { fill: '#333399', stroke: '#19198D'} },
pointer: { style: { fill: '#333399', stroke: '#19198D'} },
min: '0',
max: '1000000000000000',
value: '0',
colorScheme: 'scheme03',
animationDuration: 1200
});
$('#gaugeContainer').jqxGauge({ value: '300000000000000' });
$('#decimal').jqxRadioButton({ checked: true });
$('#exponential, #scientific, #engineering').jqxRadioButton();
$('#decimal, #exponential, #scientific, #engineering').on('change', function (event) {
var checked = event.args.checked;
if (checked === true) {
$('#gaugeContainer').jqxGauge({
labels: {
interval: '100000000000000',
formatValue: function (value) {
var formattedValue = new $.jqx.math().getDecimalNotation(value, event.target.id);
return formattedValue;
}
}
});
}
});
});
</script>
</head>
<body style="background: white;">
<div id="gaugeContainer" style="float: left;">
</div>
<div style="float: left;">
<div style="font-size: small; font-family: Verdana;">
Labels notation:</div>
<div style="margin-top: 5px;" id="decimal">
Decimal notation</div>
<div style="margin-top: 2px;" id="exponential">
Exponential notation</div>
<div style="margin-top: 2px;" id="scientific">
Scientific notation</div>
<div style="margin-top: 2px;" id="engineering">
Engineering notation</div>
</div>
</body>
</html>