I want to create 2 solid gauge. I am trying to use ng-repeat in HTML in which there are 2 data. So according to that the ng-repeat function should display 2 solid gauge using the same div. I have used angular foreach in angularjs which gets 2 data from database.
I want to create 2 solid gauge. I am trying to use ng-repeat in HTML in which there are 2 data. So according to that the ng-repeat function should display 2 solid gauge using the same div. I have used angular foreach in angularjs which gets 2 data from database.
I have already tried putting all of highchart code in angularjs inside the foreach loop so that it will loop according to the data and take corresponding value. But, I am able to get only 1 data at a time.
<div id="humidity_container"></div>
vm.GetTempHumidity = function () {
var TempHumidityURL = url + "sensors/TempHumidity";
$http.get(TempHumidityURL).then(function (response) {
vm.TempHumidity = [];
angular.forEach(response.data, function (value, key) {
var obj = { SensorID: value.SensorID, SensorName: value.SensorName, Data1: value.Data.split(',')[0], Data2: value.Data.split(',')[1], SignalStrength: value.SignalStrength, Battery: value.Battery, InsertDate: moment(value.InsertDate).format('DD/MM/YYYY hh:mm A') };
vm.TempHumidityData = obj.Data1;
var rawData = vm.TempHumidityData,
data = getData(rawData);
console.log(vm.TempHumidityData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i > 0; i -= 1) {
data.push({
y: i
});
}
return data;
}
Highcharts.chart('humidity_container', {
chart: {
type: 'solidgauge',
marginTop: 0,
backgroundColor: 'transparent',
//height:150,
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: rawData + ' °C',
style: {
'font-size': '17px'
},
y: 103,
},
tooltip: {
enabled: true
},
pane: [{
startAngle: -90,
endAngle: 90,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '60%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.1).get(),
borderWidth: 0,
shape: 'arc'
}],
size: '100%',
center: ['50%', '30%']
}, {
startAngle: -180,
endAngle: 180,
}],
yAxis: [{
min: 0,
max: 100,
//tickInterval: 0,
labels: {
enabled: false
},
stops: [
[0, '#55F709'],
[0.1, '#0f0'],
[0.2, '#2d0'],
[0.3, '#4b0'],
[0.4, '#690'],
[0.5, '#870'],
[0.6, '#a50'],
[0.7, '#c30'],
[0.8, '#e10'],
[0.9, '#f03'],
[1, '#f06']
]
}],
series: [{
animation: false,
dataLabels: {
enabled: false
},
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '60%',
data: data,
}]
});
});
});
}
Highcharts needs a unique container for each chart, otherwise, it will destroy the first chart and render the second one in the same place.
So you should create child elements inside <div id="humidity_container"></div> with a unique id and plot each chart inside it.
Demo: