From the package take the src/infographic.min.js file and upload it on your WordPress server (for ex. in a folder called scripts so the link to the script might look like http://www.example.com/scripts/infographic.min.js)
Install the plugin in your WordPress by going in your WordPress administration console in Plugins > Add new > Upload and upload the plugin zip file
Configure the plugin by going in your WordPress administration console in Settings > Infographic Shortcodes and in the "Infographic Library URL" fill in the URL of the Infographic Library (eg. http://www.example.com/scripts/infographic.min.js)
That's it! If everything is configured properly you can start using the Infographic Shortcodes WordPress Plugin.
How to make an infographic using the Infographic Shortcodes WordPress Plugin
You can use the Infographic Shortcodes WordPress plugins in 2 ways:
1. Using the Infographic wizard button . This button appears in the rich text editor menu when you create/edit a post or page. This button is also context aware, so you will be able to edit charts that you created earlier.
2. By keying in the shortcodes corresponding to the graph / chart that you want to display. Each shortcode has a series of parameters. The available shortcodes are:
Interactive infographic examples
Subset 1Subset 2Subset 3Subset 1Subset 2Subset 3
Example bar chart made using the infographic WordPress plugin. Here is the source code:
For any of the interactive infographic charts produced you can right click on them and save them as PNG images. The result will look something like this:
Here's another example, a pie chart infographics:
Pie chart data set 1Pie chart data set 2Pie chart data set 3Pie chart data set 4
[infographic-piechart type='doughnut' padding='10' highlight_mode='border' font_family='arial' font_weight='normal' width='250' height='250' colors='#004981,#0069b9,#0091ff,#40acff,#91d0ff']
[ig-pieslice label='Pie chart data set 1' value='20']
[ig-pieslice label='Pie chart data set 2' value='12']
[ig-pieslice label='Pie chart data set 3' value='7']
[ig-pieslice label='Pie chart data set 4' value='53']
I've also exported the image for this infographics and the result looks like this:
If you want to see what and how to create infographics you can get inspiration from a few infographic examples that I have made using the HTML Infographic Library. The sample infographics features are all supported by the Infographic Shortcodes WordPress Plugin.