How to resize symbol instances
How to add more symbol instances
How to remove symbol instances
Multiple Compositions in a page
Trigger animation when the window is scrolled to Edge Animate file position
Description
6 Edge Animate projects (+16 additional examples) with animated SVG Donut Charts for infographics, statistics, dashboard charts and other data visualisations.
- Displays one value or compairs two different values
- Present as Donut or Pie chart
- Animated SVG (CSS3 animation)
- Some projects use icon fonts to display the icons
- Resolution independent graphics - pure CSS shapes, icon fonts or SVG
- Any count of chart instances (easy to add more)
- Easy to change data, animation easing, animation direction, colors of elements (with or without Edge Animate software), add new ones or just remove them
- Included:
- Edge Animate files (.an, JS, HTML)
- Icon fonts in some projects (for preview purpose)
- Documentation
How to resize symbol instances
- Open .an file (with Edge Animate)
- Click on the layer with instance you want to resize, “box1” for example.
- In “Properties” panel change the width/height from 300px to the new one (you'll find controllers under the “Position and Size” section).
- Save the file.
How to add more symbol instances
- Open .an file (with Edge Animate)
- Select “Group” layer, right click, choose “Ungroup Elements”
- From Library Panel drag the “box” symbol on the Stage. Increase the number in symbol instance's name (for example “box4”)
- Edit array “elements” below. Remove
//
in the commented line. Open Code window for that (top menu > Window > Code) - Change variables' values in “elements” according to your needs
- 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
- Open .an file (with Edge Animate)
- Select “Group” layer, right click, choose “Ungroup Elements”
- Delete symbol's instance from the Stage (for example “box3”)
- Remove “elements” array's line that contains “box3” (for example). Open Code window for that (top menu > Window > Code)
- 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.
instance String
Name of the "box" symbol instance on the Stage. For example: "box1"
numbers Array of numbers
1st number - full value. For example: 100
2nd number - value relative to full value. For example: 50
numbers2nd Array of numbers
Same as with “numbers”, but for the second donut. In the projects with two donuts.
numberColor String
Color of the number. For example: "#222"
numberColors Array of strings
1st string - color of the first number. For example: "3081b9"
2nd string - color of the first number. For example: "49dbe8"
numberText String
The additional text for the numbers (on the right side). For example: "%"
or ""
(blank)
numberTexts Array of strings
1st string - additional text for the first number (on the right side). For example: "%"
or ""
(blank)
2nd string - additional text for the second number (on the right side). For example: "%"
or ""
(blank)
donutColors Array of strings
1st string - the color gradient starts. For example: "3081b9"
2nd string - the color gradient stops. For example: "49dbe8"
. Use the same as 1st string if you want to get flat color.
donut2ndColors Array of strings
Same as with “donut2ndColors”, but for the second donut. In the projects with two donuts.
icon String
The character from icon font the icon is mapped to. For example: "a"
. More on that here
iconColor String
Color of the icon. For example: "#3081b9"
text String
Text for the chart. For example: "Coffee"
textColor String
Color of the text. For example: "#222"
chartDiameter Number
Diameter of chart
For example:
80
donutStroke Number
Donut stroke width
For example:
20
fullDonutStroke Number
Full donut stroke width
For example:
20
fullDonutColor String
Full donut stroke color
For example:
"#f1f1f1"
donutStrokeLinecap String
“round” for donut with rounded ends, “butt” for straight ending donuts. Value for SVG “stroke-linecap” CSS property.
For example:
"butt"
,"round"
circlePortion Number
Portion of the circle. “100” makes full circle, “50” makes half of the circle, and so on.
percentage from
0
to100
chartRotate Number
Rotate the chart (in degrees)
from
-360
to360
animationDirection String
“CW” makes animation go clockwise, “CCW” - counterclockwise
For example:
"CW"
or"CCW"
animationDuration String
Donut animation duration. Value for CSS property “animation-duration”
For example:
1s
,0.5s
,350ms
animationEasing String
Donut animation easing. Value for CSS property “animation-timing-function”. You can get more easing functions here: easings.net
For example:
linear
,ease
,ease-out
,ease-in
,ease-in-out
,cubic-bezier(0.785, 0.135, 0.15, 0.86)
numberTextSize Number
The size of additional text for the numbers (on the right side). Percentage of number's “font-size”.
percentage from
0
to100
numberTextOpacity Number
The opacity of additional text.
from
0
to1
ruler Boolean
“true” shows ruler's stripes, “false” hides it. Other ruler variables (below) work only if this value is set to “true”.
One of these:
true
orfalse
rulerSegments Number
The amount of segments the ruler is divided into.
For example:
24
rulerThickness Number
Ruler's bar thickness.
For example:
22
rulerColor String
The color of ruler's dashes.
For example:
"#fff"
rulerDashThickness Number
The thickness of ruler's dashes.
Any positive number, For example:
1
,2.5
,10
, and so on.
rulerLineCap String
“butt” for straight dashes, “round” for rounded. Value for SVG “stroke-linecap” CSS property. Defines how the ends of an SVG line is rendered
For example:
"butt"
,"round"
rulerDashOffset Number
Reposition the ruler for fine-tuning if needed.
Negative and positive numbers. For example:
0
,5
,-5
rulerScaleFactor Number
Scale the ruler element. Larger than “1” - increases, smaller than “1” - decreases it.
For example:
1
rulerHideFirstLast Boolean
“true” hides the first and the last ruler's dash, “false” shows all the dashes.
One of these:
true
orfalse
rulerOpacity Number
The opacity of ruler element.
from
0
to1
legendTitles Array of strings
Text below the chart tied to the number.
1st string - first title. For example:
"September"
2nd string - second title. For example:
"October"
makeBiggerValueBold Boolean
Highlight bigger value with bold text.
One of these:
true
orfalse
donutStrokeBigger Number
Stroke width of the donut that shows bigger number.
For example:
20
numberColorNegative String
Color of the number with negative value.
For example:
"#f71539"
donutColorsNegative Array of strings
Color of the donut with negative number.
1st string - the color gradient starts. For example:
"3081b9"
2nd string - the color gradient stops. For example:
"49dbe8"
. Use the same as 1st string if you want to get flat color.
donut2ndScale Number
Scales the second donut relatively to the first. If set “1”, the diameters of the both are the same. If set “2”, the second donut's diameter is two times bigger.
For example:
1.2
,1
,2
donut2ndStroke
The stroke of the second donut.
To make same width as the first donut:
donutStroke/donut2ndScale
6 times smaller stroke example:
donutStroke/donut2ndScale/6
2 times bigger stroke example:
donutStroke/donut2ndScale*2
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:
- Create your free “Fontastic” account.
- Login into http://app.fontastic.me/.
- Step SELECT: Select the icons you'd like to use.
- Click “Modify Font” menu link and change “Font Name” to icon-font.
- 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.
- Step PUBLISH: click DOWNLOAD button to get your icon font.
Replace the icon font:
- Unzip the file.
- Copy the folder “fonts” and “styles.css” to project folder “icons” – replace the files.
- 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:
- Open
.an
file. - Open Code window from main menu: Window > Code.
- Look for
Stage
>document.compositionReady
on the left sidebar. - 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:
donut_charts_edge.js
donut_charts_edgeActions.js
donut_charts_edgePreload.js
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:
{ load: "donut_charts_edge.js"},
{ load: "donut_charts_edgeActions.js"}];
4. Edit HTML file to include two compositions
Duplicate the line
<script type="text/javascript" charset="utf-8" src="donut_charts_edgePreload.js"></script>
Replacesrc
to point todonut_charts_edgePreload2.js
Duplicate the line
.edgeLoad-EDGE-1404005 { visibility:hidden; }
Replace CSSclass
pointer to.edgeLoad-EDGE-1404006
Duplicate div
<div id="Stage" class="EDGE-1404005"></div>
Replace stageID
toStage2
andclass
toEDGE-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:
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="donut_charts_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8" src="donut_charts_edgePreload2.js"></script>
<!--Adobe Edge Runtime End-->
Each composition requires a stage Element to attach to:
<div id="Stage" class="EDGE-1404005"></div>
<div id="Stage2" class="EDGE-1404006"></div>
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:
- Open JS file with title ending
_edge.js
- Find the line
Edge.launchComposition(compId);
- 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);
- 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:
- From main menu: File > Publish
- 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.