bdjema
commented
5 years ago `import { RadialGauge } from 'canvas-gauges';
@component({ selector: 'page-home', templateUrl: 'home.html', providers: [Dataservice] }) export class HomeComponent{
retailGauge: RadialGauge;
constructor(public dataService: Dataservice){ ///using timeout to call drawcanvas method setTimeout(() => { this.drawCanvas(); }, 300); }
getData(){ this.dataService.get('url', (data)=>{ this.updateCanvasValue(data) }) }
drawCanvas(){ this.retailGauge = new RadialGauge({ renderTo: 'retail-gauge', width: 270, height: 270, minValue: 0, maxValue: 150, value: 0, valueText: '0%', title: 'Sales', units: '', highlights: [{ "from": 0, "to": 90, "color": "#FF0000" }, { "from": 90, "to": 100, "color": "#FFFF00" }, { "from": 100, "to": 150, "color": "#00FF00" }], majorTicks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150], minorTicks: 10, strokeTicks: true, valueInt: 2, valueDec: 0, colorPlate: '#fff', colorMajorTicks: '#000', colorMinorTicks: '#000', colorUnits: '#000', colorValueText: '#000', colorNeedle: '#FF0000', colorNeedleEnd: 'rgba(255,0,0,1)', animateOnInit: true, animation: true, animationDuration: 1000 }); } updateCanvasValue(data: any) { let tempVal = this.round(parseFloat(data.AchievedPerc), 0); let self = this; let i: number = 0; let interval = setInterval(function () { i++; self.retailGauge.update({ renderTo: "retail-gauge", value: i, valueText: self.convertToPercentage(i), units: self.convertToDisplayFormat(self.convertToMiliar(parseFloat(data.AchievedValue))) + "M", }); if (i >= tempVal) { clearInterval(interval); } }, 60);
} }`
Above code work for me
Here is my html code in home.html file.
<canvas #gaugeid>
Here is my home.ts file code.
let radial = new guage.RadialGauge({ renderTo: 'gaugeid', width: 400, height: 400, units: 'Km/h', title: false, value: 0, minValue: 0, maxValue: 220, majorTicks: [ '0','20','40','60','80','100','120','140','160','180','200','220' ], minorTicks: 2, strokeTicks: false, highlights: [ { from: 0, to: 50, color: 'rgba(0,255,0,.15)' }, { from: 50, to: 100, color: 'rgba(255,255,0,.15)' }, { from: 100, to: 150, color: 'rgba(255,30,0,.25)' }, { from: 150, to: 200, color: 'rgba(255,0,225,.25)' }, { from: 200, to: 220, color: 'rgba(0,0,255,.25)' } ], colorPlate: '#222', colorMajorTicks: '#f5f5f5', colorMinorTicks: '#ddd', colorTitle: '#fff', colorUnits: '#ccc', colorNumbers: '#eee', colorNeedle: 'rgba(240, 128, 128, 1)', colorNeedleEnd: 'rgba(255, 160, 122, .9)', valueBox: true, animationRule: 'bounce', animationDuration: 500 }); radial.draw();This is same from the examples given. Here are the solutions that i tried, but did not work.
https://forum.ionicframework.com/t/getelementbyid-ion-input/43920
Can you please help me here.
@Mikhus