With Percent Infographs you can represent simple percent (%) into infographs with some animated effects. Percent to Infograph is the new WordPress plugin which provides you [percent_to_graph] shortcode you can use with custom values and parameters to show or compare percent of anything inside your posts, pages and other custom post types. You can easily start using its shortcode by copying and placing values from : [percent_to_graph data_percent="70" data_text="70%"] to your post content box.
You can define more custom parameters as shown in the following examples:
[percent_to_graph data_percent=”30″ data_text=”30%” data_info=” Value Increased” data_width=”25″ data_fontsize=”16″ data_dimension=”200″ data_fgcolor=”#E439A1″ data_bgcolor=”#eee” data_fill=”#fff”]
You can also insert multiple shortcodes in one post:
[percent_to_graph data_percent=”45″ data_text=”45%” data_info=”New Products” data_width=”25″ data_fontsize=”18″ data_dimension=”200″ data_fgcolor=”#80E800″ data_bgcolor=”#eee” data_fill=”#fff”][percent_to_graph data_percent=”45″ data_text=”45%” data_info=”Users Online” data_width=”25″ data_fontsize=”16″ data_dimension=”200″ data_fgcolor=”#FFFF00″ data_bgcolor=”#eee” data_fill=”#fff”]
[percent_to_graph data_percent=”90″ data_text=”90%” data_info=”Growth Rate” data_width=”25″ data_fontsize=”16″ data_dimension=”200″ data_fgcolor=”#FFD200″ data_bgcolor=”#eee” data_fill=”#fff”]
How Percent To Infograph Plugin Works?
Shortcode parameters have some predefined values like and nece you can use just its shortcode and the plugin will be displaying its default parameters.For those who want to use their own values to the shortcodes, the developer has provides a complete list of parameters with their default values:
data-percent=”65″
data-text=”65%” data-info=”Users Online” data-width=”25″ data-fontsize=”20″ data-dimension=”170″ data-fgcolor=”#80E800″ data-bgcolor=”#eee” data-fill=”#fff”>
Your shortcode with custom vales should look something like this:
[percent_to_graph data_percent=”30″ data_text=”30%” data_info=” Value Increased” data_width=”25″ data_fontsize=”16″ data_dimension=”200″ data_fgcolor=”#E439A1″ data_bgcolor=”#eee” data_fill=”#fff”]