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/
Related
I'm trying to create a scattered chart with Angular-Kendo,
and have some challenges with zooming.
The current challenge is that upon zoom in by area selection with the mouse.
It does the zoom perfectly, besides the fact that it ruins the axis numbers.
I created an example [not angular oriented, but very clear].
Simple example - you can try to zoom with mouse drag.
Already tried the [labels]= "{format: '{0: n3}'}", etc... but it didn't work...
Thanks for any help.
The solution I found for this very painful item is:
using kendo-chart-x-axis instead of category-axis :-)
I want to disable that first animation, because it leeks the browser in big graphs.
The documentation is frightful and I don't what to use d3 force layout, I want to keep webcola.
Thanks
Is it possible to have an area Laravel chart on which we can zoom to have a closer look on it?
I have an area chart with three components to show, two of them having very close values i would like to zoom into onclick.
This has nothing to do with laravel. You should check the chart plugin's documentation if it support the zoom mechanism that you want. If it's not, You should find other plugin.
Is it possible with High Charts to blend/dissolve the colors in an animation when data changes?
The motion is already working but the barcolors won't blend/dissolve.
Unforuantely defualty it is not possible, you can configurare your animation only by http://api.highcharts.com/highcharts#chart.animation . In other cases you need to prepare your own animation mechanism, including edit a source code of highcharts.
I have been working on getting this seat mapping chart for a while and have created a few iterations, and the problem I keep finding is when I get to IE8 the panning for this is way to slow and delayed.
What I have at this point to cut down on load time is created a png to replace my "strokes" since I assume ie8 wanted to re-render each time I dragged the map.
I also added controls hoping to force IE8 users this option, but still there is a delay in the pan, and if I can have users with IE8 (and ie7 if possible) still drag/pan without the controls and the respond time a little faster that would be great.
Here is my current JSFiddle
I am still a little green with JS so if you have any suggestions it would be much appreciated. (PS Chrome frame is awesome but is not a option for me)
Update
I have removed the original dragging function and replaced the code using jqueryui's draggable function. Martin had suggested to just drag the div, and not the Raphael elements. Doing so lets this thing fly in ie6-8 which is great, but then came my concern about scaling. What I was seeing before on zoom my paper element WxH would stay the same ratio, cutting off my drawing when it zoomed in. After digging through the Raphael documentation I came across paper.setSize. setSize was exactly what I needed to allow this project to move and groove in ie6-8 and pretty much conquer all browsers in its path.
So in short, using jqueryui's draggable and paper.setSize has cured my cross browser zoom n' pan blues.
From what can be seen in the Fiddle, you are triggering a new rendering of the image by calling .translate() inside of a mousemove event handler:
mapContainer.translate(currentMapPosX, currentMapPosY);
rsrGroupies.translate(currentMapPosX, currentMapPosY);
This approach is toxic for performance in all browsers, let alone IE8. When dealing with VML in IE8 you should consider that each and every DOM change inside the image will result in the image being rendered again. Doing that while panning will always be painfully slow.
I see that you are already using jQuery in your Fiddle. If you want to increase performance of your panning, you should consider doing the following:
Render the image in Raphaël exactly once for the current zoom level. Do not attempt to change transformations in your VML/SVG image at any point in time while panning.
With the mousemove implementation of panning you already have, move or scroll the HTML container that holds your VML/SVG image instead. Imagine a <div> with overflow: hidden and simply move the image inside relatively, or scroll to the appropriate position.
This will require some adjustment of your coordinate calculations, but it will improve your performance in all browsers.