Databases
StackOverflow2013
Postsdbo
POHighcharts VU Meter Gauge numeric display disapears
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHighcharts VU Meter Gauge numeric display disapears
    primarykey
    data
    text
    <p>An interesting little "quirk" using the sample of the VU gauge. When I try to reposition the gauge pane, the numeric display will just disappear. If I keep the position &lt;= 100%, the display will show, anything > 100% and the numeric display is gone. </p> <p>I have repeatedly tried to force the display back into a position where it can be seen, but no luck. Any ideas? Here is the latest test fiddle: </p> <p><a href="http://jsfiddle.net/radi8/Z2s77/11" rel="nofollow">VU Meter Fiddle</a></p> <p>Adjusting the elements is easy, use the pane: section to move the entire gauge with the display pane, use the datalabel: section to move the numeric display.</p> <pre><code>$(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'gauge', plotBorderWidth: 1, plotBackgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#FFF4C6'], [0.3, '#FFFFFF'], [1, '#FFF4C6'] ] }, plotBackgroundImage: null, height: 200 }, title: { text: 'Efficiencies' }, /*** in order to move the gauge up or down in the pane, adjust the 'Y' element in the center array. Adjusting this above 100% (to move the gauge DOWN) will cause the numeric display to disappear ***/ pane: [{ startAngle: -45, endAngle: 45, background: null, center: ['25%', '100%'], size: 200 }, { startAngle: -45, endAngle: 45, background: null, center: ['75%', '105%'], size: 200 }], yAxis: [{ min: 0, max: 110, minorTickPosition: 'outside', tickPosition: 'outside', labels: { rotation: 'auto', distance: 20 }, plotBands: [{ from: 0, to: 70, color: '#DF5353', // red innerRadius: '100%', outerRadius: '105%' }, { from: 70, to: 95, color: '#DDDF0D', // yellow innerRadius: '100%', outerRadius: '105%' }, { from: 95, to: 110, color: '#55BF3B', // green innerRadius: '100%', outerRadius: '105%' }], pane: 0, title: { text: '&lt;span style="font-size:10px"&gt;OEE %&lt;/span&gt;&lt;br/&gt;&lt;span style="font-size:8px"&gt;Machine 001&lt;/span&gt;', y: -30 } }, { min: 0, max: 110, minorTickPosition: 'outside', tickPosition: 'outside', labels: { rotation: 'auto', distance: 20 }, plotBands: [{ from: 0, to: 70, color: '#DF5353', // red innerRadius: '100%', outerRadius: '105%' }, { from: 70, to: 95, color: '#DDDF0D', // yellow innerRadius: '100%', outerRadius: '105%' }, { from: 95, to: 110, color: '#55BF3B', // green innerRadius: '100%', outerRadius: '105%' }], pane: 1, title: { text: '&lt;span style="font-size:10px"&gt;Cycle Eff %&lt;/span&gt;&lt;br/&gt;&lt;span style="font-size:8px"&gt;Machine 001&lt;/span&gt;', y: -30 } }], plotOptions: { gauge: { /*** Adjusting the position of the numeric display is also easy Change the y: component more negative move the display UP, decreasing the value move the display DOWN ***/ dataLabels: { enabled: true, x: 0, y: -120 }, dial: { radius: '110%' } } }, series: [{ data: [80], yAxis: 0 }, { data: [80], yAxis: 1 }] }, // Let the music play function(chart) { setInterval(function() { var left = chart.series[0].points[0], right = chart.series[1].points[0], leftVal, //inc = (Math.random() - 0.5) * 30; inc1 = Math.random() * (30) + 70; inc2 = Math.random() * (30) + 70; leftVal = left.y + inc1; rightVal = right.y + inc2; // / 3; if (leftVal &lt; 0 || leftVal &gt; 110) { //leftVal = left.y - inc; leftVal = 110 - inc1; } if (rightVal &lt; 0 || rightVal &gt; 110) { rightVal = 110 - inc2; } left.update(parseInt(leftVal),false); right.update(parseInt(rightVal), false);//, false); chart.redraw(); }, 1500); }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USradi8
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHighcharts VU Meter Gauge numeric display disapears
      1. USradi8
      1. VTBountyStart
    1. COReported issue on tracker, see: https://github.com/highslide-software/highcharts.com/issues/1657
      singulars
      1. POHighcharts VU Meter Gauge numeric display disapears
      1. USPaweł Fus
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload