jQWidgets Forums

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

Tagged: , , , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  Dimitar 10 years, 1 month 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.