Does the Nivo charts library allow on-load animations for pie charts? I have only been able to get on-load animations for bar charts, but not for pie charts.
Nivo has a transition mode property which gives animation when a chart node is clicked. I need the animation to show on component load. Is there a workaround for this or has anyone managed to get this feature to work before? My pie chart is a react js storybook component.
This seems to be a difficult problem to solve. Nivo has an outstanding issue out where they made some progress, but based on the final postings the initial draw still has issues. I was able to force an initial render with a little help from window.setTimeout() but the animation ends up warping the circle, I'm guessing that is why it doesn't work by default.
I tried Victory.js and it also has the exact same issue. You can use this technique in React.js to force the initial draw.
My solution was to move to react-chartjs-2, which worked right out of the box.
https://react-chartjs-2.js.org/components/doughnut/
I am in the process of converting some animated GIF animated spinners to animated SVG for better/sharper display on Hi-DPI screens.
One issue I've run into is that when a user starts navigating to another page, an animated GIF continues animating but an animated SVG freezes. So if I want to have an animation that shows the next page loading, I can't find a way to get away from using GIFs.
Is there a way to have SVG animations continue animating during page navigation?
(I am specifically using Chrome for this, because if it doesn't work in Chrome I can't use it.)
EDIT: The SVG uses SMIL to do the animation.
UPDATE
After receiving no responses on this, I can't find a way to keep SVG animations animating during navigation, so I have adopted a different approach, which is to use CSS animations.
CSS animations continue animating even after navigation starts. They are a little harder to deal with, as far as inserting into a page and integrating with other elements, but they do the trick.
I have several dc.js charts in a dashboard and would like to allow the user to view a selected chart is a modal window that can be resized. Does anyone have suggestions or examples?
I don't think this is dc.js related exactly. More a html / javascript solution for showing a modal and providing resize options - then writing extra javascript so the dc.js chart resizes nicely with the modal.
Does it have to be a modal? An easier solution, in my opinion, would be to provide the ability to expand/resize/drag n drop the existing chart div - this can be done using a javascript library like gridster.js
I am using highcharts in my app and it has a problem which is: when I scroll the pointer to point in a different place in the chart the whole chart is scrolled while the point still in its position.
For more explanation please try this link in browser and mobile:
http://www.highcharts.com/stock/demo/basic-line
I just need the mobile behave as the browser behaviour.
You need to disable panning and pinchType.
chart: {
panning: false,
pinchType: false
}
Example: http://jsfiddle.net/bL4bqcLv/3/
Does anyone know how to use the Pixastic plugin and jQuery to where I could have an image fade from color to completely desaturated?
I am trying to avoid saving out two images and fading one out..
i did the inverse... having desaturated images fade in to color. achieved w/ only 1 image in conjuction w/ pixastic and livequery. i basically cloned the images, desaturated one of the copies, and stacked them on top of each other.... fading the top (desaturated) layer out on hover. i'm sure it could be more elegant, but it mostly works. you can see the effect at chicagointerhandball.org on all the "sponsor" logos
$('.sponsors').load(function() {
$('.sponsors').pixastic("desaturate");
}).each(function(index) {
var clone = $(this).clone().removeClass('sponsors').addClass('sponsors-color').css('opacity',.25);
$(this).parent().append(clone);
});
$('.sponsors-color').livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this).hover(function() {
$(this).stop().animate({"opacity": 1});
}, function() {
$(this).stop().animate({"opacity": 0});
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
});
Since all those pixastic image effects are generated on the fly I don't think it would be feasible to fade between saturated and desaturated. The saturation level of the image would have to be redrawn at each step of the fade. Your best bet would probably be to have two images, one saturated and one desaturated, and have them placed on top of one another. Then when you hover over one, fade in the other image.
Edit:
Just saw that you were trying to avoid having two images. Well, that's the only solution I can think of but I'd love to see if there were others. Depending on how many images there are, you could generate all the desaturated images on page load, place them on top of saturated images, hide them, and then fade them in on hover. Just a possibility.
you could get the best of both worlds by dynamically creating a duplication and desaturating that image with pixastic. Position the new desaturated image under the original and fade the original out.
You should be able to, it is in their jQuery documentation section.
// convert all images with class="photo" to greyscale
$(".photo").pixastic("desaturate");
Looks like this is possible with the canvas element.
With this you need to mix jQuery and the standard DOM calls. I was having the same issue just today about this. I couldn't get the hover to work cross platform from the examples given here and on their site. So I decided to think for myself on this one. Came up with a solution, hope it works for you:
http://you.arenot.me/2012/03/26/pixastic-desaturate-on-mouseover-mouseenter-mouseleave/