CodePen Project's Proven Recipe for Seamless Piechart Updates

On CodePen, a piece of JavaScript programming created within version 4 of amCharts' suite of data visualization utilities demonstrates how a pair of pie charts can dynamically adjust their contents when a distinct slice is taken from one chart and added to the other. Users can achieve this switch merely by holding down the left mouse button on a given section of a filled-up pie chart and dragging the slice into the area occupied by the other pie chart whether the latter chart has any contents or not.

When the CodePen project is first viewed, users will see a donut-shaped pie chart in which several colored segments are labeled with the names of various countries. While the "Editor View" setting is active, users can see -- and even modify -- the HTML, CSS, and JavaScript example code being used to mechanically execute and display the effect. The vast majority of the syntax used to produce the page's contents lie within the JavaScript section, and the code reveals that the pie charts are measuring each country in terms of "litres" for the sake of example.

The amount of litres that each listed country has is displayed when that country's pie chart slice is rolled over by the mouse cursor, and the amount of space the country is occupying on the chart is dynamically displayed as a percentage. While Lithuania's 501.9 litres is shown to occupy 34.9% of the initial chart that is displayed in the left half of the page, dragging the Lithuania slice to the empty space in the right half of the page fills the right pie chart completely so that it becomes the sole slice representing 100% of the chart's contents. This dynamically causes the remaining five countries to maintain their relative proportions even as they all expand in size and percentage to fill the empty space on the previous chart.

Through an animated effect coded entirely within the JavaScript syntax, moving a slice from one pie chart to the other causes the contents of both pie charts to dynamically update themselves using smooth visual transitions. For more information click here https://codepen.io/team/amcharts/pen/OQKaGp.