Introduction



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

Hey, its free. Try it out.

You can download the latest version here:
Easy Chart Builder

And support forum here:
support Forum

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.com


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.com


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.com




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.com




There are some stacked variants of the horizontal and vertical bar charts, called “horizbarstack” and “vertbarstack” respectively. Keep in mind that these are truly stacked graphs and not overlapped. Lets have a look at the horizontal one.

[easychart type="horizbarstack" height="50" width="200" title="horizbarstack" groupnames="Group 1, Group 2" valuenames="B, A" group1values="11,23" group2values="15,30"]

dyerware.com


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.com



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.com




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.com


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.

Markers

You can place markers in a graph (except pie) on data points and even between data points. This is optional of course, but its useful to call out attention to something. While you can have markers on bar graphs, they work much nicer on the line graph.

Each marker you add has a little letter on it, with the first one being “A” and the second one being “B” and so on. This allows you to refer to a particular marker in the chart for discussion purposes when there are more than one.

You specify a marker by using the “groupXmarkers” argument, where X = 1-12. If a group has no markers, you can simply omit the argument entirely. Recall that a group harkens your “groupnames” argument and is the basis of the color coding of values. The groupXmarkers argument must contain a list of zero-based data point indices from your groupXvalues data, NOT VALUES. Here is an example to pull it together:

If we have group 1 and its values are group1values=”100, 123, 310, 500″, and we want a marker on its “123” data point, we would specify group1markers=”1″ (we start at 0, so 0=100,1=123, 2=310, and so on).

You can even have a marker BETWEEN data points by using a fraction. In the above example, if we want another marker half-way between the values 310 and 500, we would modify group1markers to be

group1markers = “1, 2.5”

Lets play now :). Below is an example of a chart with two groups and we want a marker between the first and second data value of group 2:

[easychart type="line" height="100" title="Marker Test" groupnames="Group 1, Group 2" valuenames="E,D,C,B,A" group1values="157,132,208,150,148" group2values="229,202,259,226,232.43" group2markers="0.5" hidechartdata="true" ]

dyerware.com


Incidentally, you can customize the marker color using the markercolor parameter and specifying an HTML color code in quotes.

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.

Admin Settings

Easy Chart Builder now has its own admin settings page. Here you can supply default values for many settings. You an always override the defaults by specifying their shortcode counterparts directly in the shortcode. Allowing you to change the default values simply makes using the shortcode easier by removing the need to enter customization parameters you repeatedly use.

Easy Chart Builder Admin settings

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:
Easy Chart Parameters

Don’t forget the dyerware forum for any plugin questions or suggestions!