This sample demonstrates how to specify custom linear gauge tooltips.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Custom Tooltips 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"> $(document).ready(function () { var gradient1 = { type: 'linearGradient', x0: 0.5, y0: 0, x1: 0.5, y1: 1, colorStops: [{ offset: 0, color: '#C5F80B' }, { offset: 1, color: '#6B8901'}] }; var gradient2 = { type: 'linearGradient', x0: 0.5, y0: 0, x1: 0.5, y1: 1, colorStops: [{ offset: 0, color: '#FF3366' }, { offset: 1, color: '#B2183E'}] }; var gradient3 = { type: 'linearGradient', x0: 0.5, y0: 0, x1: 0.5, y1: 1, colorStops: [{ offset: 0, color: '#339CFF' }, { offset: 1, color: '#1F66A8'}] }; var needleGradient = { type: 'linearGradient', x0: 0, y0: 0.5, x1: 1, y1: 0.5, colorStops: [{ offset: 0, color: '#4F6169' }, { offset: 1, color: '#252E32'}] }; $('#jqLinearGauge').jqLinearGauge({ orientation: 'horizontal', background: '#F7F7F7', border: { padding: 10, lineWidth: 4, strokeStyle: '#76786A' }, tooltips: { disabled: false, highlighting: true }, animation: { duration: 1 }, scales: [ { name: 'Main Scale', minimum: 0, maximum: 100, labels: { offset: 0.16 }, majorTickMarks: { length: 10, offset: 0.28, lineWidth: 2 }, minorTickMarks: { length: 6, visible: true, interval: 2, offset: 0.34, lineWidth: 2 }, ranges: [ { startValue: 0, endValue: 40, innerOffset: 0.46, outerStartOffset: 0.64, outerEndOffset: 0.75, fillStyle: gradient1 }, { startValue: 40, endValue: 70, innerOffset: 0.46, outerStartOffset: 0.75, outerEndOffset: 0.84, fillStyle: gradient2 }, { startValue: 70, endValue: 100, innerOffset: 0.46, outerStartOffset: 0.84, outerEndOffset: 0.90, fillStyle: gradient3 } ], needles: [ { type: 'pointer', value: 80, fillStyle: needleGradient, innerOffset: 0.50, outerOffset: 1.00 } ] } ] }); $('#jqLinearGauge').bind('tooltipFormat', function (e, data) { var tooltip = '<b>Element: ' + data.elementType + '</b> ' + '<br />'; switch (data.elementType) { case 'needle': tooltip += 'Value: ' + data.value; break; case 'barMarker': tooltip += 'Value: ' + data.value + '<br />' + data.tooltipText; break; case 'range': tooltip += 'Start Value: ' + data.startValue + '<br/>End Value: ' + data.endValue; } return tooltip + '<br />' + 'Scale Name: ' + data.scale.name; }); }); </script> </head> <body> <div> <div id="jqLinearGauge" style="width: 400px; height: 100px;"> </div> </div> </body> </html> |