For some reasons canvas is widht/height zeroed
SledgehammerPL opened this issue · 1 comments
SledgehammerPL commented
I tried to use it in my script, and i did it in two loops. In one loop everything works, in second - canvas width/height is zeroed...
I look at it few time, it is a copy of the first loop...
The only difference is that first is outside table, the second is nested table..
First i thought that place for this is too small, but I add a row for gauge... The same.....
In my code canvas has height i width set the same as in first loop....
I found that one property is different: gauge.availableheight is 120 for ggauge and 0 for tgauge... But why?
<html>
<body>
<!--StartFragment-->
<script>
--
| var opts = {
|
| // color configs
| colorStart: "#6fadcf",
| colorStop: void 0,
| gradientType: 0,
| strokeColor: "#e0e0e0",
| generateGradient: true,
| percentColors: [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]],
|
| // customize pointer
| pointer: {
| length: 0.8,
| strokeWidth: 0.035,
| iconScale: 1.0
| },
|
| // static labels
| staticLabels: {
| font: "10px sans-serif",
| fractionDigits: 2
| },
| renderTicks: {
| divisions: 5,
| divWidth: 1.1,
| divLength: 0.7,
| divColor: '#333333',
| subDivisions: 3,
| subLength: 0.5,
| subWidth: 0.6,
| subColor: '#666666'
| },
|
|
| // the span of the gauge arc
| angle: 0.15,
|
| // line thickness
| lineWidth: 0.44,
|
| // radius scale
| radiusScale: 1.0,
|
| // font size
| fontSize: 40,
|
| // if false, max value increases automatically if value > maxValue
| limitMax: false,
|
| // if true, the min value of the gauge will be fixed
| limitMin: false,
|
| // High resolution support
| highDpiSupport: true
|
| };
| </script>
<!--EndFragment-->
<!--StartFragment-->
--
<td class="text-center"><div class="text-center">7,77%</div>
| <canvas width=380 height=150 id="groupgauge5"></canvas>
|
|
| <script>
|
| let g5opts = JSON.parse(JSON.stringify(opts));
| g5opts.staticLabels.labels= [0, 3.812000000000000211608508494, 15.24800000000000084643403397, 22.87199999999999915356596603, 34.30800000000000084643403397];
| g5opts.staticZones= [
| {strokeStyle: "#F03E3E", min: 0, max: 3.812000000000000211608508494},
| {strokeStyle: "#FFDD00", min: 3.812000000000000211608508494, max: 15.24800000000000084643403397},
| {strokeStyle: "#30B32D", min: 15.24800000000000084643403397, max: 22.87199999999999915356596603},
| {strokeStyle: "#FFDD00", min: 22.87199999999999915356596603, max: 34.30800000000000084643403397},
| {strokeStyle: "#F03E3E", min: 34.30800000000000084643403397, max: 38.1200}
| ];
|
| // render ticks
| var gtarget5 = document.getElementById('groupgauge5');
| var ggauge5 = new Gauge(gtarget5);
| ggauge5.setOptions(g5opts);
| ggauge5.maxValue = 38.1200;
| ggauge5.setMinValue(0);
| ggauge5.set(7.770998973617653558493646368);
| ggauge5.animationSpeed = 32
|
|
|
| </script>
|
<!--EndFragment-->
<!--StartFragment-->
<td colspan=5 class="text-center" width=400 height=300><div class="text-center">10,47%</div>
--
| <canvas width="0" height="0" id="tickergauge61"></canvas>
|
|
| <script>
|
| let t61opts = JSON.parse(JSON.stringify(opts));
| t61opts.staticLabels.labels= [0, 1.336000000000000074162898045, 5.344000000000000296651592180, 8.015999999999999703348407820, 12.02400000000000029665159218];
| t61opts.staticZones= [
| {strokeStyle: "#F03E3E", min: 0, max: 1.336000000000000074162898045},
| {strokeStyle: "#FFDD00", min: 1.336000000000000074162898045, max: 5.344000000000000296651592180},
| {strokeStyle: "#30B32D", min: 5.344000000000000296651592180, max: 8.015999999999999703348407820},
| {strokeStyle: "#FFDD00", min: 8.015999999999999703348407820, max: 12.02400000000000029665159218},
| {strokeStyle: "#F03E3E", min: 12.02400000000000029665159218, max: 13.3600}
| ];
|
| // render ticks
| var ttarget61 = document.getElementById('tickergauge61');
| var tgauge61 = new Gauge(ttarget61);
| tgauge61.setOptions(t61opts);
| tgauge61.maxValue = 13.3600;
| tgauge61.setMinValue(0);
| tgauge61.set(10.47165135556780200282856851);
| tgauge61.animationSpeed = 32;
|
|
|
| </script>
|
|
| </td>
|
| </tr>
<!--EndFragment-->
</body>
</html>
SledgehammerPL commented
I found.... The problem was, that this part is collapsed (hidden), thats why clientheight was zero....