This sample demonstrates how to change a specific bullet graph options. With .jqBulletGraph("option",
optionName, [value]) method you can get or set any jqBulletGraph option. If no value
is specified, will act as a getter.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Change Options Example - HTML5 jQuery Bullet Graph 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 scaleBackgroundGradient = { type: 'linearGradient', x0: 0, y0: 1, x1: 0, y1: 0, colorStops: [{ offset: 0, color: '#A4D020' }, { offset: 0.993, color: '#BFFE01' }] }; var range1Gradient = { type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [{ offset: 0, color: '#61B603' }, { offset: 1, color: '#448100' }] }; var range2Gradient = { type: 'linearGradient', x0: 0, y0: 1, x1: 0, y1: 0, colorStops: [{ offset: 0, color: '#87B202' }, { offset: 1, color: '#A6DC01' }] }; var comparativeMeasureGradient = { type: 'linearGradient', x0: 0, y0: 0, x1: 1, y1: 0, colorStops: [{ offset: 0, color: '#E4E4E4' }, { offset: 0.552, color: '#FFFFFF' }] }; var featuredMeasureGradient = { type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [{ offset: 0, color: '#BABABA' }, { offset: 0.495, color: '#FFFFFF' }] }; $('#jqBulletGraph').jqBulletGraph({ orientation: 'horizontal', border: { lineWidth: 0 }, tooltips: { disabled: false, highlighting: false }, quantitativeScale: { name: 'Main Scale', minimum: 0, maximum: 100, background: scaleBackgroundGradient, labels: { offset: 0.95 }, qualitativeRanges: [ { value: 47, fillStyle: range1Gradient }, { value: 70, fillStyle: range2Gradient } ] }, comparativeMeasures: [ { title: 'Comparative Measure', value: 80, fillStyle: comparativeMeasureGradient } ], featuredMeasures: [ { title: 'Featured Measure', value: 90, innerOffset: 0.4, outerOffset: 0.6, fillStyle: featuredMeasureGradient } ] }); $('#buttonBackground').click(function () { $('#jqBulletGraph').jqBulletGraph('option', 'background', '#FF3366'); }); $('#buttonRandomValue').click(function () { var featuredMeasures = $('#jqBulletGraph').jqBulletGraph('option', 'featuredMeasures'); featuredMeasures[0].value = Math.random() * 100; $('#jqBulletGraph').jqBulletGraph('update'); }); }); </script> </head> <body> <div> <div id="jqBulletGraph" style="width: 400px; height: 80px;"> </div> <br /> <input id="buttonBackground" type="button" value="Change background" /> <input id="buttonRandomValue" type="button" value="Change featured measure value" /> <br /> </div> </body> </html> |