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.

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.

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.

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

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.

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:

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:

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.

I love this plugin, it’s really nice. I have question, if this can be somehow also use in admin. Let’s say I want to make some plugin for my own to show some stats in my admin and I want use your plugin for displaying charts in admin area. I’m not aware if I can use shortcodes in plugin, so maybe can you add some php function call to able to use it also in admin area?

Hmmm.. I don’t see why not. Perhaps add PHP function capability and demonstrate it in a widget via the tutorial. Will add this to the list. Right now flitter is getting worked on but perhaps in a few weeks.

I’m using WordPress Mu 2.8.4 on a local domain.
If I’m using a Windows Server 2003 SP3 Client the chart is not displayed,
With the same web server and the same page if I’m using a windows XP client all works fine.

i’ve read that it use Google API to draw the chart and so probabily when google will upgrade the code will be possible shortcoding also new type of chart.

just for keeping this occasion that i’m writing here i’d like ask you if there is a way to use any decimal separator and to show a tooltip “that display the current value of a item” on the chart for better understandig which are the values … without open the data table.

if that isn’t only, mine single one request could be work as a suggestion .

Will be adding a new chart type soon and a few other features. Tooltips won’t work with google chart as it is basically one solid graphic (i.e. its not a flash component or anything) and hence not interactive. The advantage is any device (phone, etc) can display a graphic, while only flash-enabled devices would work otherwise. Its possible to add flash charting as compatible sister shortcode plugin.

Great plugin!
Would love to see it support line chart and also support values with decimals.
ie. I meassure a Ph value over time and would like to create a line chart that shows how the Ph value swings over time. The Ph value usually ranges between 7,8 and 8,3.

Hi there,
Nice plugin. I notice that it truncates the chart in such a way that the highest value bar is not drawn at its full length. You can see this in the examples you show above. For example, in the first chart, the highest value for the intel chip is 259, but the chart only shows to 250. You can see this effect in the next one as well where the highest value is 4071 but the chart stops at 4000.

Why I noticed this is that I was hoping to be able to show a chart whose scale goes to 100, in the case of percentages, even though none of the values reach 100. Do you get my drift? The chart would have some blank space above the highest values. I was hoping to use the watermark option to force the range of the chart, but watermark values are also truncated.

I see what you are taking about. The next version is about to be worked on. I intend to finalize line graphs, and will fix this issue. Some of the axis stuff is at the whim of google chart oddities. Hopefully what you are asking for can be done.

I just discovered this plugin, and it looks like it will suit my needs perfectly. I do have a few requests though, or maybe this is already built into the chart and I am just not aware how to solve the problem.

I want to list dollar amounts in my chart, but I am unable to use the $ symbol. If I do, it breaks the chart a bit, and is not really useable. Additionally, it is cutting off prices with a 0 at the end.

For example, if I want to type in 46.10 as the amount, it lists 46.1 in the chart table. While this is relatively minor, it would be great if I could include the missing digit when dealing with dollar amounts, or other areas where it may be vital.

Overall though, great product, and I hope to use it if the above can be sorted out. I love it so far.

Good idea. Will add this capability in the next release. Perhaps both a prepend and postpend label for the chart table along with precision options. Note that they will only apply to the chart table at the moment. I hope that still makes it useful.

With a prepend label, you could provide your nationallity currency label (“$”).
With a postpend label, you could provide units (“Miles”, “Seconds”, “%”, etc). I don’t think you want to go overboard with units everywhere, but definitely some cases where you would want to do so.

Hello I have been looking at wordpress graphing and charting plugins and yours seems to be the most current and has the features I am looking for (graphing more than one plot). I am looking to have the ability to add more plots through time (date, data a, data b, data c). Like a progress meter. I would like to add a feature to be able to do this in the admin area instead of going into the post and manually changing the data there. I know it would be a big change since you are looking at database calls, but it would allow the charts to be a bit more dynamic.

I am relatively familiar with PHP, is there any way I can manually add this to the plugin myself? Or might you add this as an update soon (say, within the next week or two?) Thanks! Yours is the best graph plugin I have come across yet, adding this feature would make it complete (for me) ! 🙂

I want to make sure I understand your request. I take it your values would go from say, 0-200 but you want the plotted portion to start at a user-selectable range so as to accentuate the top of the graph (where the differences will be more visible)?

This is for a family weightloss site (for my family) and we all would prefer to view more closely the range of our weights. Nobody is going to be below 90 pounds, so there is no need to show that range on the graph. So we’d like the left side of the Line Graph to start at 90 and go up to 200, does this make better sense? So, it’s like zooming in on the graph. 🙂 Thanks!!!!

Just to put closure to this, Greg had a dictionary plugin that replaced keywords in his blog posts with HTML markup. The plugin performed this prior to the wordpress shortcode stage, so what he entered in his editor is not what ecb (easy chart builder) got.

The workaround was for him to replace any letter of the keyword he wanted to use in a shortcode with its ASCII code equivalent. You do this by entering a percent character, and the hex code number from this table that matches the letter/character you want:

ecb is being beta tested with the following features:
> Can put a chart in a widget
> 12 groups (up from from 8). Default colors are provided for the new 4 groups.
> Zoom axis using a new “minaxis” parameter.

Ahh a long and painful tail about the graphics. Sorry I can’t add animations…. the underlying technology is a PNG image. I could do interactive graphs if I used flash, but then mobile users on … “flash challenged” mobile platforms would not be able to see the chart (and now windows 7 phone joins that foray).

There are other technologies I could use to create interesting interactions but they don’t work in all major browsers. I will eventually go back and address the technology under the plugin.

Thanks, that was my problem. Now another question/feature request. Would it be possible to have the entered values show up on the graph? Like right above a bar would be its value rather than trying to guess what the value is. A popup on a mouseover would be really cool!

well THATs not good. I cannot see this using 8 on widows 7, but that’s on this site. Can you provide any details? Ill go back and compare the generated HTML to see what I had changed and look for suspects.

I have my valuenames in a reverse order on the horizontal axis, at least when I’m using type=”line”. Could the order be reversed somehow, without the trivial method (typing the valuenames in a reverse order)?

Im not quite sure if this will do, but in the js folder edit easy-chart-builder.js and locate the function “extractValues”. There is one for-loop here with a little bit of code inside. Change the line inside from
retString[t] = parseFloat(tempList[t]);
to
retString[t] = parseFloat(tempList[limit-t-1]);

Me again. I upgraded to the latest version, what I have on my line graph is the following:

Weight values beginning at 90 going up to 200, on the bottom horizontal value I have WK 1, WK2, etc…

with the latest upgrade it shows my starting weight at WK7, ending at WK1… so there all of a sudden in reverse order. ???? The values of 90-200 (vertical) are working good, just the horizontals are being reversed. The line graph doesn’t change, it’s still showing correctly as going down, just the value names are affected.

Any idea how I can fix this or am I inputting something wrong. It was working before, now it’s different.

Me again. I upgraded to the latest version, what I have on my line graph is the following:

Weight values beginning at 90 going up to 200, on the bottom horizontal value I have WK 1, WK2, etc…

with the latest upgrade it shows my starting weight at WK7, ending at WK1… so there all of a sudden in reverse order. ???? The values of 90-200 (vertical) are working good, just the horizontals are being reversed. The line graph doesn’t change, it’s still showing correctly as going down, just the value names are affected.

Any idea how I can fix this or am I inputting something wrong. It was working before, now it’s different.