How to create Charts – Pugpig Documentation

Our Pugpig Charts content type allows users to create simple charts and add them into article content. The 'Charts' option should be available on the left hand menu bar alongside the other content types like Articles, Shorts etc. However, it is optional so we can remove it if you don't need it. If you don't see it but you do want it, you may not have the plugin activated. Contact support@pugpig.com and we'll turn it on.

There are 6 types of charts all with animations.

Types of charts:

Bar
Doughnut
Line
Pie
Polar
Radar

Chart Features

Animation on load with fallback for snapshots
Colour options

How to create a chart

Name the chart - this is the name you'll reference the chart by. It will not be displayed anywhere on the article.

Select a chart type - choose a type of chart you want to create. See options.

Tick to show legend - choose whether you want the legend to be displayed underneath the chart

Create a Chart ID (required field) - add a unique chart ID. This will be used for adding the chart to an article.

Add a chart title (Optional) - name the chart. If set, this field will be used as the chart title

Select a chart title position - select where you want the title to be positioned. Selecting 'None' will remove the title from the page completely.

Label X-Axis / Y-Axis (Optional) - name the chart's axis. This is not an option for Pie, Doughnut and Radar.

Add the data - use the table to add data for the chart. Note: The layout of the table may change based on the chart type selection.

Add Dataset Labels: Dataset Labels are indicated by the light blue background.

Add Colours: Bar / Line / Radar colour pickers are located next to the Y-Axis labels. Pie / Doughnut / Polar colour pickers are located on the lower X-axis of the table.

Add Data: Use the fields provided to enter numerical data.

Add Columns / Rows: Use the 'Add new column' and 'Add new row' buttons located underneath the table.

Delete Columns / Rows: Select the columns / rows you want to delete by ticking the associating checkbox and 'Delete selected items' button.

Save and preview the graph - using the preview button will allow you to view the chart you have created. This page cannot be added to an edition - you must add it into an article using the chart ID you have created.

Add it to an article - choose an article you want to add the chart to. Use the 'Add Chart' button located on the text editor. Add the chart ID into the field provided and this will add a placeholder into the editor. Preview the article to view your beautiful charts!