Jun 082012
 

We were working on a project that needed to visualize a population pyramid. We were already working with the Google Chart Tools and the therefore we tried to create a population pyramid with it.And after some trial & error we succeeded and you can see the result. Below is explanation how it’s done.

First we need some data, so let’s create some.

    var dataArray = [
                ['Age', 'Male', 'Female'],
                ['0-4 years',   106, -104],
                ['5-9 years',   91,  -86 ],
                ['10-14 years', 79,  -77 ],
                ['15-19 years', 68,  -64 ],
                ['20-24 years', 62,  -58 ],
                ['25-29 years', 56,  -53 ],
                ['30-34 years', 51,  -46 ],
                ['35-39 years', 48,  -41 ],
                ['40-44 years', 43,  -35 ],
                ['45-49 years', 39,  -30 ],
                ['50-54 years', 33,  -27 ],
                ['55-59 years', 32,  -25 ],
                ['60-64 years', 27,  -20 ],
                ['64-69 years', 19,  -16 ],
                ['70-74 years', 13,  -12 ],
                ['75-79 years', 8,   -7  ],
                ['80-84 years', 3,   -3  ],
                ['85-89 years', 1,   -1  ],
                ['90-94 years', 0,   0   ],
                ['95+ years',   0,   0   ]
           ];

Note that the ages for the second data column (Female) are negative. This will give a nice pyramid shape, with one column on the left side of the y-axis and the other one on the right side.

A population pyramid is a typical Google Barchart so we are going to use that one. We need to convert the array to a data table that can be used by the chart tool. Then we need to create the chart and draw it.

var data = google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

Drawing this results in an upside down pyramid, not quite what we wan but we are getting there.

First we need to stack the bars, so that they line up nice. We also need to put the chart upside down. Fortunately the API provides us with some options, so let’s use them.

    isStacked: true,        // stacks the bars
    vAxis: {               
        direction: -1       // reverses the chart upside down
    }

Rendering the image show we are almost there.

It’s close now, the only problem now is that the females show a negative number and there is no such thing as a negative number of females. Luckily it’s possible to format the text of the horizontal axis. Add the following in options:

hAxis: {
    format: ';'
}

And the result is a nice looking population pyramid with positive numbers on the left and right side of the y-axis. But on mouseover it still shows the negative numbers. We can fix this too with the same formatting principle. Just before drawing the chart, enter the following:

var formatter = new google.visualization.NumberFormat({
                pattern: ';'
            });
formatter.format(data, 2)

And now you have a complete population pyramid with the Google Chart Tool.

Below is the complete source code:

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(chart);
 
        function chart()
        {
            //var data = new google.visualization.DataTable();
 
            var dataArray = [
                ['Age', 'Male', 'Female'],
                ['0-4 years',   106, -104],
                ['5-9 years',   91,  -86 ],
                ['10-14 years', 79,  -77 ],
                ['15-19 years', 68,  -64 ],
                ['20-24 years', 62,  -58 ],
                ['25-29 years', 56,  -53 ],
                ['30-34 years', 51,  -46 ],
                ['35-39 years', 48,  -41 ],
                ['40-44 years', 43,  -35 ],
                ['45-49 years', 39,  -30 ],
                ['50-54 years', 33,  -27 ],
                ['55-59 years', 32,  -25 ],
                ['60-64 years', 27,  -20 ],
                ['64-69 years', 19,  -16 ],
                ['70-74 years', 13,  -12 ],
                ['75-79 years', 8,   -7  ],
                ['80-84 years', 3,   -3  ],
                ['85-89 years', 1,   -1  ],
                ['90-94 years', 0,   0   ],
                ['95+ years',   0,   0   ]
                    ];
 
            var data = google.visualization.arrayToDataTable(dataArray);
 
            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
 
            var options = {
                isStacked: true,
                hAxis: {
                    format: ';'
                },
                vAxis: {
                    direction: -1
                }
            };
 
 
            var formatter = new google.visualization.NumberFormat({
                pattern: ';'
            });
 
            formatter.format(data, 2)
 
            chart.draw(data, options);
        }
 
    </script>
</head>
 
 
<div id="chart_div" style="width: 600px; height: 600px;"></div>
</body>
</html>
Mar 232012
 

If you want to create a graph and don’t want to use a commercial program, you’re looking for yEd. yEd is a desktop application for Windows, Linux or Mac. You can also download a Java version of the application.

With yEd creating diagrams is easy. There are several pre-defined palettes to chose from, icons, labels, figures and more. With these tools it’s possible to create great looking diagrams. There’s a gallery on the site, just have a look at it.

It’s possible to import SVG graphics to use with your diagrams, so what kind of diagram you can create sounds limitless. Just don’t try to import the micropores diagram, that one is a bit big.

Mar 122012
 

De Ontwikkelfabriek ontwikkelt niet alleen webapplicaties maar ontwerpt en bouwt ook websites. Deze websites zijn voorzien van een Content Management Systeem (CMS) waarmee de beheerder via een web-interface de inhoud van de websites aan kan passen. Er zijn “vele verschillende CMS systemen“http://www.cmsmatrix.org/ waarmee een website beheerd kan worden, zowel commerciéle als Open Source. Er zijn niet alleen CMS systemen voor ‘gewone’ websites, ook een e-commerce platform kan ontwikkeld worden mbv een CMS.

De voordelen van Open Source zijn:

  • Geen licentiekosten voor de gebruiker
  • Geen ontwikkelkosten
  • U kunt het pakket zo meenemen indien u dat wenst
  • Wordt door de community ontwikkeld, het pakket evolueert
  • Grote community
  • Goede kwaliteit

Er wordt wel eens gedacht dat Open Source software van mindere kwaliteit is dan commerciéle gesloten software. Als men echter kijkt hoeveel websites op het Open Source pakket Joomla draaien, zit het aantal al in de paar miljoen en misschien wel meer. Het Open Source pakket Drupal wordt geschat op 7 miljoen.

Ook voor e-commerce platforms zijn er diverse pakketten die gebruikt kunnen worden om uw webwinkel op te laten draaien, zonder maandelijkse licentie kosten. Enkele voorbeelden zijn:

Er zit altijd wel een pakket bij wat aan de eisen voldoet. Zo is Magento zeer uitgebreid en met de vele mogelijkheden kan er een zeer complexe webwinkel mee gebouwd worden.

Is er een simpele webwinkel nodig met niet al te veel poespas, dan is Open Cart bijvoorbeeld een uitkomst.

En mocht het niet aan de eisen voldoen, dan kan het desgewenst aangepast worden, aangezien het toch Open Source pakketten zijn.

Feb 162012
 

Grails has a lot of plugins that are useful and probably also a lot that are useless. But nonetheless, there are a lot.

Digging through all these plugins takes time and effort. And then there were lists. A useful tool to some up items and this time it’s Grails plugin time.

These are by far not the only plugins that are useful but it can be helpful. So here’s the list in alphabetic order.

Got any suggestions? Leave them in the comments and I will probably add them.

BIRT Report

Plugin to embed reports using the BIRT Report Engine into your grails application.

Build Test Data Plugin

With this plugin you can easily create test data by automatic inspection of the constraints. A value is automatically provided for the property, after inspection of the constraints.

CodeNarc

This plugin runs CodeNarc static analysis rules for the Groovy source

Web-based Groovy Console for Grails

If you want to interact at runtime with your application using a console, you gotta have this plugin.

Feeds Plugin

A nice plugin that renders RSS/Atom feeds or any other format supported by the ROME API. It also has support for iTunes compatible podcasts.

FilterPane Plugin

With this plugin you can add filtering capabilities to any Grails application.

Google Visualization API Plugin

A nice plugin that will render the Google Charts using taglibs using the Google Visualization API

Grails UI

Provides a rich UI environment using an extensive taglib library. It uses rich components based on the Yahoo! UI (YUI) javascript library extension called Bubbling Library.

JQuery for Grails

Just install this plugin and you have jQuery power at your hands. It will download and install the latest version of jQuery automatically.

Provides Mail support to a running Grails application

Sending mail with Grails has never been more easy than with this plugin.

Quartz Plugin

If you need to schedule a task, use this plugin.

Searchable Plugin

With this plugin you can add rich search functionality to Grails domain models.

ZKGrails: ZK plugin for Grails

Seamlessly integrate ZK with your Grails application.

Feb 142012
 

OpenCart is a great Open Source tool to build your own webshop. It’s fast, is simple and it’s default packed with a very nice design, not an ugly simple template. It’s much easier to maintain than a package like Magento. It doesn’t have all the options and advanced features Magento has but it’s a very good tool if you just want to sell not too complicated products. The best part, it’s free!

There are a lot of extensions for OpenCart, free and paid. Below is a list of extensions that will enhance the user experience on your OpenCart webshop.

Install VQMod

VQMod is a tool to extend the core of PHP programs without messing with the core itself. It uses XML to search and replace functionality and therefore overriding the core functionality. There is an OpenCart install script for VQMod and a lot of extensions use VQMod. Therefore it’s essential.

VQMod

The VQMod manager

What’s an extension without a manager. With this tool you can manage the installed VQMod scripts and disable/enable them on demand. It’s even possible to install, uninstall and delete the VQMod script.

VQMod Manager

VQMod ajax search

Ever wanted a neat Ajax search in OpenCart but were afraid to ask? Don’t ask anymore, there’s an extension for that. Just start typing in the search field and after three characters the magic begins. It best of all, it’s free and, according to the author of the extension, it will stay free.

Very simple AJAX

Carousel Shuffler / Randomizer

The default template of OpenCart is very nice and can be used as a template for your webshop. There’s a nice feature, a carousel of brands where you can scroll through. That looks nice. Too bad they are allways in the same order. It would be nice if the images could be randomized at every page load. I bet there’s an extension for that. And there is, it’s called Carousel Shuffler / Randomizer. This is another VQMod extension.

Carousel Shuffler / Randomizer