This sample demonstrates how to specify linear gauge live data.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Live Data Example - HTML5 jQuery Linear Gauge Plugin by jqChart </title> <link rel="stylesheet" type="text/css" href="../../css/jquery.jqGauges.css" /> <script src="../../js/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../../js/jquery.jqGauges.min.js" type="text/javascript"></script> <script lang="javascript" type="text/javascript"> var values = { v1: 80, v2: 70, v3: 90 }; $(document).ready(function () { var gradient1 = { type: 'linearGradient', x0: 0, y0: 0.5, x1: 1, y1: 0.5, colorStops: [{ offset: 0, color: '#C5F80B' }, { offset: 1, color: '#6B8901'}] }; var gradient2 = { type: 'linearGradient', x0: 0, y0: 0.5, x1: 1, y1: 0.5, colorStops: [{ offset: 0, color: '#FF3366' }, { offset: 1, color: '#B2183E'}] }; var gradient3 = { type: 'linearGradient', x0: 0, y0: 0.5, x1: 1, y1: 0.5, colorStops: [{ offset: 0, color: '#339CFF' }, { offset: 1, color: '#1F66A8'}] }; $('#jqLinearGauge').jqLinearGauge({ orientation: 'vertical', background: '#F7F7F7', border: { lineWidth: 4, strokeStyle: '#76786A', padding: 8 }, scales: [ { minimum: 0, maximum: 100, interval: 10, labels: { offset: 0.03 }, majorTickMarks: { offset: 0.20, lineWidth: 2 }, minorTickMarks: { visible: true, offset: 0.24, interval: 2, lineWidth: 2 }, barMarkers: [ { value: values.v1, fillStyle: gradient1, innerOffset: 0.40, outerOffset: 0.56 }, { value: values.v2, fillStyle: gradient2, innerOffset: 0.60, outerOffset: 0.76 }, { value: values.v3, fillStyle: gradient3, innerOffset: 0.80, outerOffset: 0.96 } ] } ] }); updateGauge(); }); function updateGauge() { $(values).animate({ v1: Math.round(20 + Math.random() * 80), v2: Math.round(20 + Math.random() * 80), v3: Math.round(20 + Math.random() * 80) }, { duration: 600, step: function () { var scales = $('#jqLinearGauge').jqLinearGauge('option', 'scales'); scales[0].barMarkers[0].value = this.v1; scales[0].barMarkers[1].value = this.v2; scales[0].barMarkers[2].value = this.v3; $('#jqLinearGauge').jqLinearGauge('update'); }, complete: function () { setTimeout('updateGauge()', 400); } }); } </script> </head> <body> <div> <div id="jqLinearGauge" style="width: 110px; height: 400px;"> </div> </div> </body> </html> |