Two gauges height is really large - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: %, gauge, height, jqxgauge, percent, percentage, pixel

This topic contains 2 replies, has 2 voices, and was last updated by Dimitar 9 years, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Two gauges height is really large Posts
May 17, 2015 at 3:02 am Two gauges height is really large #71196

silgarth
Participant

Generating two gauges and the height in pixels is enormous.

<html> <head>
<style>
body {
background: url(../images/beer-o-clock-jun_ONG.jpg) no-repeat center center fixed;
background-size: cover;
}
</style>
<link rel=”stylesheet” href=”../scripts/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js’></script>
<script type=”text/javascript” src=”../scripts/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../scripts/jqwidgets/jqxchart.js”></script>
<script type=”text/javascript” src=”../scripts/jqwidgets/jqxgauge.js”></script>
<script>
$(document).ready(function() {
$(‘#gaugeContainer0’).jqxGauge({
ranges: [{ startValue: 0, endValue: 55, style: { fill: ‘#C9C9C9’, stroke: ‘#C9C9C9’ }, endWidth: 5, startWidth: 1 },
{ startValue: 55, endValue: 110, style: { fill: ‘#FCF06A’, stroke: ‘#FCF06A’ }, endWidth: 10, startWidth: 5 },
{ startValue: 110, endValue: 165, style: { fill: ‘#FCA76A’, stroke: ‘#FCA76A’ }, endWidth: 15, startWidth: 10 },
{ startValue: 165, endValue: 220, style: { fill: ‘#FC6A6A’, stroke: ‘#FC6A6A’ }, endWidth: 20, startWidth: 15}],
ticksMinor: { interval: 5, size: ‘5%’ },
ticksMajor: { interval: 10, size: ‘9%’ },
width: ‘60%’, height: ‘90%’, radius: ‘10%’,
caption: { value: ‘Brewer’, position: ‘bottom’, offset: [0, 10], visible: true},
value: 0,
colorScheme: ‘scheme03’,
animationDuration: 1200
});
$(‘#gaugeContainer0’).jqxGauge(‘value’, 75.3116);
$(‘#gaugeContainer1’).jqxGauge({
ranges: [{ startValue: 0, endValue: 55, style: { fill: ‘#C9C9C9’, stroke: ‘#C9C9C9’ }, endWidth: 5, startWidth: 1 },
{ startValue: 55, endValue: 110, style: { fill: ‘#FCF06A’, stroke: ‘#FCF06A’ }, endWidth: 10, startWidth: 5 },
{ startValue: 110, endValue: 165, style: { fill: ‘#FCA76A’, stroke: ‘#FCA76A’ }, endWidth: 15, startWidth: 10 },
{ startValue: 165, endValue: 220, style: { fill: ‘#FC6A6A’, stroke: ‘#FC6A6A’ }, endWidth: 20, startWidth: 15}],
ticksMinor: { interval: 5, size: ‘5%’ },
ticksMajor: { interval: 10, size: ‘9%’ },
width: ‘60%’, height: ‘90%’, radius: ‘10%’,
caption: { value: ’28-000006ae3754′, position: ‘bottom’, offset: [0, 10], visible: true},
value: 0,
colorScheme: ‘scheme03’,
animationDuration: 1200
});
$(‘#gaugeContainer1’).jqxGauge(‘value’, 75.2);
});
</script>
</head> <body>
<div id=”gaugeContainer0″></div>
<div id=”gaugeContainer1″></div>
</body> </html>

May 17, 2015 at 3:03 am Two gauges height is really large #71197

silgarth
Participant

<div id=”gaugeContainer0″ aria-valuenow=”75.3116″ aria-valuemin=”0″ aria-valuemax=”220″ aria-disabled=”false” style=”width: 940.2px; height: 30198987.9px;” class=”jqx-widget”><div style=”width: 940.2px; height: 30198987.9px;”><table id=”tblChart” cellspacing=”0″ cellpadding=”0″ border=”0″ align=”left” valign=”top”><tbody><tr><td colspan=”2″ id=”tdTop”></td></tr><tr><td id=”tdLeft”></td><td><div class=”chartContainer” onselectstart=”return false;” style=”width: 939px; height: 30198987px;”><svg id=”svgChart” version=”1.1″ width=”100%” height=”100%” overflow=”hidden”><defs><linearGradient x1=”0%” y1=”0%” x2=”0%” y2=”100%” id=”grd1431831049721BABABAv”><stop offset=”0%” style=”stop-color:#BABABA”></stop><stop offset=”25%” style=”stop-color:#CDCDCD”></stop><stop offset=”50%” style=”stop-color:#FFFFFF”></stop><stop offset=”100%” style=”stop-color:#BABABA”></stop></linearGradient><linearGradient x1=”0%” y1=”0%” x2=”0%” y2=”100%” id=”grd1431831049721ffffffv”></linearGradient></defs><circle cx=”91.5″ cy=”91.5″ r=”91″ stroke=”#cccccc” fill=”url(http://192.168.1.65/~pi/public_html/wsgi-scripts/temp.wsgi#grd1431831049721BABABAv)”></circle><circle cx=”91.5″ cy=”91.5″ r=”82″ fill=”#ffffff” stroke=”#E0E0E0″></circle><path d=”M23.950018504813755,130.49999999999994 A78,78 100 0,1 23.950018504813812,52.499999999999964 L 28.280145523735996,54.999999999999964 A73,73 100 0,0 25.682069312382637,129.49999999999994 L 23.950018504813755,130.49999999999994 z” fill=”#C9C9C9″ stroke=”#C9C9C9″ visibility=”visible” class=”jqx-gauge-range”></path><path d=”M23.950018504813812,52.499999999999964 A78,78 100 0,1 91.50000000000004,13.5 L 91.50000000000004,23.5 A68,68 100 0,0 28.280145523735996,54.999999999999964 L 23.950018504813812,52.499999999999964 z” fill=”#FCF06A” stroke=”#FCF06A” visibility=”visible” class=”jqx-gauge-range”></path><path d=”M91.50000000000004,13.5 A78,78 100 0,1 159.04998149518622,52.500000000000014 L 146.05960043841964,60.000000000000014 A63,63 100 0,0 91.50000000000004,23.5 L 91.50000000000004,13.5 z” fill=”#FCA76A” stroke=”#FCA76A” visibility=”visible” class=”jqx-gauge-range”></path><path d=”M159.04998149518622,52.500000000000014 A78,78 100 0,1 159.0499814951862,130.50000000000006 L 141.72947341949742,120.50000000000004 A58,58 100 0,0 146.05960043841964,60.000000000000014 L 159.04998149518622,52.500000000000014 z” fill=”#FC6A6A” stroke=”#FC6A6A” visibility=”visible” class=”jqx-gauge-range”></path><line x1=”34.342323350227026″ y1=”124.49999999999996″ x2=”40.4045011767181″ y2=”120.99999999999996″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”29.129945964831876″ y1=”113.08648557894982″ x2=”35.74495169583455″ y2=”110.79700983572786″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”31.464288306601773″ y1=”118.91739085812448″ x2=”35.10281628801985″ y2=”117.25573080611693″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”26.171784835858432″ y1=”100.8927793260368″ x2=”33.10053492902497″ y2=”99.8965754581238″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”25.574755613921468″ y1=”88.35959355563298″ x2=”32.56682698820253″ y2=”88.69266696639917″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”27.360436490646237″ y1=”107.06008974362216″ x2=”31.247682763940404″ y2=”106.11705400158445″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”27.360436490646265″ y1=”75.93991025637776″ x2=”34.16311746891105″ y2=”77.59022280494375″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”31.464288306601816″ y1=”64.08260914187545″ x2=”37.831712274083436″ y2=”66.99051423288866″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”25.574755613921468″ y1=”94.640406444367″ x2=”29.570224970653506″ y2=”94.45007878107202″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”37.73798716467784″ y1=”53.216243968300915″ x2=”43.440018829030194″ y2=”57.2766423352993″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”45.95478524218062″ y1=”43.73355348506536″ x2=”50.785338322555404″ y2=”48.79969175180085″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”26.171784835858446″ y1=”82.10722067396311″ x2=”30.131070603382177″ y2=”82.67648002705626″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”55.817706047930585″ y1=”35.977266833142025″ x2=”59.60219177011976″ y2=”41.8660415629603″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”66.97027792641842″ y1=”30.22771642093919″ x2=”69.57191511604071″ y2=”36.726291952051696″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”29.12994596483189″ y1=”69.91351442105015″ x2=”32.90994923969056″ y2=”71.22178627431984″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”79.00941787221295″ y1=”26.692705980661344″ x2=”80.33417658273582″ y2=”33.5662068615003″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”91.50000000000004″ y1=”25.5″ x2=”91.50000000000003″ y2=”32.5″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”34.34232335022707″ y1=”58.49999999999997″ x2=”37.80642496536482″ y2=”60.49999999999997″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”103.99058212778709″ y1=”26.69270598066136″ x2=”102.66582341726422″ y2=”33.56620686150031″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”116.02972207358167″ y1=”30.22771642093923″ x2=”113.42808488395937″ y2=”36.72629195205174″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”41.620528092618976″ y1=”48.27919155961116″ x2=”44.64352639003601″ y2=”50.898634495392294″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”127.18229395206947″ y1=”35.97726683314206″ x2=”123.3978082298803″ y2=”41.866041562960326″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”137.04521475781942″ y1=”43.7335534850654″ x2=”132.21466167744464″ y2=”48.79969175180089″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”50.7015069094401″ y1=”39.620495746976″ x2=”53.17414285432251″ y2=”42.764708125947145″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”145.2620128353222″ y1=”53.21624396830097″ x2=”139.55998117096985″ y2=”57.27664233529936″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”151.53571169339824″ y1=”64.08260914187551″ x2=”145.1682877259166″ y2=”66.99051423288871″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”61.257049565990926″ y1=”32.83686038877505″ x2=”63.08995565290056″ y2=”36.392202183394744″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”155.63956350935376″ y1=”75.93991025637783″ x2=”148.83688253108897″ y2=”77.59022280494382″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”157.42524438607853″ y1=”88.35959355563305″ x2=”150.43317301179746″ y2=”88.69266696639924″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”72.90565124846566″ y1=”28.173463741443165″ x2=”74.03258147583138″ y2=”32.01143563590116″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”156.82821516414157″ y1=”100.89277932603684″ x2=”149.89946507097503″ y2=”99.89657545812385″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”153.8700540351681″ y1=”113.08648557894986″ x2=”147.25504830416543″ y2=”110.7970098357279″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”85.22630114192398″ y1=”25.79885311017641″ x2=”85.6065253151407″ y2=”29.78074080046875″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”148.65767664977292″ y1=”124.50000000000004″ x2=”142.59549882328184″ y2=”121.00000000000004″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-major”></line><line x1=”97.7736988580761″ y1=”25.798853110176424″ x2=”97.39347468485937″ y2=”29.780740800468756″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”110.09434875153441″ y1=”28.173463741443186″ x2=”108.96741852416869″ y2=”32.01143563590118″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”121.74295043400915″ y1=”32.83686038877508″ x2=”119.9100443470995″ y2=”36.39220218339477″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”132.29849309056″ y1=”39.620495746976054″ x2=”129.82585714567756″ y2=”42.7647081259472″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”141.3794719073811″ y1=”48.279191559611235″ x2=”138.35647360996404″ y2=”50.89863449539237″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”148.65767664977295″ y1=”58.500000000000014″ x2=”145.19357503463522″ y2=”60.500000000000014″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”153.87005403516812″ y1=”69.9135144210502″ x2=”150.09005076030945″ y2=”71.22178627431988″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”156.82821516414157″ y1=”82.10722067396321″ x2=”152.86892939661783″ y2=”82.67648002705636″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”157.42524438607853″ y1=”94.64040644436702″ x2=”153.4297750293465″ y2=”94.45007878107204″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”155.63956350935374″ y1=”107.06008974362223″ x2=”151.75231723605958″ y2=”106.11705400158452″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><line x1=”151.5357116933982″ y1=”118.91739085812452″ x2=”147.89718371198012″ y2=”117.25573080611697″ stroke=”#898989″ stroke-width=”1″ class=”jqx-gauge-tick-minor”></line><text class=”jqx-gauge-label” cursor=”default” x=”44″ y=”121″ width=”7″ height=”8″>0</text><text class=”jqx-gauge-label” cursor=”default” x=”34″ y=”103″ width=”14″ height=”8″>20</text><text class=”jqx-gauge-label” cursor=”default” x=”35″ y=”83″ width=”14″ height=”8″>40</text><text class=”jqx-gauge-label” cursor=”default” x=”43″ y=”66″ width=”14″ height=”8″>60</text><text class=”jqx-gauge-label” cursor=”default” x=”57″ y=”53″ width=”14″ height=”8″>80</text><text class=”jqx-gauge-label” cursor=”default” x=”72″ y=”45″ width=”21″ height=”8″>100</text><text class=”jqx-gauge-label” cursor=”default” x=”91″ y=”45″ width=”21″ height=”8″>120</text><text class=”jqx-gauge-label” cursor=”default” x=”109″ y=”53″ width=”21″ height=”8″>140</text><text class=”jqx-gauge-label” cursor=”default” x=”123″ y=”66″ width=”21″ height=”8″>160</text><text class=”jqx-gauge-label” cursor=”default” x=”131″ y=”83″ width=”21″ height=”8″>180</text><text class=”jqx-gauge-label” cursor=”default” x=”132″ y=”103″ width=”21″ height=”8″>200</text><text class=”jqx-gauge-label” cursor=”default” x=”126″ y=”121″ width=”21″ height=”8″>220</text><text class=”jqx-gauge-caption” cursor=”default” x=”71″ y=”151″ width=”41″ height=”8″>Brewer</text><path d=”M 90.21029331613964,91.61348459920872 L 91.78970668386036,90.38651540079128 L 56.03137784510292,45.98671901995989″ z-index=”0″ stroke=”#E8601A” fill=”#E8601A” stroke-width=”1″ style=”visibility: visible;”></path><circle cx=”91.5″ cy=”91.5″ r=”3″ fill=”#E8601A” stroke-width=”1px” stroke=”#E8601A” z-index=”30″ style=”visibility: visible;”></circle></svg></div></td></tr></tbody></table></div></div>

May 18, 2015 at 5:33 am Two gauges height is really large #71205

Dimitar
Participant

Hello silgarth,

We tested your example with the latest version (3.8.0) and experienced no such issue. Please make sure you are using the latest version, too (note that the required files for jqxGauge are now jqxcore.js, jqxdraw.js and jqxgauge.js). If the issue persists, share what browser you test on and its version.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.