This sample demonstrates how to specify linear gradients.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Linear Gradients Example - HTML5 jQuery Linear Gauge JavaScript Plugin </title> <link rel="stylesheet" type="text/css" href="../../css/dataviz.gauges.css" /> <script src="../../js/dataviz.gauges.min.js" type="text/javascript"></script> <script lang="javascript" type="text/javascript"> var fillStyle1 = { type: 'linearGradient', x0: 0, y0: 0, x1: 1, y1: 0, colorStops: [{ offset: 0, color: '#65c2e8' }, { offset: 0.49, color: '#55b3e1' }, { offset: 0.5, color: '#3ba6dc' }, { offset: 1, color: '#2794d4' }] }; var fillStyle2 = { type: 'linearGradient', x0: 0, y0: 0, x1: 1, y1: 0, colorStops: [{ offset: 0, color: '#eea151' }, { offset: 0.49, color: '#ea8f44' }, { offset: 0.5, color: '#e67e28' }, { offset: 1, color: '#e06818' }] }; var linearGauge = new DataViz.LinearGauge({ orientation: 'vertical', background: '#F7F7F7', border: { lineWidth: 4, strokeStyle: '#76786A', padding: 8 }, animation: { duration: 1 }, scales: [ { minimum: 0, maximum: 100, interval: 10, labels: { offset: 0.14, hAlign: 'right' }, majorTickMarks: { offset: 0.18, lineWidth: 2 }, minorTickMarks: { visible: true, offset: 0.24, interval: 2, lineWidth: 2 }, barMarkers: [ { value: 70, fillStyle: fillStyle1, innerOffset: 0.4, outerOffset: 0.65 }, { value: 90, fillStyle: fillStyle2, innerOffset: 0.7, outerOffset: 0.95 } ] } ] }); linearGauge.write('container'); </script> </head> <body> <div> <div id="container" style="width: 110px; height: 400px;"> </div> </div> </body> </html> |