Responsive, Real-Time Graphs in WordPress: Finishing Touches

Justyn Hornor
This entry is part 6 of 6 in the series Build Responsive, Real-Time Graphs in WordPress

Build Responsive, Real-Time Graphs in WordPress

In this final part of the series on real-time graphs in WordPress, I’m going to get into the nitty-gritty of styling your Flot graphs. I couldn’t stand the idea of handing you an ugly baby! I just didn’t have it in me.

So we’re going to look at how to get the most out of the Flot tools and dive into how to get your Flot charts branded and looking exactly like you want them.

Disclaimer: There are a million things different with your WordPress site when compared to mine. You may want to test the look and feel of your Flot charts on a test server, because all it takes is one forgotten semi-colon and the charts will disappear. So start by backing up your system once it works — make some changes — back it up again, etc.

With that little admonition plainly stated, let’s get into the fun stuff!

The Flot Library

The Flot tools are fairly robust. You can change just about every element of the charts and diagrams. So, if you have a well-defined brand with a specific set of colors and shapes, you’ll be able to get your charts and graphs looking rock solid.

Flot breaks each of the data series up, so each can be individually controlled in terms of colors and shapes. You can change the background color, use gradients, and control where you want the legend to show up, if at all. Even the gridlines themselves can be customized. So, let’s jump into the details of a few of these features so you can see for yourself.

Data Series

Let’s look at how we can control our pushups data series first, and we’ll build on that. Here is one way to control the way the data series looks:

  • Label: string. Put the label you want for the data series in quotes
  • Lines: these have several attributes. Start with an open bracket and finish with a close bracket, like CSS.
    • show: boolean (true/false) – if you want the lines to show up between the points, set this to true, false if you want to hide the lines
    • lineWidth: number. The number “5” is equal to 5px, as an example. No quotes.
    • fill: boolean (true/false)
    • fillColor: string. Can be hex or RGB or even RGBA. Use quotes: “#f000″
  • Points: have several attributes
    • Radius: number. The number “5” is equal to 5px, as an example. No quotes.
    • fill: boolean (true/false)
    • fillColor: string. Can be hex or RGB or even RGBA. Use quotes: “#f000″
  • Bars: have several attributes
    • barWidth: number. In converted time or pixels. No quotes
      • Example 1: Data is by day, so barWidth: 60*60*24*1000. This is because the date is in Unix Timestamp.
      • Example 2: Data that is not in date/time format needs to be a number in pixels = barWidth: 5, equals 5px
    • align: “left”, “right” or “center”. Relative to the X axis
    • horizontal: boolean (true/false), default is false
    • fill: boolean (true/false)
    • fillColor: string. Can be hex or RGB or even RGBA. Use quotes: “#f000″

Colors for Series and Labels

It seemed counter-intuitive at first, but I actually like how Flot assigns color to a series. Instead of defining the color within the lines or bars data, you assign it as part of an options argument that applies to the graph as a whole. What happens is that when you define the color of a series, all connected elements get the same color. In other words, when you give a line a label, the label box automatically gets the same color as well.

If you had three series of data, you would assign them like this:

colors: ["#f7941e","#2935A","#15AF5C"]

The colors get buggy when you try to use RGBA, so stick with hex numbers for your colors.

Grid Colors

The grid is highly customizable. There are nearly two dozen attributes, but here are the ones that most people will want. The documentation lists all of them:

  • show: boolean (true/false)
  • color: color. Gridlines. Stick with hex as RGB and RGBA get buggy
  • backgroundColor: color/gradient. Gradients are defined by multiple colors:
    • [color1, color2]
    • You can also list the level of opacity (alpha) with a separate group

Legend Formatting

I use a CSS doc to define several elements within my Flot charts, and the legend is one that is absolutely necessary to do so. In your CSS document (layout.css in my resources), make sure you include the following

.legend table {width: auto;}

This will make sure all your other formatting works. It’s a bug in Flot and this is the simple fix.

You have about 20 options you can tweak with the legend, but the biggest thing to observe here is that the format is different for legends. There’s only the open and close brackets, but each attribute is only separated by commas:

  • show: boolean (true/false)
  • labelBoxBorderColor: color. Stick with hex colors.
  • position: ‘ne’ or ‘nw’ or ‘se’ or ‘sw’. Make sure to include the quotes.
  • margin: number of pixels
  • backgroundColor: null or color. Null means it autodetects.
  • backgroundOpacity: number between 0 and 1. Default is .85.

A sample would look like this:


legend:
{

show: true,
position: 'nw',
margin: 15,

}

If you're hardcoding using PHP, you'll need to escape the single quotes if you're using the position attribute:

1

echo 'legend: {position: 'nw',}';

The legends are buggy in Flot. If you find that you’re code isn’t having an affect, you can go straight into the jquery.flot.js file and do a CTRL+F for “legend”. You’ll see all the default values here. It’s totally a hack, but it gets the job done.

Sample Finished Chart

Here’s what mine looks like with minimal coding:

And here’s the JavaScript that you can use for testing purposes:

jQuery(document).ready(function($){
var d1 = [
[1351753200000,31],[1351839600000,33],[1351926000000,43],[1352012400000,54],
[1352098800000,65],[1352185200000,66],[1352271600000,43],[1352358000000,37],
[1352444400000,50],[1352530800000,54],[1352617200000,52],[1352703600000,67],
[1352790000000,75],[1352876400000,72],[1352962800000,75],[1353049200000,78]
];
var d2 = [
[1351753200000,14],[1351839600000,21],[1351926000000,53],[1352012400000,64],
[1352098800000,75],[1352185200000,86],[1352271600000,93],[1352358000000,77],
[1352444400000,65],[1352530800000,51],[1352617200000,48],[1352703600000,44],
[1352790000000,40],[1352876400000,44],[1352962800000,45],[1353049200000,58]
];
var placeholder = $("#placeholder");
var plot = $.plot(placeholder,
[
{
data: d1,
label: "Justyn Pushups",
bars: {
barWidth: 60*60*24*600,
show: true,
align: "center",
},
points: {
show: true,
fill: true,
fillColor: "#ccc",
radius: 5,
},

},
{
data: d2,
label: "Tara Pushups",
lines: {
show: true,
fill: true,
fillColor: "rgba(141, 141, 141, .5)",
lineWidth: 5,
},
points: {
show: true,
fill: true,
fillColor: "#ccc",
radius: 5,
},
}
],
{
xaxis:
{ mode: "time" },
colors:
["#f7941e", "#1db5cb"],
grid:
{
backgroundColor: {colors: ["#ffffff","#c0c0c0"]},
colors: ["#666"],
},
legend:
{
show: true,
position: 'nw',
margin: 15,
},
}

);

}
);

If using in PHP, just wrap the above code like this:


echo '

//all the above code here

';

Critical Tip:

I recommend making very small changes to layout and formatting. The entire chart will disappear on you with one malformed statement. And, with each attribute often having its own syntax, it’s really easy to break your charts.

Other Points

You have lots of different kinds of graphs and charts available: line, pie, and bar. The Pie charts need their own tutorial because there are lots of ways to use them. The example file included with the documentation is really good for showing how to format pie charts.

The best way to really get in there and learn is to look at the big list of example files included in the documentation. They have just about everything, but it’s hard to follow without this primer.

Show off your work! I really want to see lots of big, lovely charts! We have so much data at our disposal and in the past it’s been difficult to display. I hope to see this system take hold as a standard so we can all build on it and create a community around Flot.

Build Responsive, Real-Time Graphs in WordPress

<< Responsive, Real-Time Graphs in WordPress: Dealing with Data

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

No Reader comments

Comments on this post are closed.