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...
Related
I have a scenario like I have a Bootstrap slider, in that I want track points on the track of the slider and the tool tip must be fixed (i.e. it must be exist even after click).
Here is my Plunker link:
http://embed.plnkr.co/D3GJQn/preview
I need to get points on the track as shown in below image:
Add property tooltip:"always" to show the tooltip always
$(document).ready(function () {
var mySlider = $("#slider-input").slider({
min:0,
max: 4200,
value:1000,
step:1000,
tooltip:"always"
});
});
You can see the complete set of options here - https://github.com/seiyria/bootstrap-slider#options
To get the current value of slide, see below.
$("#slider-input").on('slide', function (ev) {
console.log($("#slider-input").val());
});
You can use ticks: [0, 500, 1000, 1500], property to show intermedaite points. for more http://seiyria.com/bootstrap-slider/
example - https://plnkr.co/edit/W8c2UuPMiEeMwQ8g7kCV?p=preview
This is how I got the current value:
$(document).ready(function () {
var mySlider = $("#slider-input").slider({
min:0,
max: 4200,
value:1000,
step:1000,
formatter: function(value) {
return 'Current value: ' + value;
}
});
});
You can also show the value by doing:
$("#mySlider").on("slide", function(slideEvt) {
$("#sliderValue").text(slideEvt.value);
});
with HTML:
<span>Current Value: <span id="sliderValue">1</span></span>
Here is a link to show some examples I found after doing this:
http://seiyria.com/bootstrap-slider/
Hope this helps!
Take a look at Example 13. Here is the example code, take note of the ticks property:
var slider = new Slider("#ex13", {
ticks: [0, 100, 200, 300, 400],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
First :
I have a problem with a dynamic modal-dialog with a diagram in it.
The code is pretty easy:
https://jsfiddle.net/c2abnhja/1/
As you can see, no diagram is in the created div container. But if you resize your window, the diagram is drawn correctly with the correct size of the modal-dialog. [Also it doesn't matter if I trigger the resize event in manual : https://jsfiddle.net/ywaoec3d/1/ ]
And in second:
If I set a size to the modal dialog of bootstrap, like here:
https://jsfiddle.net/aqs5fhha/1/
the diagram never get the correct height of the modal-content... but the documentation of c3.js says :
size.height
The desired height of the chart element.
If this option is not specified, the height of the chart will be
calculated by the size of the parent element it's appended to.
Any idea why the diagram is not drawn correctly?
Thanks in advance
I was able to fix your problem using this :
$('#myModal').on('shown.bs.modal', function() {
var chart = c3.generate({
bindto: '#diagramAppend',
data: {
x: 'x',
columns: [
['x', 30, 50, 100, 230, 300, 310],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 300, 200, 300, 250, 450]
]
}
});
});
Basically what is happening is that you try to generate your graph on a div with 0 width. Waiting the event shown.bs.modal allow you to have a width at this point.
Updated JSFiddle
I'm new to charting and js and don't have much experience with js and jqplot so maybe someone can help me out?
I try to replot a jqplot meter gauge when the browser window is resized. I could find some examples during my research that seem to work fine but as soon as I try it myself, I can't make it work.
Here is my code:
A fiddle can be found here
$(document).ready(function(){
s1 = [72];
var plot0 = $.jqplot('chart0',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'Your Score is <div class="score">' + s1 + '</div>', //Showing the value
labelPosition: 'bottom',
min: 0,
max: 100,
intervals:[30, 60, 80, 100],
intervalColors:['#cc6666', '#E7E658', '#93b75f', '#66cc66'],
ringColor: '#737373',
ringWidth: 0.00000000001,
background :"transparent",
intervalInnerRadius: 95,
hubRadius: 6,
showTicks: false,
needleThickness: 5,
showTickLabels: false,
}
}
});
$(window).resize(function() {
plot0.replot( { resetAxes: true } );
});
});
Maybe someone can see what I'm doing wrong? Any help is highly appreciated! I'm totally frustrated :(
UPDATE
So I read again through all the documents and found this little sentence on the jqplot homepage:
"A meterGauge plot does not support events."
So I guess it just won't work whatever I do?
Any other idea how to make the jqplot meter gauge responsive?
Wow, we finally found a solution.
For anybody else interested in the topic, here is how we did it in the end.
<script>
var plot0;
$(window).resize(function(){
$('#chart0').html('');
plotGauge();
});
$(document).ready(function(){
plotGauge();
});
s1 = [22]
function plotGauge(){
plot0 = $.jqplot('chart0',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'Your Score is <div class="score">' + s1 + '</div>', //Showing the value
labelPosition: 'bottom',
min: 0,
max: 100,
intervals:[30, 60, 80, 100],
intervalColors:['#cc6666', '#E7E658', '#93b75f', '#66cc66'],
ringColor: '#737373',
ringWidth: 0.00000000001,
background :"transparent",
intervalInnerRadius: 95,
hubRadius: 6,
showTicks: false,
needleThickness: 5,
showTickLabels: false,
}
}
});
}
</script>
<div id="chart0"></div>
The above solution had problem with animation of graph(update data and replot), because when you have updated the data before resizing, again it shows from starting.So, you have to update the data before replot the graph.
But i found one more solution for this graph(i don't know what exact problem with graph), but somehow i had managed the graph replot by adding some dummy data to replot function. Please follow the below snippet.
$(window).resize(function() {
plot0.replot( { resetAxes: true, dummy:'dummy' });
});
The above snippet is working fine, and is best instead of creating new object.
Hope this is helpful.
I also faced this problem with Gauge replot.
What I did is passed a dummy parameter to replot and it worked for me.
$(window).resize(function() {
plot0.replot( { resetAxes: true, dummy: 'dummy' } );
});
I didn't dig into the jqPlot code, will open an issue in free time.
I'm using Highcharts SVG rendering API (Renderer) to draw custom chart and I want to animate rect's stroke-width attribute. Here is the example provided in Highcharts documentation, but it seems not working properly - all attributes are changed except stroke-width.
If I open HTML in Chrome DevTools I can see something like that:
<rect x="50" y="50" width="200" height="20" rx="5" ry="5" stroke="gray"
stroke-width="2" fill="silver" zIndex="3" strokeWidth="10"></rect>
Stroke-width is set using camel-style name, not dash-style name.
May be there is some workaround?
Yep, there is a workaround. You can achieve this by using the attr() function of jQuery. When you click on the rectangle you change the stroke-width attribute.
Still I think this is a good point to report perhaps as a bug of the API?
Anyways the JS code will look like this:
$(function () {
var renderer = new Highcharts.Renderer(
$('#container')[0],
400,
300
),
rect = renderer.rect(100, 100, 100, 100, 5)
.attr({
'stroke-width': 2,
stroke: 'gray',
fill: 'silver',
zIndex: 3
})
.on('click', function () {
rect.animate({
x: 50,
y: 50,
width: 200,
height: 20
})
$("rect").attr("stroke-width", "30"); // here you can change the stroke-width
})
.add();
});
To see it in action here the adjusted JSFIDDLE
VERSION 2
Based on your comment I edit the code. In this case you set also an animation for the stroke-width. This is a simple solution. Another solution would be tweaking the original Highcharts library which I would not recommend. Anyways, hope it helps:
$(function () {
var renderer = new Highcharts.Renderer(
$('#container')[0],
400,
300
),
rect = renderer.rect(100, 100, 100, 100, 5)
.attr({
'stroke-width': 2,
stroke: 'gray',
fill: 'silver',
zIndex: 3
})
.on('click', function () {
rect.animate({
x: 50,
y: 50,
width: 200,
height: 20
})
$("rect").animate(
{ "stroke-width": "10" },
{
duration: 500,
step: function(now) { $(this).attr("stroke-width", now); }
});
})
.add();
});
The duration can be adjusted to what is suitable for you.
See it in action here: JSFIDDLE
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},
]);