In dijit/form/HorizontalSlider on change I am getting values in a textbox. The values are decimal, like 51.66777777. I want only 51.
<div id="horizontalSlider"></div>
<input type="text" id="sliderValue" data-dojo-type="dijit.form.TextBox" style="width:190px;" onkeyup="getSliderTxtBoxValue();">
var slider = new HorizontalSlider({
name: "horizontalSlider",
value: 1,
minimum: 1,
maximum: 500,
discreteValues: 10,
intermediateChanges: true,
style: "width:200px;",
onChange: function(value){
dom.byId("sliderValue").value = value;
}
}, "horizontalSlider");
See Also:
http://dojotoolkit.org/reference-guide/1.8/dijit/form/HorizontalSlider.html
Have you ever seen Spinal Tap? This one goes to 11!
Here is the code that will work:
value: 0,
minimum: 0,
maximum: 500,
discreteValues: 11,
You want 11 because you want 11 discrete values:
0,50,100,150,200,250,300,350,400,450,500
I created a fiddle for this problem.
Related
I need range slider having 1 to 5 without a gap and after 5 digits of a gap between each no. Like 1,2,3,4,5,10,15,20,25,30.....70
<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>
$scope.slider = {
value: 100,
options: {
floor: 0,
ceil: 500,
step: 1,
}
};
I tried above code as well but it gives series like 1,5,10,15,20,25..70 but I need this series like 1,2,3,4,5,10,15,20,25,....70
appreciate if anyone helps me with that.
thanks!
Try using stepsArray in options as,
options: {
stepsArray: [1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70]
}
The slider is simple mechanic, it slides from X to X with X interval.
Almost every time a different scale is accomplished, it is done by some function calculating the value you want afterwards by giving it the slider value as input.
input => output:
1 => 1
2 => 2
...
6 => 10
7 => 15
I am struggling to insert a comma into my JustGauge Chart.
So far I have the following code. most of it is working as expected;
window.onload = function() {
var g1 = new JustGage({
id: "g1",
value: 24692,
min: 0,
max: 30009,
title: 'Document Countdown',
titlePosition: 'above',
width: 800,
height: 800,
pointer: true,
textRenderer: function(val) {
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
gaugeWidthScale: 1.2,
noGradient: true,
customSectors: [{
color: '#32CD32',
lo: 0,
hi: 30009
}]
});
}
Fiddle https://jsfiddle.net/johnny_s/xsgpp4ng/1/
The 'textRenderer' part of the above code adds a comma to the 'value', I'm not sure how to do the same with 'max'.
I need to add a comma to the 'max' value - so it's '30,009'. When I try to add it manually the chart won't load.
Any help is appreciated.
This has been a feature request posted as request 193 and has been implemented as an extra property maxTxt in the update of February 3, 2016 and is part of release 1.2.7. Current version is 1.2.9.
Note that several features changed in version 1.2.9 compared to the version you used (1.2.2):
the structure of the customSectors: it is no longer an array. The array part is now moved into a subproperty ranges
Support for title has been removed, as this really does not belong to the "core business" of the widget; one can better control the position and style of such a title in the surrounding HTML/CSS.
There is a bug related to the noGradient setting: issue 270. The suggested fix has not been included in the latest release. Instead of tampering with the library yourself, I would suggest working around that issue by adding a customSectors.length property with a positive value.
I have included these changes also in the updated fiddle which uses version 1.2.9:
var g1 = new JustGage({
id: "g1",
value: 24692,
min: 0,
max: 30009,
maxTxt: "30,009", // <------ add this
// remove title attributes -- no longer supported
//title: 'Document Countdown',
//titlePosition: 'above',
width: 800,
height: 400, // <--- reduced to allow title to be closer to gauge
pointer: true,
textRenderer: function(val) {
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
gaugeWidthScale: 1.2,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
noGradient: true,
customSectors: { // <--- no longer an array...
ranges: [{ // <--- ... which has moved to this property
color: '#32CD32',
lo : 0,
hi : 30009
}],
length: 1 // fixes a bug
}
});
The HTML should contain the title. Something like this:
<div style="display: inline-block">
<h2 style="text-align:center;">Document Countdown</h2>
<div id="g1"></div>
</div>
Another way of doing it is add formatNumber: true when you initialize. It will format min max and value. You can also get rid of the textRenderer field.
I updated your fiddle
window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: 24692, /* <-- just change this to your current value */
min: 0,
max: 30009, /* start amount */
title: 'Document Countdown',
titlePosition: 'above',
width: 800,
height: 800,
pointer: true,
formatNumber: true,
gaugeWidthScale: 1.2,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
noGradient: true,
customSectors: [{
color: '#32CD32',
lo: 0,
hi: 30009
}]
});
}
I want to create some gauges, but my Gauge object remains undefined.
var doesntwork;
function create_gauge(name, id, min, max, title, label) {
name = new JustGage({
id: id,
value: 0,
min: min,
max: max,
donut: false,
gaugeWidthScale: 0.3,
counter: true,
hideInnerShadow: true,
title: title,
label: label,
decimals: 2
});
}
create_gauge(doesntwork, "g2", 0, 100, "Füllstand", "%");
console.log(doesntwork); //undefined
why? can't i pass variables to a function?
No, you only pass values, not variable references or pointers.
For that simple example, returning would seem more appropriate.
var works;
function create_gauge(id, min, max, title, label) {
return new JustGage({
id: id,
value: 0,
min: min,
max: max,
donut: false,
gaugeWidthScale: 0.3,
counter: true,
hideInnerShadow: true,
title: title,
label: label,
decimals: 2
});
}
works = create_gauge("g2", 0, 100, "Füllstand", "%");
console.log(works);
However, I'm sure this is probably overly simplified. There are "reference types" in JS, so if works held an object, you could pass the value of the object reference and have the function populate a property of the object.
var works = {};
function create_gauge(obj, id, min, max, title, label) {
obj.data = new JustGage({
id: id,
value: 0,
min: min,
max: max,
donut: false,
gaugeWidthScale: 0.3,
counter: true,
hideInnerShadow: true,
title: title,
label: label,
decimals: 2
});
}
create_gauge(works, "g2", 0, 100, "Füllstand", "%");
console.log(works.data);
I'm using cirque.js plugin to show circle percentage values drawn with a canvas.
Here's a JSFIDDLE I made that should contain all the info with plugin code.
Initially, the circle gets drawn correctly, with the correct value.
Issue: When I try to update the value via a function on clicking a button, nothing happens, not working, I think the canvas needs to be drawn again with the new value?
Q: How can I update the circle percentage value asynchronously?
$('.cirque').cirque ({ //this works
radius: 40,
value: 65,
total: 100,
trackColor: '#ccc',
arcColor: '#5cb85c',
label: 'percent',
lineWidth: 12
});
$('#update').click(function (e) {
updateCircle(50); //this does not work
});
function updateCircle(val){
$('.cirque').cirque ({
radius: 40,
value: val,
total: 100,
trackColor: '#ccc',
arcColor: '#5cb85c',
label: 'percent',
lineWidth: 12
});
}
I've not find any function to update value in this plugin. But you can update value with a trick. Replace the div having class cirque with a same div and initialize it with new value like following. Hope this will help you.
function updateCircle(val){
var cirque=$('<div class="cirque"></div>');
$('.cirque').replaceWith(cirque);
cirque.cirque ({
radius: 40,
value: val,
total: 100,
trackColor: '#ccc',
arcColor: '#5cb85c',
label: 'percent',
lineWidth: 12
});
}
Updated Fiddle: https://jsfiddle.net/8d9sw1yg/2/
I am trying to add custom sectors to my JustGage object and when I add them it is just showing the default of:
0-25 = green, 25-50 = yellow, 50-100 = red
I want to have it split like this:
0-25 = red, 25-50 = orange, 50-75 = yellow, 75-100 = green
My code is below. I have defined my customSectors as I want them, but the gage still defaults back to the original 3 sectors. Am I doing something wrong here. I tried to find some documentation on JustGage, but there really isn't any.
var Gage1 = new JustGage({
id: "gage-1",
value: 100,
min: 0,
max: 100,
showInnerShadow: false,
shadowOpacity : 0.3,
customSectors: [{
color : "#CE1B21",
lo : 0,
hi : 25
}, {
color : "#D0532A",
lo : 25,
hi : 50
}, {
color : "#FFC414",
lo : 50,
hi : 75
}, {
color : "#85A137",
lo : 75,
hi : 100
}],
valueFontColor : ['#4A98BE'],
gaugeColor : ['#333'],
title: "Demo Gage",
label: "%"
});
NOTE: I am using justgage.1.0.1.js
If you get the latest version of justgage, you will see that 'customSectors' is in the code where if you download from their site, 'customSectors' doesn't exist.
Use the below link to get the latest and your code should work just fine.
https://raw.github.com/toorshia/justgage/master/justgage.js
I think all you need is levelColors:
var Gage1 = new JustGage({
id: "gage-1",
value: 100,
min: 0,
max: 100,
levelColors: ['#CE1B21', '#D0532A', '#FFC414', '#85A137']
});
I don't think justGage supports you choosing exactly the min and max for each color you want. And you may need to mess around with the option levelColorsGradient try setting it to false first.
Config that worked for me:
config = {
value: 0,
min: 0,
max: 600000,
decimals: 0,
gaugeWidthScale: 0.6,
label: '$',
formatNumber: true,
customSectors: {
percents: true,
ranges: [
{lo: 0, hi: 33, color: '#13ED5A'}, // lo and hi values are in %
{lo: 34, hi: 67, color: '#49D61C'},
{lo: 68, hi: 100, color: '#49AB1C'}
]
}
};