I have an interactive dojox gauge with a range from 0 - 100. But I only want my users to be able to move the needle to 0, 25, 50, 75 and 100. Is that possible?
// create the gauge
var gauge = new dojox.gauges.GlossyCircularGauge({
background : [255, 255, 255, 0],
color : color,
id : "gauge_" + item,
width : 150,
height : 150,
value : itemProgress,
noChange : Login.isLoggedIn(),
majorTicksInterval : 25
}, dojo.byId("gaugeDiv_" + item));
gauge.startup();
Cheers,
JP
Have a look at my fiddle: http://jsfiddle.net/v7WwD/1/
require(["dojox/dgauges/components/grey/CircularLinearGauge"],
function (CircularLinearGauge) {
var myGauge = new CircularLinearGauge({
value: 20,
minimum: 0,
maximum: 150,
majorTickInterval: 25,
minorTickIntervall: 5,
indicatorColor: "#000080", //Zeiger
fillColor: "#FFFFFF"
}, dojo.byId("gauge"));
myGauge.startup();
});
//more code in the fiddle
//......
I have created a CircularLinearGauge programatically.
Regards
First I would consider using dojox/dgauges (http://dojotoolkit.org/reference-guide/1.9/dojox/dgauges.html) instead of dojox/gauges. These are the only well maintained gauges in the toolkit as of today. Second with dojox/dgauges you can set the snapInterval of your LinearScaler to 25 and you should get the expected behavior.
Related
I have a Highcharts activity gauge that has two series. I am trying to place labels at the starting point of each ring. I have it working with hardcoded x,y coordinates, but I'm wondering if there is a way to calculate the location instead. It looks like this currently:
Here is the code I am using to add the labels in the chart render event:
function render() {
var chart = this;
chart.renderer.label('Completed 65%', 24, 25, 'rect', 0, 0, true, true, '')
.add();
chart.renderer.label('Follow-up 45%', 28, 42, 'rect', 0, 0, true, true, '')
.add();
}
I'd like to calculate the x,y values in the chart.renderer.label() function instead of hardcoding them to 24,25 and 28,42. However, I have not been able to find anything in the object model to locate the physical location of the series starting x and y, or the size of the label. I have many of these activity gauges to complete and going through them all and trying to find the magic coordinates seems like the wrong approach.
You can follow the same approach as icons rendered in the official Activity gauge demo here: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-activity/
There you will find position calculated using series point shapeArgs. I modified that function to render labels as you expected. Check it in the demo posted below.
Function code:
function renderLabels() {
var offsetTop = 5,
offsetLeft = 5;
if (!this.series[0].label) {
this.series[0].label = this.renderer
.label('Completed 65%', 0, 0, 'rect', 0, 0, true, true)
.add(this.series[1].group);
}
this.series[0].label.translate(
this.chartWidth / 2 - this.series[0].label.width + offsetLeft,
this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
(this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2 + offsetTop
);
if (!this.series[1].label) {
this.series[1].label = this.renderer
.label('Follow-up 45%', 0, 0, 'rect', 0, 0, true, true)
.add(this.series[1].group);
}
this.series[1].label.translate(
this.chartWidth / 2 - this.series[1].label.width + offsetLeft,
this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
(this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2 + offsetTop
);
}
Function invocation:
chart: {
type: 'solidgauge',
events: {
render: renderLabels
}
}
Demo:
https://jsfiddle.net/BlackLabel/vpj32tmy/
I am using C3.js to create a line chart with data labels.
the problem is that some labels overlap when data from 2 lines are very close to each other.
Is there any way to fix this data overlapping issue in C3
var chart = c3.generate({
data: {
labels:true,
columns: [
['data1', 30, 20, 50, 40, 60, 230],
['data2', 40, 130, 90, 240, 130, 220],
['data3', 20, 200, 160, 400, 250, 250]
]
}
});
http://jsfiddle.net/e60o24d0/238/
There are no built-in way to do so.
But you can try to identify and shift problematic labels in labels format function:
labels: {
format: function(v, id, point, line) {
if (point === undefined || line === undefined) return;
var label = d3
.selectAll('.c3-chart-text')
.selectAll('.c3-text')[line][point];
if (...) { // set your condition
var shift = ...; // set your calculation
d3.select(label)
.style('transform', 'translateY(' + shift + 'px)');
}
return v;
}
Some inspiration can be found in your updated fiddle.
I am working off this JSFIDDLE which shows how to add a label to a point in a chart. This works fine for fixing a position for the label in the case of the chart not being responsive. Change the width of the fiddle and the label sits in the original position. I want the label to stay on top of the last column.
I have tried using load and redraw events and I am close, but I need to destroy the label before creating a new one.
events: {
load: function () {
var point = this.series[0].points[2];
this.renderer.label(
'<div class="text-center">GOAL TO REACH</div>', 270, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop
)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
},
redraw: function() {
var point = this.series[0].points[2];
this.renderer.label(
'<div class="text-center">GOAL TO REACH</div>', 270, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop
)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
}
}
I want the label to follow the point when the chart's width is changed.
I tried using a tooltip, but has problems disabling it from the first two columns. I can redraw the tooltip ok, but could not disable it from all other columns
Check out this updated JSFiddle
I added a variable to the global scope var theLabel;
Then on chart initial draw, set theLabel = chart.renderer.label(...)
Then
redraw: function() {
theLabel.destroy();
point = this.series[0].points[2];
theLabel = this.renderer.label('<div class="text-center">Reach 10 active subscriptions<br/>and enjoy a one year FREE membership!</div>', this.plotWidth - 200, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop)
.css({
color: '#FFFFFF'
})
.attr({fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
}
Note that in redraw::
I call theLabel.destroy() to remove the original label
I changed chart to this
Instead of plotting it at x = 270 I plot it at this.plotWidth - 200 to get it more-or-less on the right hand side of the plot with the chevron always pointing to the red bar.
Hope this works for you
I know that I could just easily override nokia.maps.clustering.MarkerTheme.getColor in version 2.5.x to customize only the color of the cluster marker, but it seems there's no easy way to do so in version 3.0.x.
I mean, there is this H.clustering.ITheme interface that I could implement, yet it feels like it is a real pain for hacking into the color property. This is what I code so far (only relevant code shown):
var defaultTheme = clusteredDataProvider.getTheme(),
customTheme = {
/**
*
* #implements {H.clustering.ITheme.getClusterPresentation}
*/
getClusterPresentation: function (cluster) {
var clusterMarker = defaultTheme.getClusterPresentation
.call(defaultTheme, cluster);
/*
* TODO: Change the color property of the cluster marker.
* Hmm. How am I supposed to best do it?
*/
return clusterMarker;
},
/**
*
* #implements {H.clustering.ITheme.getNoisePresentation}
*/
getNoisePresentation: function (noisePoint) {
var noiseMarker = defaultTheme.getNoisePresentation
.call(defaultTheme, noisePoint);
return noiseMarker;
}
};
Does HERE Maps have a base SVG template of the cluster marker that I could make use of?
From what I can make out in the compressed code of the mapsjs-clustering.js, there is a bit more logic in the default theme than just creating new markers for every cluster. What seems to happen is that the API renders an image for each possible icon on the fly using canvas elements and then keeps reusing (get/putImageData calls) that for each marker based on the weight of the cluster. Here's some things I am able to figure out on where they create the icons:
weight < 10 : size 28, color "118, 209, 0", textPosition { x: 11, y: 18 }
weight < 25 : size 38, color "255, 105, 0", textPosition { x: 13, y: 23 }
weight < 50 : size 38, color "240, 60, 0", textPosition { x: 13, y: 23 }
weight < 100 : size 38, color "181, 0, 21", textPosition { x: 13, y: 23 }
weight < 1000 : size 48, color "181, 0, 21", textPosition { x: 15, y: 28 }
weight > 1000 : size 66, color "181, 0, 21", textPosition { x: 20, y: 38 }
So, to change the color property, you'd pretty much have completely reverse engineer the icon drawing code and rewrite it. Not sure this is a worthwhile approach...
I have created a gauge using jsgauge plugin
What I am not able to do is to control the speed of the needle. It should move to the assigned value a bit slower than the default speed. The needle should also start from 0.
The fiddle for this is http://jsfiddle.net/aryan7987/h45Tr/2/
Query(document).ready(function(){
jQuery("#example")
.gauge({
min: 0,
max: 100,
label: 'EMPLOYEE',
startangle: 0,
bands: [{color: "#ff0000", from: 90, to: 100}]
})
.gauge('setValue', 59);
});
One of solutions is to use setInterval function and increase gauge value step by step with needed delay like this:
jQuery(document).ready(function(){
var g = jQuery("#example")
.gauge({
min: 0,
max: 100,
label: 'RPM',
bands: [{color: "#ff0000", from: 90, to: 100}]
});
var m = 0;
var timer = window.setInterval(function()
{
m++;
g.gauge('setValue', m);
if (m==58)
{
clearInterval(timer);
}
}, 200);
});
The code is quite dirty but you should get a point. Also here working fiddle.
Unfortunately it looks like the speed is hardcoded by defining the delta for each frame. Here is an monkey patched version to change the speed see this jsfiddle
The problem line is:
increment = Math.max(Math.abs( that.settings.pointerValue - pointerValue ) / 8, 3);