Introduction

Easy Chart Builder makes it easy to incorporate sophisticated review charts and graphs directly within a post or page.

Hey, its free. Try it out.

You can download the latest version here:

Easy Chart Builder

Example

In the spirit of “just show me now!”, here is a live example. Lets chart some actual data from an Anandtech.com article comparing an AMD and Intel chip. Anand ran a battery of tests known as “SYSMark 2007″ on each CPU and plotted the results.

Easy Chart Builder would refer to the two subjects of the test (the two chips) as the “groupnames”. In our case, something like “AMD, Intel”. The tests themselves have names, such as “3D”. These are provided under “valuenames”. Then the only remaining step is to provide the values. You record the values by the group. That is, we first list all of the results for AMD (only because it is listed first in our groupnames). The first group value set is assigned to group1values, and so on.

Here is the complete shortcode. Remember that group1values captures all of the test results for AMD, and group2values all of the test results for Intel because this is their order as listed in groupnames.

[easychart
type="horizbar" height="100" title="SYSMark 2007: AMD v.s. Intel" groupnames="AMD Phenom X4 9950, Intel Core i7 940" groupcolors="005599,229944" valuenames="Overall,E-Learning,Video Creation,Productivity,3D" group1values="157,132,208,150,148" group2values="229,202,259,226,232" ]

Here are the live results. Try looking at this page from your iPhone to witness the scaling. Also note the expandable data table. You can configure it away if it is undesirable. Because the chart size is dynamic (to support mobile phones), you can enter a height and width to help Easy Chart Builder consider the aspect ratio you want. This example has height=”100″ to marry with the default width of “200″ to create a more horizontal look for aesthetic reasons.

dyerware




Here is a more complicated chart, showing the vertical bar format:

[easychart type="vertbar" height="300" width="350" title="Your Title Here" groupnames="Chocolate, Vanilla, Strawberry, Mint, Peach" valuenames="1999, 2001, 2003, 2004, 2007, 2008" group1values="2069, 1184, 2389, 820, 2398, 701" group2values="2002, 1177, 2825, 697, 3226, 993" group3values="4071, 824, 505, 100, 230, 0" group4values="0, 163, 320, 145, 0, 121" group5values="0, 0, 143, 70, 565, 102"]

dyerware




And here is a pie chart. There are a lot of aesthetic options if for example you do not like the faded background.


[easychart type="pie" title="Free Clinic Medical Expenses" groupnames="Operating,Fundraising,Building,Pharmacy,Medicine,Patient Care" group1values="12" group2values="13" group3values="5" group4values="23" group5values="2" group6values="45" chartfadecolor="FFFFFF"]

dyerware





And here is a line chart:


[easychart type="line" height="300" width="350" title="Your Title Here" groupnames="Chocolate, Vanilla, Strawberry, Mint, Peach" valuenames="1999, 2001, 2003, 2004, 2007, 2008" group1values="2069, 1184, 2389, 820, 2398, 701" group2values="2002, 1177, 2825, 697, 3226, 993" group3values="4071, 824, 505, 100, 230, 0" group4values="0, 163, 320, 145, 0, 121" group5values="0, 0, 143, 70, 565, 102"]


dyerware




Watermarks


Below is an example of a watermark region, ideally showing some important high and low section from the data. You can add a watermark easily by simply using the watermark parameter and specifying the start and end value for the region.

The color of the watermark defaults to a light blue but you can use the “watermarkcolor” parameter and provide an HTML RGB color code (see the colors discussion in the next section).

[easychart type="vertbar" height="300" width="350" title="Your Title Here" groupnames="Chocolate, Vanilla, Strawberry, Mint, Peach" valuenames="1999, 2001, 2003, 2004, 2007, 2008" group1values="2069, 1184, 2389, 820, 2398, 701" group2values="2002, 1177, 2825, 697, 3226, 993" group3values="4071, 824, 505, 100, 230, 0" group4values="0, 163, 320, 145, 0, 121" group5values="0, 0, 143, 70, 565, 102" watermark="1000,1800"]

dyerware




Clipping



You can clip away the bottom of a bar or line graph. This may be useful when all of the values are large and you wish readers to focus only on where the action is (so to speak). For example, if all values are within 100 and 105, you may want to clip away 0-99 to enlarge (zoom in) on the important area where the differences are.

Clipping is done via the minaxis parameter. With this you specify where the plot of your values will start. Below is an example of an unclipped chart. Notice that because the values all croud together there is little to distinguish them.

[easychart type="horizbar" height="50" width="200" title="No Clipping" groupnames="My Team, Your Team" valuenames="Game 1, Game 2" group1values="100, 102" group2values="105, 101" ]

dyerware




Now we clip away the bottom of the graph all values below 95 to zoom in on the relevant area for the reader.

[easychart type="horizbar" height="50" width="200" title="Clipping" groupnames="My Team, Your Team" valuenames="Game 1, Game 2" group1values="100, 102" group2values="105, 101" minaxis="95"]

dyerware


By using minaxis to clip your graph as opposed to manually modifying your group values, the original values remain intact, making the data table and axis accurate. Also, since none of the original values are affected, you can easily experiment with a different minaxis until you get the visual cue you are looking for.

Colors



It goes without saying that the reason you want a chart is to be visual. While Easy Chart Builder provides you with a set of default colors, you can override them all. They are quirky HTML color codes however. Here is a good site to help you pick a color:

HTML Color Code Lookup

The background fade is white to gray. You can modify either of the two colors and the generated chart will fade from one to the other. You specify the top (foreground) color with “chartcolor” and the fadeout (lower color) with “chartfadecolor”. Here is an example with the default colors:

chartcolor=”FFFFFF” chartfadecolor=”DDDDDD”

Placement



You can use the [easychart] shortcode on posts, pages, and as of v0.7 in widgets.

To place a chart within a widget, first drag a generic text widget onto your blog. Text widgets are for generic HTML, so edit it’s content and just use the shortcode as you normally would.

For mobile devices, easychart actually scans the available space and enlarges itself to fit, abiding by your aspect ratio preferences which are dictated by the width and height attributes. If there is no space (for example hidden within our spoiler plugin) it will default to be exactly the width and height you specify.


Usage



Now that we have seen it in action have some idea as to what you want to build with it, lets go over each parameter in detail. Anywhere (and even more than once) within a page or post you may enter the following to render a chart:

[easychart (your parameters go here)]

It is very important that all of your parameters appear on one line and are all lower case. The plugin has had an addition made to detect malformed arguments and abort processing. This helps you recognize a formatting problem. If you experience this, you will see the following text along with some help information on your post or page: “EASY CHART BUILDER SHORTCODE ERROR”.

It is recommended that you enter these shortcodes in the raw HTML editor and not in a WYSIWIG one. This also avoids the unintentional insertion of HTML code that would otherwise malform your parameters and input text.

Ok, enough of that. Lets go over each easychart parameter:

type (required)
Choices: “horizbar”, “vertbar”, “pie”, “line”
Description: chooses the type of chart

height (optional)
Example: “200″
Description: Height in pixels (This is only used for aspect ratio calculations)

width (optional)
Example: “200″
Description: Width in pixels (This is only used for aspect ratio calculations)

title (optional)
Example: “my title”
Description: Provide a title if you wish

groupnames (required)
Example: “XP, Vista, Windows 7″
Description: comma-separated list of the items being compared. In this example case, three versions of Windows.

groupcolors (optional)
Example: “FF00FF, 005599, 229944″
Description: comma-separated RGB colors, one for each item listed in groupnames. A set of default colors are provided if you do not specify any.

valuenames (required)
Example: “Disk copy, Network speed, Boot times, Shutdown times, Memory usage”
Description: comma-separated list of tests / comparisons we are reporting on. In the example provided, a list of performance measurements for our operating systems.

groupXvalues (required) X=1-12
Example: “10, 203, 12, 4042, 292, 0″
Description: Comma-separated list of values for a particular group. If X=1 (group1values), the values are associated with the first entry in groupnames (in this example, “XP”). The contents of group1values are then the measurements for XP from the tests described in valuenames (disk copy, network speed, etc). Up to 12 groups can be specified (i.e. up to group12values).

watermark (optional)
Example: “100,180″
Description: Create a band of color behind the chart over a particular range of values. It is to create an emphasis of some sort for your discussion on the data being presented.

minaxis (optional)
Example: “100″
Description: Defines the lower bound axis. Values below this are clipped (not plotted). This can be used to zoom into the interesting area of a bar or line graph. The default is to not define a minimum axis value.

watermarkcolor (optional)
Example: “A0BAE9″
Description: A color code for the watermark region.

currency (optional)
Example: “$”
Description: A currency representation for the chart table values. The default is to not have one. Right now only the chart table will show this.

precision (optional)
Example: “2″
Description: Number of decimal places to represent values. For example, a dollar amount may want 2 decimal places such as 9.00. This feature is not limited to currency of course. Right now only the chart table will pay attention to this setting. The default is to not have a precision restriction.

imagealtattr (optional)
Example: “this is a chart”
Description: alternate text for chart image. Allows you to fill in the ALT attribute of the chart image. It can help you with SEO rankings. If left blank, the title parameter is used to fill it.

imagetitleattr (optional)
Example: “This is a chart”
Description: Allows you to assign the TITLE attribute for the chart image.

hidechartdata (optional)
Choices: “false”, “true”
Description*: If set to “true” the chart data table and show/hide button are not built.

chartcolor (optional)
Example: “FFFFFF”
Description: Color of chart background specified in RGB

chartfadecolor (optional)
Example: “DDDDDD”
Description: Color of faded bottom portion of chart background, specified in RGB

datatablecss (optional)
Example: “htable”
Description: An alternate class (or set of classes) to use for the data value table. This will help theme your table.

imgstyle (optional)
Example: “text-align:center;float:center;”
Description: The CSS Style tag attribute for the image.