Develop Reference

Change the scale from number to percentage - Gauge Chart

I am creating Gauge chart from the below java script. I am almost there, just want to convert the scales to percentages. Link to java script - http://spotfired.blogspot.com/2016/03/custom-gauge-from-calc-value-70.html
And the JS is below:--
custom gauge from calc value (7.0+)
html:
calculated value:
<span id=calcValue><SpotfireControl id="y0ursp07f1r3c41cV41u3" />
</span>
<HR>
<DIV style="WIDTH: 400px; HEIGHT: 320px" id=gauge></DIV>
js
resource=[
"//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js",
"//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"
]
//add scripts to head
$.getScript(resource[0],function(){
$.getScript(resource[1],init)
})
init = function(){
var g = new JustGage({
id: "gauge",
value: "22",
min: 0,
max: 100,
title: "Visitors"
});
//refresh gauge when calcvalue changes
$(calcValue).on('DOMSubtreeModified',function(){
g.refresh($(this).text())
})
}
Really appreciate your time and help!!
Best,
Keyur Parekh

jQuery UI .scale() effect producing odd positioning jumps

Fiddle here.
Description of problem:
I'm attempting to make this image scale into view (centered), and then give the appearance that it's "bouncing" away from the screen briefly after reaching its maximum size of 100%. Unfortunately, it is moving down and to the right with each new effect chain. Why?
Note that the effect I'm attempting to achieve is completely different from the bounce effect.

Try 'scale': 'box' option for scale effect.
scale (default: "both")
Type: String
Which areas of the element will be resized: "both", "box", "content". Box resizes the border and padding of the element; content resizes any content inside of the element.
As yours box div doesn't actually have any content, probably, that's the reason of unwanted shifts...
Yours fiddle with modification.
Another fiddle variant.
Upd.
As you can see in second fiddle, you can use separate function for each animation phase (effect). So, just in outermost phase pick current box size, and in each next phase calc scale percentage with honored current/initial box size, like following:
var box = $('.box');
box.data('size', {'w': box.width(), 'h': box.height()});
box.show(scale_effect(box, 100, 250, function () {
box.stop().effect(scale_effect(box, 80, 100, function () {
box.stop().effect(scale_effect(box, 100, 100, function () {
box.stop().effect(scale_effect(box, 90, 100, function () {
box.stop().effect(scale_effect(box, 100, 100, function () {
}));
}));
}));
}));
}));
function scale_effect(box, percent, duration, complete) {
box = $(box);
var size = box.data('size');
var absolutePercent = percent * size.w / box.width();
console.log(absolutePercent);
return {
'effect': "scale",
'percent': absolutePercent,
'scale': 'box',
'duration': duration,
'queue': false,
'complete': complete
};
}
See the fiddle for preview.
And here's some nifty variant with following syntax:
$('.box').bouncedScale([
{'percent': 100, 'duration': 250},
{'percent': 80, 'duration': 100},
{'percent': 100, 'duration': 100},
{'percent': 90, 'duration': 100},
{'percent': 100, 'duration': 100},
]);

Delay pie chart animation until in viewport

I am using this jquery plugin by LugoLabs called "Circles" in order to animate a few pie charts on a website I am building. (https://github.com/lugolabs/circles)
It works perfectly, but the pie chart animation starts on page load and I want to delay it until it is seen by the viewer.
Would it be possible to use something like viewportchecker.js (https://github.com/dirkgroenen/jQuery-viewport-checker) to only start the animation once someone is viewing it? I've used this before on other projects with success, but I'm having a hard time integrating it with the existing javascript.
----Example setup---
HTML:
<div class="circle" id="circles-1"></div>
SCRIPT:
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text'
styleWrapper: true,
styleText: true
});

As previously mentioned as comment: The circles github has an example for starting the circles animation when the circle is in view: https://github.com/lugolabs/circles/blob/master/spec/viewport.html.
I've added a Fiddle containing this example, and as there was the question how to adjust the circle from OP to work with this example I've adjusted this in another Fiddle. The only adjustment was to change the function createCircles as follows:
function createCircles() {
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text',
styleWrapper: true,
styleText: true
});
}

Can't you just calculate the scroll height like:
$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() > $('#circles-1').offset().top + 810)
{
$(function() {
///your pies, 810px is your height
});
});
}
});
instead of loading a plugin...

JQuery slider fill colour

I am trying to fill the current range portion of my slider bar - and as a lot of other people have - fallen into a pit! For some reason when I move my bar - the portion does not 'fill' with a colour as expected.
This is my markup :
<script>
//START OF AMOUNT CODE
var valMap = [1000, 1500, 2000, 2500];
$(function() {
$("#amount-range").slider({
min: 0,
max: valMap.length - 1,
value: 0,
slide: function(event, ui) {
$("#amount").val(valMap[ui.value]);
}
});
$("#amount").val(valMap[$("#amount-range").slider("values", 0)]);
//END OF AMOUNT
});
</script>
</head>
<body>
<div id="productDetails" style="width:360px; max-width:360px;">
<div id="amount-range" ></div>
The CSS I am using is:
.ui-slider-range { background: #88ac0b; }
I am expecting this to be wrong....I have also tried:
#amount-range.ui-slider-range { background: #88ac0b; }
To no avail - can somebody please help!
Andy

The problem was because I had the range variable missing from my slider declaration:
so this now works (not complete syntax but important component is the range line! :
var durationSlider = $( "amount-slider)({
min: 0,
max: valMap.length - 1,
range:"min",
value: 0,
slide: function(event, ui) {
$("#amount").val(valMap[ui.value]);
}

Highcharts won't work properly

OK,
so i have this chart
http://jsfiddle.net/7bftp/
I set left Y legend max to 100, but it shows 150 :/
It MUST be to 100 because it's represents %.
Second problem, why i don't have sum of bars above it?
2323+125 should give me 2448 above first bar

You have to adjust the max value of other y-axis also
http://jsfiddle.net/diode/7bftp/1/
...
...
yAxis: [{
min: 0,
max: 4000,
...
...
...
{
min: 0,
max: 100,
...
...