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.
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"]
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"]
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"]
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"]
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"]
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" ]
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"]
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" ]
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.
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!
I love this plugin, tested it and wrote about it.
As for the feature request, could we be able to set generated chart’s ALT and TITLE tag? For the SEO reasons, you know 🙂
Thanks. Thats a great idea… will add it very soon.
Will create two optional arguments for hard-core users to specify them, and for casual ussers have them default to the chart title (if provided).
An additional feature being mulled about for a quick turnaround is the option to render the raw chart values in an HTML table below the graph.
[…] Go here to read the rest: Easy Chart Builder plugin for WordPress | dyerware […]
Hi,
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?
Thank you for your response
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.
Hi,
Where good and useful plugin.
I suggest to add on the graphs the possibility of drawing a horizontal line at a defined value. This line would allow to symbolize a target value on the graphs.
Thank
Read “Very good and useful plugin”. Sorry for this mistake !
Ok, good idea. I think I can add this easily enough.
Hi,
I’ve an issue with Easy Chart Builder.
The graph is not displayed, I only see the string: dyerware
The button “Show/Hide Table Data” works fine.
I use PHP: 5.2.5
Best Regards
monpelaud,
can you post the shortcode here? Except leave off the ‘[‘ brackets so nothing gets processed!
I think that a plugin is missing on my PC.
What is the necessary plugin to display charts with Easy Chart Builder ?
None. What version of wp are you using? Have you tried using the shortcode with no parameters at all?
Email support a URL to a post with the problem and let’s see if we can figure out what is happening
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.
Many Thanks for your support.
Oh. My guess is you don’t have javascripting on for the server browser. ECB uses JavaScript for analyzing the client frame size
Ok, many thanks.
ECB is a very good plugin that is very easy to use.
Best regards
g day,
thank for the excellent plugin
i’ts really simple to post using the shortcodes .
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 .
regards
leepton
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.
Can you explain the decimal separator request a little more?
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.
Wow! That was fast 🙂 I just installed easy chart on another site and tested “line” just for fun, and it actually draws line charts 🙂
Yeah, I don’t advertise it because I think it looks funny (need to work on it a bit before its official), but I got a lot of it done in the last update.
Also, you should be able to use fractions (i.e. 8.0,8.3, etc).
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.
Cheers
Chris
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.
I see. You definitiely don’t want to put $ in the values section.
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.
Just to provide an update: I’ve finished line graphs, added currency and precision support for the tables, and am working on the left axis issue Chris brought up. Once done Ill release the update.
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.
Thanks for the consideration.
Would it be possible for the line chart to have the left side range of numbers go from , say 90 to 210 rather than from 0 to the highest entered value? If so, how would I add this?
Thanks!
Currently no. I can look into adding it.
-d
That would be great!
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) ! 🙂
Yes, look for it in a week or two. Thanks for the complement 🙂
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)?
Feel free to correct me.
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!!!!
Great plugin! Is there a way to add more than 8 group names?
It’s not a hard limit to increase, but I can’t make it too big. What would be useful to you?
12 will work for me. Thanks!
G’day,
Love your plugin, very easy to use and powerful.
Just one issue. I would like to use hyphens in the title, such as:
title=”Greg Olson-Hyde”
But it does not seem to allow this – any workaround?
Thanks
greg
Hmm. I can use dashes in the title, group names, and value names ok. Can you email (or post here) the shortcut that is failing for you? Maybe the bug is more subtle.
thanks!
-d
Thanks for your speedy reply! The exact wording: “Lizard-Brain” is part of my URL – is that the problem, using it in the ‘Rating’?
This does not work:
[easychart type="pie" title="Rating of 96% Lizard-Brain" groupnames="Lizard-Brain 96%,Thinking-Brain 4%" group1values="96" group2values="12" groupcolors="CC0000,04B4AE" width="50" chartcolor="EFF5FB" imgstyle=“text-align:left;float:center;” hidechartdata="true"]
EASY CHART BUILDER SHORTCODE ERROR
# Check for misspelled parameters (case matters)
# Check for new lines (all must reside on one long line)
# Error near [0], [title=“Rating]
This does:
[easychart type="pie" title="Rating of 96% Home-Brain" groupnames="Lizard-Care 96%,Hospital 4%" group1values="96" group2values="12" groupcolors="CC0000,04B4AE" width="50" chartcolor="EFF5FB" imgstyle=“text-align:left;float:center;” hidechartdata="true"]
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:
http://en.wikipedia.org/wiki/ASCII#ASCII_printable_characters
“Greg” would be %47reg
regards
-d
I would like to publicly thank you for all your help in resolving this for me!
greg
Just to give an update:
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.
-d
Just following up to see if you were able to add that “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)?”
Thank you so much!!!
Ok its out and this tutorial and faq are updated. I just noticed if you clip a chart, the watermark is screwed up (it does not follow the zooming). Ill get that in a later update 🙂
Thank you SO MUCH! I L♥VE it!!!!!! Your plugin will definitely be the only graph plugin I recommend! 🙂
Hello,
I have just found and love this plugin. It is very user friendly and great final output.
I have one question:
For a line graph, is it possible to put a watermark on the x axis? I’m plotting stock prices for a year, and want to highlight a 3 month stretch.
Thanks!
Gates
Sorry I couldn’t reply sooner. Currently its not possible but I think I can add it easy enough. I have a maintenance release for this plugin and can roll in this capability.
Thanks so much. I did find one other thing that would be helpful… Is it possible to set it up that when you mouse over the line, the relevant values could pop up, or at least the y axis value?
The CSV import function that Mario requested is also highly interesting to us as a side note. Thanks again for a great plugin and your willingness to work with the users.
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 for uping the group values to 12. Would you consider making a pay version of the plugin that would allow a csv import function to create the charts?
Guess that depends… what did you have in mind? A CSV file you reference in the shortcode or an exel macro that just creates the shortcode text for you and you paste into the editor.
I can do either and would not ask for any $
I would say a CSV file I can upload and reference in the shortcode.
I think an exel macro that just creates the shortcode text and paste into the editor is a great idea too..
I tried to install ECB on my WordPress site but I get the following fatal error…ideas?
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /home/justi62/public_html/wp-content/plugins/easy-chart-builder/easy-chart-builder.php on line 30
Do you have PHP v5 or higher? Sounds like you have PHP 4. If this is not the case then we have a problem 😉
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!
Ok then! As of 0.8.1 We now have stacked graphs and a new un-asked-for feature markers. But more importantly some key bug fixes left over from the clipping and line graph additions.
Things In The Queue:
1) Vertical watermark
2) CSV source file (which, if I use javascript means it must reside on the same IP address as the page the chart is being shown on)
Big thanks to everyone for helping me with ideas for improvements.
I upgraded to the new version. On internet explorer 8 its breaking the html on the theme. So down graded back to the previous version. Please let me know if you experience the same on IE 8.
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 found the problem.. I had to fix something on one om my theme’s template. No bug on your end.
Hi ! Great plugin, very useful – thanks.
Is it possible to make a stacked-bar (or column) chart?
Cheers,
Andrew
Yes. Let me look into adding some new chart types in the next release (Ill include stacked).
Hi,
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)?
You mean semaneulav? Yes, I know what you mean. Ill look into it. The goal was that you could change the chart types at any time with no side effects, so if I screwed up line Ill fix it 🙂
‘semaneulav’ LOL:)
Whoa! That was a quick response, thanks!
If you could push me in the right direction about where to find this in the source exactly, maybe I can handle it quickly for myself until the fix.
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]);
I THINK this will do what you want for a short-term fix.
Is this comment in reply to my recent report of an error?
What I said:
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.
When you go to ‘Show/Hide Table Data, everything is correct.
Rebecca: no, it was a reply to my question a little above yours. My problem is exactly the same as yours and I asked for a little help on how I can fix it for myself.
It didn’t worked, but I do have a starting point while I’m waiting for an official fix:)
It wasn’t that line, but I think I found it!
This one in the same file:
var chartValueNames = “|” + this.constructList(tempString, “,”, “|”,0, true);
If I change the last parameter to flase, then the order is OK again. Though I don’t know exactly what that boolean controls:)
FErki, yes thats where the problem is. When I merged the common code for all of the chart types I forgot a distinction between vertical and horizontal variations… and it boils down to that bool.
0.8.2 has been submitted. May take a few hours to bubble through your wordpress notification.
Oh and not sure why my reply went under Mario’s comment… It seems if I use wordpress’ quick reply in the admin panel it is flakey.
There now a forum for this plugin:
http://www.dyerware.com/main/forum/easy-chart-builder
Just use the login account you made with this site
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.
When you go to ‘Show/Hide Table Data, everything is correct.
I’m locking the comments and have created a forum:
http://www.dyerware.com/forum
This should be much easier to follow all the ideas.
[…] Dazu gibt es auch eine relativ ausführliche Anleitung. […]
[…] out the plugin homepage for detailed review on easy chart […]
[…] Easy Chart Building Plugin documentation is well written, well laid out, clean and easy to […]