search

bernii / gauge.js

100% native and cool looking JavaScript gauge
MIT License
1.42k stars 391 forks source link

percentage colors not working with Donut gauge #86

Open musti2 opened 8 years ago

musti2 commented 8 years ago

Please advise if i am doing something wrong here:

Percentage colors is not working with Donut style gauge.

{ lines: 12, // The number of lines to draw angle: 0.24, // The length of each line lineWidth: 0.15, // The line thickness pointer: { length: 0.9, // The radius of the inner circle strokeWidth: 0.035, // The rotation offset color: '#000000' // Fill color }, percentColors: [[0.0, "#a9d70b" ], [0.9, "#f9c802"], [1.0, "#ff0000"]], limitMax: 'true', strokeColor: '#E0E0E0', generateGradient: false }

i am getting same color for all value ranges.. (5/50/100)

mrnebbi commented 8 years ago

I'm also having this problem. Wondering if there is something I can do to patch it up in the meantime. Would be keen to have a fix for this.

dineshrivankar commented 8 years ago

Alternative for percentage color for Donut gauge is below .

var opts = {  
                 colorStart: '#60B85C',   // Colors
                 colorStop: '#82B659',    // just experiment with them
}

In gauge.js change

grdFill = this.ctx.createRadialGradient(w, h, 39, w, h, 70); to grdFill = this.ctx.createLinearGradient(w, h, 39, w, h, 70);

ISatByTheO commented 6 years ago

Has there been any progress on this?

rasc-br commented 6 years ago

Hello there... sorry to bring this up, but I couldn't make this work either... there is no color progression for the "donut" option. And I didn't quite get what @dineshrivankar said back in 2016 (wow, lol). Anything new on this? A new option that isn't in the documentation, or a simple IF somewhere in the code? Thank you.

jungti1234 commented 5 years ago

hi. I'm using this well, but I wonder what's going on with this problem. it became known in 2016 but I couldn't find what it fix so it still has this problem now. is there some reason?

breardon2011 commented 4 years ago

I dont think this fixes it, just tried the change myself.

szokka commented 4 years ago

I didnt apply a gradient with specific percentages, but I have a nice linear gradient for my donut. dineshirivankar comment is also almost my solution, but I use:

*grdFill = this.ctx.createLinearGradient(0, h 2, w 2, h 2);**

createLinearGradient only accepts 4 values, I apply *2 on values so my gradient does fit (w and h get divided by 2 before (this is probably needed for other calcs?)):

gradientGauge

its pretty simple, I didnt wanted to fiddle to much on existing gauge.js code, but i dont know why it is off in the first place, so I applied changes mentioned above