SVG Donut Charts

How to resize symbol instances

1. Open .an file (with Edge Animate)
2. Click on the layer with instance you want to resize, “box1” for example.
3. In “Properties” panel change the width/height from 300px to the new one (you'll find controllers under the “Position and Size” section).
4. Save the file.

How to add more symbol instances

1. Open .an file (with Edge Animate)
2. Select “Group” layer, right click, choose “Ungroup Elements”
3. From Library Panel drag the “box” symbol on the Stage. Increase the number in symbol instance's name (for example “box4”)
4. Edit array “elements” below. Remove // in the commented line. Open Code window for that (top menu > Window > Code)
5. Change variables' values in “elements” according to your needs
6. Select all box instances on Stage and group them. Make sure the group is named “Group” (not “Group2” or anything else).

Note: The amount of “box...” symbol instances on Stage and number of elements in array “elements” must be the same. The “box” instances must be grouped to center-align them horizontally.

How to remove symbol instances

1. Open .an file (with Edge Animate)
2. Select “Group” layer, right click, choose “Ungroup Elements”
3. Delete symbol's instance from the Stage (for example “box3”)
4. Remove “elements” array's line that contains “box3” (for example). Open Code window for that (top menu > Window > Code)
5. Select all box instances on Stage and group them. Make sure the group is named “Group” (not “Group2” or anything else).

Note: The amount of “box...” symbol instances on Stage and number of elements in array “elements” must be the same. The “box” instances must be grouped to center them horizontally.

Variables explained

All the variables you can safely modify and play with are listed between two commented lines with text “VARIABLES SETUP”. Below comes every variable explained.

Values stored in “elements” array are chart individual, for example you can set different numbers, text, colors etc. for every chart. Variables set outside the “elements” array contain global properties for different charts (and so set same properties). Note that some variables might be absent in particular project.

How to change the icons

All project files use icon fonts generated with “Fontastic” – free online icon font generator. To change the icons you need to make your own icon font – the process is simple with “Fontastic”.

Create the icon font:

1. Create your free “Fontastic” account.
2. Login into http://app.fontastic.me/.
3. Step SELECT: Select the icons you'd like to use.
4. Click “Modify Font” menu link and change “Font Name” to icon-font.
5. Step CUSTOMIZE: Map the icons to characters you'll use in Edge Animate project. Use characters “a”, “b”, “c” – these characters are used in projects.
6. Step PUBLISH: click DOWNLOAD button to get your icon font.

Replace the icon font:

1. Unzip the file.
2. Copy the folder “fonts” and “styles.css” to project folder “icons” – replace the files.
3. Refresh the .html file and you'll see the new icons.

Note: If you've mapped other characters than “a”, “b”, “c”, you'll need to change the code in .an file:

1. Open .an file.
2. Open Code window from main menu: Window > Code.
3. Look for Stage > document.compositionReady on the left sidebar.
4. In “elements” array look for values in “character” properties – these should be the characters you've mapped the icons to. Change them to the ones your icon font is using.

Multiple Compositions in a page

To get multiple compositions in a page the HTML and JS file need to be hand-edited per the following instructions:

1. Duplicate these 3 files and add the "2" in the filename:

2. Change composition ID in them. Open these 3 new files in code editor and replace string EDGE-1404005 to EDGE-1404006 in all of them.

3. Edit the new Preload JS file. Additionally edit two lines in donut_charts_edgePreload2.js to point to the new files:

4. Edit HTML file to include two compositions

• Duplicate the line <script type="text/javascript" charset="utf-8" src="donut_charts_edgePreload.js"></script>
  Replace src to point to donut_charts_edgePreload2.js

• Duplicate the line .edgeLoad-EDGE-1404005 { visibility:hidden; }
  Replace CSS class pointer to .edgeLoad-EDGE-1404006

• Duplicate div <div id="Stage" class="EDGE-1404005"></div>
  Replace stage ID to Stage2 and class to EDGE-1404006

Note: It is important to rename the stage IDs in the HTML markup with a unique name to avoid conflicts.

So the final HTML will look like this:

Each donut_charts_edgePreload.js file causes the definition for a single composition to be included in the page. You can include multiple compositions by including multiple composition preload JS files:

Each composition requires a stage Element to attach to:

donut_charts_edgePreload.js has the composition ID set to EDGE-1404005 at the end of the file:
})(jQuery, AdobeEdge, "EDGE-1404005");

donut_charts_edgePreload2.js has the composition ID set to EDGE-1404006 at the end of the file:
})(jQuery, AdobeEdge, "EDGE-1404006");

Note: Additionally examples with multiple compositions are included in the folder examples / multiple_compositions

Trigger animation when the window is scrolled to Edge Animate file position

Note: working example is included in examples/trigger-animation-onScroll folder.

If you want the animation to show up when the window is scrolled down, so that the whole div is vissible you have to:

1. Open JS file with title ending _edge.js
2. Find the line Edge.launchComposition(compId);
3. Replace with this:

   var elem = $('.ID_OF_YOUR_STAGE');  /*--- replace ID_OF_YOUR_STAGE with your real id ---*/
   function isScrolledIntoView(elem) { /*--- Check if the div is in the vieport of the screen ---*/
   	var docViewTop = $(window).scrollTop();
   	var docViewBottom = docViewTop + $(window).height();
   	var elemTop = $(elem).offset().top;
   	var elemBottom = elemTop + $(elem).height();
   	return ((elemBottom >= docViewTop) &&
   	(elemTop <= docViewBottom) &&
   	(elemBottom <= docViewBottom) &&
   	(elemTop >= docViewTop));
   };
   function isScrolled() {
   	if (isScrolledIntoView(elem)) {
   		Edge.launchComposition(compId); /*--- Run The animation ---*/
   	}
   }
   $(window).on("scroll", isScrolled);

4. Save the file.

You can find the ID_OF_YOUR_STAGE in the same _edge.js file in the last line, for example: })(jQuery, AdobeEdge, "EDGE-1404005");. In this case the ID would be EDGE-1404005

Note: To avoid triggering animation before the whole div is fully vissible you have to set its width and height. Open HTML file and add CSS properties, for example:

<div id="Stage" class="EDGE-1404005" style="width: 100%; height: 500px;"></div>

Publishing from Edge Animate

After you've done editing in Edge Animate, publish the project files:

1. From main menu: File > Publish
2. Project files are published into publish folder

Projects in the package use Adobe Content Distribution Network (CDN) Hosting to speed up Animate composition delivery.

CDN Hosting

Compositions using the Adobe CDN all share a single URL for jQuery and the Edge Runtime. The browser caches the runtime, so the user only downloads the library once no matter how may Animate compositions they view, even if compositions are on different sites and produced by different authors.

Don't use the CDN if your composition needs to run without an Internet connection or if you want to use your own hosting exclusively.

SVG files require proper web server MIME-type configuration

If SVG files don't show up on web, the server doesn't serve MIME types for SVG files correctly. You should configure server appropriately. There are several ways to do it, depending upon the server type, and your access to server settings.

For example, in Apache server it's done by editing .htaccess configuration file that is hidden - make sure your FTP client shows hidden files. If your server does not have such a file, create a file and name it “.htaccess”, and associate the SVG file extensions with the correct MIME Type; if the file already exists, you can simply add the correct entries to it. The particular line you should add are:

AddType image/svg+xml svg

The .htaccess file should be placed in the directory that contains the SVG file, or any parent directory.

More on this subject: http://www.w3.org/services/svg-server/

Notes on Internet Explorer

Although IE9+ browsers support CSS3 transforms and animations, they don't support them on SVG elements. So IE9+ browsers will show the final static SVG file (exactly the same as in other modern browsers) but without animation.

Notes

Icons from “Font Awesome” set made by Dave Gandy (The MIT License).

Icon fonts generated with “Fontastic” – free online icon font generator.

Images are taken from pixabay.com (Public Domain CC0 license).

The projects were produced using Adobe Edge Animate CC version 3.0.