I have an issue with displaying the unit '%' with the labels, around the gauge. I use the gauge.js library for drawing gauges.
I want to add a % next to the numbers
E.g: 5, 10, 15, 20 -> 5%, 10%, 15%, 20%...
/* - main.js - */
var gauge_credit_bail = new Gauge(document.getElementById('gauge_credit_bail')).setOptions({
angle: 0,
lineWidth: 0.2,
radiusScale: .9,
pointer: {
length: 0.56,
strokeWidth: 0.035,
color: '#111111'
},
limitMax: true,
limitMin: true,
strokeColor: '#aaa',
generateGradient: false,
highDpiSupport: true,
staticZones: [
{strokeStyle: "#d30000", min: 1, max: 5},
{strokeStyle: "#f6db2d", min: 5, max: 10},
{strokeStyle: "#f6db2d", min: 10, max: 15},
{strokeStyle: "#f6db2d", min: 15, max: 20},
{strokeStyle: "#f6db2d", min: 20, max: 25},
{strokeStyle: "#f6db2d", min: 25, max: 40},
{strokeStyle: "#3eea34", min: 40, max: 45},
{strokeStyle: "#3eea34", min: 45, max: 50},
{strokeStyle: "#3eea34", min: 50, max: 55},
{strokeStyle: "#3eea34", min: 55, max: 60},
{strokeStyle: "#45caff", min: 60, max: 65},
{strokeStyle: "#45caff", min: 65, max: 70}
],
staticLabels: {
font: "11px sans-serif",
labels: [1, 5, 10,15, 20, 25,30,35,40,45,50,55,60,65,70],
color: "#000000",
fractionDigits: 0
}
});
gauge_credit_bail.setMinValue(1);
gauge_credit_bail.maxValue = 70;
gauge_credit_bail.animationSpeed = 10;
....
var index = arr.indexOf(parseFloat(obj.val()));
if ($(this).data('event') === 'max') {
if (index < arr.length - 1) {
obj.val(arr[index + 1]);
}
} else if ($(this).data('event') === 'min') {
if (index > 0) {
obj.val(arr[index - 1]);
}
}
.....
if (target === 'input_cb_oa') {
gauge_credit_bail.set(parseFloat(obj.val()));
This is my code for the gauge labels,
thank you.
Related
I try to display 3 vu-meters within a single call, but the vu-meters number 2 and 3 are one over the other.
Is there a way to display 3 vu-meters at once, or is the component locked?
You need to define additional pane, yAxis and series:
pane: [{
startAngle: -45,
endAngle: 45,
background: null,
center: ['20%', '145%'],
size: 300
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['50%', '145%'],
size: 300
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['80%', '145%'],
size: 300
}],
yAxis: [{
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
text: 'VU<br/><span style="font-size:8px">Channel A</span>',
y: -40
}
}, {
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 1,
title: {
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
y: -40
}
}, {
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 2,
title: {
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
y: -40
}
}],
series: [{
name: 'Channel A',
data: [-20],
yAxis: 0
}, {
name: 'Channel B',
data: [-20],
yAxis: 1
}, {
name: 'Channel C',
data: [-10],
yAxis: 2
}]
Live demo: https://jsfiddle.net/BlackLabel/43ft09mq/
API Reference: https://api.highcharts.com/highcharts/series.gauge
I created a chartjs bar graph to represent a set of measurements over a 60 minute interval. I have managed to get the graph up and running but the end bars of it keep getting clipped. The code is here https://jsfiddle.net/bagelboy/yxs9tr5c/
//
var hourBarctx = document.getElementById("hourBarChart");
var hourBarChart = new Chart(hourBarctx, {
// type: 'line',
type: 'bar',
data: {
labels: [
// min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
// max: moment.unix(new Date(2018, 1, 0, 0, 30, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 1, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 2, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 3, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 4, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 5, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 59, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
],
datasets: [{
label: 'All Units',
data: [42, 43, 70, 89, 47, 42, 43, 70],
// backgroundColor: 'rgba(0, 0, 200, 0.1)',
backgroundColor: 'rgba(0, 99, 132, 0.6)',
borderColor: 'rgba(0, 99, 132, 1)',
// borderWidth: 0
borderWidth: 1,
},
{
label: 'TV',
data: [],
backgroundColor: 'rgba(76, 175, 80, 0.1)',
borderWidth: 1,
},
{
label: 'Light',
data: [],
backgroundColor: 'rgba(0, 175, 80, 0.1)',
borderWidth: 1,
},
{
label: 'AC',
data: [],
backgroundColor: 'rgba(76, 0, 80, 0.1)',
borderWidth: 1,
}
]
},
options: {
tooltips: {
enabled: true,
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var val = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return label;
}
}
},
title: {
display: true,
text: 'Hour'
},
elements: {
},
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true
},
categoryPercentage: 1.0,
barPercentage: 1.0,
type: "time",
stacked: true,
time: {
unit: 'minute',
unitStepSize: 1,
displayFormats: {
// day: 'MM/DD/YYYY hh:mm a X Z ',
minute: 'mm',
},
//new Date(year, month, day, hours, minutes, seconds, milliseconds)
min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
}
}, ],
yAxes: [{
// barPercentage: 1,
// categoryPercentage: 1,
ticks: {
beginAtZero: true
}
}]
}
}
});
Anyone know how to keep the ends from being clipped like this?
I think it's the way you are trying to do the axis, its looking to show the values between 00-01, 01-02 etc, in the last data point your axis doesn't go to 1am, and the first data point is similar, i was able to fix it by changing:
min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
to:
min: moment.unix(new Date(2018, 1, 0, 0, -1, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 61, 0).getTime() / 1000),
Might not be exactly what you want but in the fiddle (after adding moment.js as a dependency) it doesn't cut off your bars.
I haven't worked with time like this, but maybe the data supplied needs to be different to get it to work.
I've build this simple interactive scenario. Now everything seems working fine except that when start for loop as below. What can I do to fasten the script?
here the full code http://codepen.io/Angussimons/pen/oZmNer
Thanks in advance
for (let i = 0; i < manNumber; i++) {
// Definisco quale strada
if (i < (manNumber * leftStreet)) {
street[i] = document.getElementById('path-2');
} else {
street[i] = document.getElementById('path-1');
}
// genero una velocità per ognuno
_speed[i] = Math.floor((Math.random() * 400) + 1);
_speed[i] = (_speed[i]/1000);
let shiftTop = -1.5;
// genero una posizione su ognuno
let manPosition = shiftTop + Math.floor((Math.random() * 1000) - 500)/1000;
// vario la durata dei gesti
var _duration = Math.floor((Math.random() * 1000) + 500);
mansHead.push( new mojs.Shape({
parent: '.omini',
className: 'omino man-head-'+i,
shape: 'circle',
radius: 8,
fill: manColor,
top: manPosition+'%',
left: 0,
x: {0 : 5},
y: 10,
easing: 'linear.none',
duration: _duration,
}).then({
x: {5 : 0},
}));
mansBody.push(new mojs.Shape({
parent: '.man-head-'+i,
className: 'man-body-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 10,
strokeWidth: 13,
strokeLinecap: 'round',
angle: {85 : 95},
x: {5 : -2},
y: 30,
easing: 'linear.none',
duration: _duration,
}).then({
angle: {95 : 85},
x: {[-2] : 5},
y: 30,
}));
mansArmL.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-arm-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 10,
strokeWidth: 6,
strokeLinecap: 'round',
angle: {45 : -45},
x: -5,
y: {8 : -8},
duration: _duration,
}).then({
angle: {[-45] : 45},
y: {[-8] : 8},
}));
mansArmR.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-arm-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 10,
strokeWidth: 6,
strokeLinecap: 'round',
angle: {[-45] : 45},
x: -5,
y: {[-8] : 8},
duration: _duration,
}).then({
angle: {45 : -45},
y: {8 : -8},
}));
mansLegL.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-leg-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 12,
strokeWidth: 7,
strokeLinecap: 'round',
angle: {20 : -20},
x: 22,
y: {8 : -8},
duration: _duration,
}).then({
angle: {[-20] : 20},
x: 22,
y: {[-8] : 8},
}));
mansLegR.push(new mojs.Shape({
parent: '.man-body-'+i,
className: 'man-leg-'+i,
shape: 'line',
fill: 'none',
stroke: manColor,
radius: 12,
strokeWidth: 7,
strokeLinecap: 'round',
angle: {[-20] : 20},
x: 22,
y: {[-8] : 8},
duration: _duration,
}).then({
angle: {20 : -20},
x: 22,
y: {8 : -8},
}));
}
I want to change size of grid layout cells. But when i find API of jquery flot, i didn't find any method which use to change size of grid layout cells.
This is image which i want to change size of grid layout cells (horizontal + vertical) to bigger. How can i do this ?
Thanks in advance.
Here is my code:
let options_hour = {
series: {
lines: {
show: true,
lineWidth: 1.2
}
},
grid: {
backgroundColor: "#ffffff",
borderWidth: {
top: 1,
right: 1,
bottom: 1,
left: 1
},
highlightColor: "#FF0000"
},
xaxis: {
mode: "time",
timezone: "browser",
show: true,
ticks: 9,
tickColor: "#000000",
min: initialize_hour - 3600000 * 6,
max: initialize_hour - 600000,
ticks: [
initialize_hour - 3600000 * 6,
initialize_hour - 3600000 * 5,
initialize_hour - 3600000 * 4,
initialize_hour - 3600000 * 3,
initialize_hour - 3600000 * 2,
initialize_hour - 3600000 * 1,
initialize_hour - 600000
],
font: {
size: 9,
color: "#980000"
},
timeformat: "%H:%M"
},
yaxis: {
font: {
size: 9,
color: "#980000"
},
min: 0,
ticks: [
[0, '0'],
[2.25, 'NNW'],
[4.5, 'NW'],
[6.75, 'WNW'],
[9, 'W'],
[11.25, 'WSW'],
[13.5, 'SW'],
[15.75, 'SSW'],
[18, 'S'],
[20.25, 'SSE'],
[22.5, 'SE'],
[24.75, 'ESE'],
[27, 'E'],
[29.25, 'ENE'],
[31.5, 'NE'],
[33.75, 'NNE'],
[36, 'N']
],
tickColor: "#000000"
}
};
I have been trying using angular gauge with multiple y axis. I have used offset axis property to avoid collision between them. However, plotband of the axes getting collided with each other. Is there any property to separate them out or any other workaround?
My try:
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -90,
endAngle: 90,
background: null
},
// the value axis
yAxis:[
{
min: 0,
max:100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
labels: {
distance: 12,
rotation: 'auto'
},
offset: -30,
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
plotBands: [{
from: 0,
to: 10,
color: '#55BF3B',
}, {
from: 10,
to: 70,
color: '#DDDF0D',
}, {
from: 70,
to: 90,
color: '#DF5353',
}]
},
{
min: 0,
max:100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
labels: {
distance: 12,
rotation: 'auto'
},
offset: 30,
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
plotBands: [{
from: 0,
to: 10,
color: 'red',
offset:30,// green
}, {
from: 10,
to: 70,
color: 'orange' // yellow
}, {
from: 70,
to: 90,
color: 'violet' // red
}]
}
],
series: [{
name: 'Speed',
data: [{
id: 'hour',
y: 90,
}],
},{
name: 'Speed',
data: [{
id: 'minute',
y: 50,
}],
},
]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
}, 3000);
}
});
$('.highcharts-axis text').click(function(){ alert($(this).text());
});
});
https://jsfiddle.net/n1djkxLr/8/
This issue is related with know bug, reported to our developers here: https://github.com/highcharts/highcharts/issues/5283