Piechart

[column size=”1/4″]

[piechart name=”SEO” percent=”60″ color=”primary”]

Lorem ipsum dolor sit amet brav conse ctetuer adipi scing elitiani.

[/piechart]

[/column]

[column size=”1/4″]

[piechart name=”Marketing” percent=”70″ color=”primary”]

Lorem ipsum dolor sit amet brav conse ctetuer adipi scing elitiani.

[/piechart]

[/column]

[column size=”1/4″]

[piechart name=”Branding” percent=”80″ color=”primary”]

Lorem ipsum dolor sit amet brav conse ctetuer adipi scing elitiani.

[/piechart]

[/column]

[column size=”1/4″ last=”true”]

[piechart name=”Advertising” percent=”90″ color=”primary”]

Lorem ipsum dolor sit amet brav conse ctetuer adipi scing elitiani.

[/piechart]

[/column]

[spacer /]

[spacer /]

[column size=”1/4″]

[piechart name=”SEO” percent=”60″ color=”blue” forecolor=”white” thickness=”2″]

Lorem ipsum dolor sit amet brav conse ctetuer adipi scing elitiani.

[/piechart]

[/column]

[column size=”1/4″]

[piechart name=”Marketing” percent=”70″ color=”blue” forecolor=”white” thickness=”2″]

Lorem ipsum dolor sit amet brav conse ctetuer adipi scing elitiani.

[/piechart]

[/column]

[column size=”1/4″]

[piechart name=”Branding” percent=”80″ color=”blue” forecolor=”white” thickness=”2″]

Lorem ipsum dolor sit amet brav conse ctetuer adipi scing elitiani.

[/piechart]

[/column]

[column size=”1/4″ last=”true”]

[piechart name=”Advertising” percent=”90″ color=”blue” forecolor=”white” thickness=”2″]

Lorem ipsum dolor sit amet brav conse ctetuer adipi scing elitiani.

[/piechart]

[/column]

[spacer /]

[spacer /]

[column size=”1/3″]

[piechart name=”Marketing” percent=”70″ color=”orange” thickness=”5″ size=”180″]

Lorem ipsum dolor sit amet brav conse ctetuer adipi scing elitiani.

[/piechart]

[/column]

[column size=”1/3″]

[piechart name=”Branding” percent=”80″ color=”orange” thickness=”5″ size=”180″]

Lorem ipsum dolor sit amet brav conse ctetuer adipi scing elitiani.

[/piechart]

[/column]

[column size=”1/3″ last=”true”]

[piechart name=”Advertising” percent=”90″ color=”orange” thickness=”5″ size=”180″]

Lorem ipsum dolor sit amet brav conse ctetuer adipi scing elitiani.

[/piechart]

[/column]

[spacer /]

[pre][[piechart name=”Piechart Name” percent=”90″ color=”COLOR HERE” forecolor=”FORECOLOR HERE” thickness=”5″ size=”150″]
CONTENT HERE
[/piechart]][/pre]

Usage

Here’re parameters of this shortcode:

[list type=”plus”]

• percent: should be a number from 0 – 100.
• color: any color: red, blue, orange… or a custom color code such as #12dada. Default is the primary color.
• forecolor: also a color. Default is “#aaa”.
• thickness: the thickness of circle (in px). Default is 5.
• name: the piechart name/title
• size: The diameter of the circle (in px). Default is 150.
• delay: The time delay before the animation run in millisecond unit. Default is 0.

[/list]