Responsive Charts

A fully customisable Responsive Charts plugin for WordPress with HTML5 animated charts

• created: 03/11/2014
• latest update: 01/20/2015
• by: Weblator
• plugins.weblator.com/responsive-charts
• email: plugin-charts@weblator.com

'Responsive Charts' uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE8.

Animated Chart Types

• Pie Chart
• Doughnut Chart
• Bar Chart
• Line Chart
• Polar Chart
• Radar Chart
• Bootstrap Progress Bars

'Responsive Charts' allows you to create HTML5 animated charts easily in WordPress.

• 7 animated chart types
• Allows for multiple charts on a single page
• Fully customisable
• Responsive
• Uses Charts.js

Wordpress

You can install the plugin by performing following steps:

1. Navigate to the 'Add New' in the Plugins dashboard
2. Navigate to the 'Upload' area
3. Select the zip file you downloaded from Code Canyon from your computer
4. Click 'Install Now'
5. Activate the plugin in the Plugins dashboard

FTP  

You can install the plugin by performing following steps:

1. Unzip the file you downloaded from CodeCanyon
2. Extract the 'weblator-charts' directory to your computer
3. Upload the 'weblator-charts' directory to the '/wp-content/plugins/' directory
4. Activate the plugin in the Plugins dashboard

Now that you've installed the plugin, let’s create your first chart.

Navigate to Charts > Add New

On the next page you will find Chart Settings

• Title - This is the name of your chart.
• Chart Type - Here you can select the type of chart you'd like to create.
• Chart Max Width - This is where you set the maximum width of your chart in pixels. Please note that by setting the value to '0' will turn the chart fully responsive, and to a maximum width of 100%.
• Show Legend - Certain charts have the option to show or hide the chart legend.

Below the Chart Settings section you'll find Style Settings



You'll see different options in the Style Section depending on what Chart Type in the Chart Settings section is selected. Altering these settings will change the overall appearance of the chart.

Below the Style Settings section you'll find Response Options



In the Response Options sections you can add your data set.

• Option Name - The name of the option and the label title.
• Option Value - The value of the option.
• RGBA - The colour you want the option to appear on the chart.

Click on 'Add Option' for each addition option you want to include on your chart.

Once you're happy with the above settings, click on 'update' to save the chart.

Charts can be displayed in a post or page using shortcode. Alternatively, template files usage can be used to display a chart elsewhere on a WordPress website.

Navigate to Charts > Edit



Copy the shortcode at the top of the settings and paste it into the post or page you want the chart to display.



Shortcode: [chart id="ID"]
Template files usage: <?php echo do_shortcode("[chart id=ID]"); ?>
Display a random chart: [chart random]