jQuery UI Widgets Forums Gauges and Maps Gauges Two gauges height is really large

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • 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>

    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>

    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/

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

You must be logged in to reply to this topic.