- Written by Joe Palmer
- Category: Extension of the Month
It's been a long while since I've come across an extension that had impressed me so much with its ease and flexibility. You often find one compromises the other but Plotalot offers them both! You will need to write some MySQL but Plotalot couldn't make easier and it's a rewarding way to learn if you would like to gain some experience. I plan to take you through setting up some simple graphs and then give you some tips on more advanced features I managed to achieve.
With many great extensions, the first version on Plotalot was released back in the Mambo days and had been continuously updated through the Joomla versions. The JED listing gives some outstanding reviews and the developer supports many different extensions. I have had several email exchanges with the developer who has responded quickly and helpfully. These are all great reasons for choosing Plotalot for your graphing needs.
One you have decided what data you want to represent graphically, the first thing to look at is some examples of finished graphs to decide what you're aiming for. Plotalot takes the data you provide and generates the required output to produce a Google Viz . Plotalot supports xx, xx, xx
The first graph I want to show you is the humble pie chart. This is one of the easiest to set up as you only need one series of data. For example, the following query shows the top 10 most popular articles as shown in the first Plotalot example:
However, sometimes the data you want to plot is not so easily available in the database so there are some nice MySQL tricks to return data in the required format. A particularly useful one is UNION which allow you to return data from multiple queries in one go. This is helpful if the data you want to access is not available in a single column.
Graphs have lots of configuration options which can be set with JavaScript using JSON. Plotalot provides parameters to set some of the common options like size and axis formats but these can be overridden and extended using the additional options box. For example, Google has a set of default colours which it gives each series of you don't define a colour. These usually work fine for most graphs but sometimes you want to define your own colours like red for bad and green for good. This can easily be done by setting options in the following format:
Note that the series ids refer to the order of your plots in Plotalot and start counting at 0. I like the default colours Google assigns but often want them applied in a different order. One thing that isn't in the Google documentation is the default colours that are used but I found a post listing them. I have built a table below showing them so you can easily change the order but keep consistent colours:
Some other feature
Trend lines
One feature I needed was the ability to annotate a line graph with trend lines to show maximums, minimums and targets. There is no specific feature for this but I achieved the desired result by adding an additional plot for each trend line. This required selecting the minimum and maximum y-axis values from the same query as my main plot and joining then with UNION. I could then just hard code the value for the x-axis which produced a straight horizontal line between 2 points across the whole graph, exactly what I wanted. This is an example of that query:
Some of the data we collected from users could be entered in two different formats (e.g. centimetres or inches). The data is only stored in one format but we wanted to display both scales on the graph so the user could see the data in the format they were most comfortable with. Google supports multiple scales and I found a way to achieve this in Plotalot.
The trick here is to have an additional plot (which can just be a single point) in the alternative scale and assign that series to a new axis but there are some additional caveats that need dealing with. The first is that Google automatically chooses an appropriate minimum and maximum value for both axes (aligned to a level of precision you have defined for the axis) which results in the 2 scale not accurately lining up with the required conversion. This can be solved by manually defining the minimums and maximums for both scales as exact conversions which works well but can still produce points that are a pixel or 2 out. The solution to this is to set point colour of the alternative series as transparent, line thickness to 0 tooltips to none and scale lines to transparent so there is no trace of that series on the graph except for the additional scale. One final problem I encountered was when there was a point outside the scale I defined. Google automatically increased the scale of this is the case so we need to make sure it increases both scales. The best way I found to do this was to select the maximum and minimum converted x value points within the same y value range so outliers cause both scales to increase.
Stacked bar charts work really well for data that can be grouped into categories. We have built an alcohol tracker which allows users to enter the different types of drinks they had drunk on each day. This was perfectly suited for a stacked bar chart so I created a different plot for each type of drink we had in our database, like this:
This worked great but had one problem. The y axis on bar charts are simply labels and are not treated as values so the bars are not ordered by date like line graphs. Plotalot has an option to order the bars alphabetically but this only works if the dates are in the YYYY-MM-DD format. This isn't particularly user friendly and we really wanted to include the day of the week in the label as it helps users distinguish weekends from weekdays.
