Hi I am using igLinearGauge for showing amount values i don't want any Measurement line i need only fill colours is there possible to view only colours in the panel using javascript htmlThanks in AdvanceRobin Bronston D
Sorry i missed this one, I need how to change the color in range alsoThanks.
I have try to fix inthe color changing usingbrush: "#009900" code Please any one help me to solve the igLinearGauge for showing amount values i don't want any Measurement line i need only fill colours i dont want to show the minorTick and Tick is it possible to view only colors in the panel using javascript htmlThanks in advanceRobin Bronston D
Hi Robin,
If a properly understood you need a gauge that renders only the ranges for the given values, without any measurement scale onto it.
I have prepared a sample for you, available at http://jsfiddle.net/r9ujxvhp/2/ . Those are the options set to achieve the desired:
minorTickCount: "0", // renders 0 number of minor ticks tickEndExtent: "0.1", // setting the start and end position of the major ticks to the same value, so they are not visible tickStartExtent: "0.1",
Please let me know if you have further questions.
Hi Hristo Anastasov,Thanks for your reply,Its working good i am thanks for your help is it possible to hide numbers also?Thanks
Robin Bronston D
I ran the sample on Chrome and Safari and it seems fine. Only thing that is missing is the labels, because the setting labelExtent 1 moves them out of sight. Removing this setting will show the labels as well. Please see below the screenshot from Safari 10.1.2 (12603.3.8):
Hristo
Hello HistoI am facing problem when i am seeing mac machine the linearguage not showing but show only background colorhere are my code$("#lineargauge").igLinearGauge({ height: "15px", width: "100%", minimumValue: 0, maximumValue: 300, isScaleInverted:false, tickStrokeThickness:0, minorTickCount:0, labelInterval: "100", labelExtent: "1", tickEndExtent: "0.1", tickStartExtent: "0.1", rangeOuterExtent:"-1", rangeInnerExtent:1, scaleStartExtent:0, scaleEndExtent:1, backingBrush:'#DDD', backingOutline:'#DDD', ranges: [{ "startValue": 0, "endValue": 75, "name": "range0", "brush": { "type": "linearGradient", "colorStops": [{ "color": "#FF0000", "offset": 0 }, { "color": "#FEC203", "offset": 1 }], "startPoint": { "x": 0, "y": ".1" }, "endPoint": { "x": 1, "y": ".1" } } },{ "startValue": 75, "endValue": 150, "name": "range1", "brush": { "type": "linearGradient", "colorStops": [{ "color": "#FEC203", "offset": 0 }, { "color": "#FEC203", "offset": 1 }], "startPoint": { "x": 0, "y": ".1" }, "endPoint": { "x": 1, "y": ".1" } } },{ "startValue": 150, "endValue": 150, "name": "range2", "brush": { "type": "linearGradient", "colorStops": [{ "color": "#FEC203", "offset": 0 }, { "color": "#FEFC03", "offset": 1 }], "startPoint": { "x": 0, "y": ".1" }, "endPoint": { "x": 1, "y": ".1" } } }] });Please suggest me
Thanks in Advance
Hello Histo,Thanks for your reply its working good.its really help for me.
Thanks.
Please refer to this help page that provides detailed information on how to Use gradients Colors in Data Vizualizations
Hello Hristo,
how can i using gradiant color?
I am using this below code for lineargauge
minimumValue: 0, maximumValue: 1000, ranges: [ { startValue: 0, endValue: 350, name: "range1", brush: "#005000" }, { startValue: 350, endValue: 550, name: "range2", brush: "#006000" }, { startValue: 550, endValue: 700, name: "range3", brush: "#007000" }, { startValue: 700, endValue: 725, name: "range4", brush: "#008000" }, { startValue: 725, endValue: 800, name: "range5", brush: "#009000" }, ]
Please check the attached screen sort for my requirement