Teochew Thunder: Web Tutorial: The Bar Chart (Part 1/2)

When you want to display data, there are quite a number of options available to you - bar graphs, pie graphs and line graphs, among others.

Bar graphs are meant for comparing numerical data between different groups, or progress over time, though it's fairly limited in the case of the latter. Today, we'll be creating an animated bar graph in HTML, CSS and JavaScript.

For data, we will be using statistics collected from Wikipedia, pertaining to the football club I support - Liverpool FC. We'll compare appearances and goals from six players across four seasons.

Let's get started!
Here's the HTML. We'll create placeholders for CSS and JavaScript.

<!DOCTYPE html>
<html>
    <head>
        <title>Bar Graph</title>

        <style>

        </style>

        <script>

        </script>
    </head>

    <body>

    </body>
</html>

Here, we have a temporary styling for div elements, giving them a nice orange outline. And we specify that the graph_container div is 500px in height. In the HTML, we have the graph_container div and two drop down lists with ids of ddlRow and ddlStat respectively.

<!DOCTYPE html>
<html>
    <head>
        <title>Bar Graph</title>

        <style>
            div {outline:1px solid #FFAA00;}

            #graph_container
            {
                height:500px;
            }
        </style>

        <script>

        </script>
    </head>

    <body>
        <div id="graph_container">

        </div>

        <select id="ddlRow">

        </select>

        <select id="ddlStat">

        </select>
    </body>
</html>

See the result!

Create two more divs within the graph_container div, and give them ids of scale_container and col_container respectively.

Style col_container and scale_container like so. scale_container is the placeholder for the scale of the bar graph while col_container holds the data. scale_container has only a 20px width and its height is 80% of graph_container. Its border at the bottom is a fine black line. col_container is just as tall as the graph_container div, and the width is set to 95% of graph_container's. Both of these divs have the float property set to left, so they align nicely left.

Take a look at it now. You have a nice thin column for the scale (with a black border on the bottom) and a larger space for your data.

All good? We'll be populating these placeholder divs soon. First, change your HTML.

Then add the populate() function.

The data

Before working on the populate() function, let's create the data. Here we define an object, graphdata, with three properties - cols, rows and stats. Each of these is an array.

Let's begin defining values for rows. These years represent the seasons which the datasets are for. Each season begins in the middle of the year, and ends in the middle of next year. But it's enough to just take the starting year.

            var graphdata =
            {
                "cols":[],
                "rows":[2007,2008,2009,2010],
                "stats":[]
            };

Now, we define what stats there are for any dataset. Namely, goals and appearances.

            var graphdata =
            {
                "cols":[],
                "rows":[2007,2008,2009,2010],
                "stats":["goals","appearances"]
            };

The next one is going to be huge. Each element in the cols array is an object. Each object has a property, title, and an array, stats. Here, the title for the first element is the name of one of Liverpool FC's most prolific strikers, ever.

            var graphdata =
            {
                "cols":
                [
                    {
                        "title":"Fernando Torres",
                        "stats":[]
                    },
                ],
                "rows":[2007,2008,2009,2010],
                "stats":["goals","appearances"]
            };

Now, add the stats. Each element in the stats array is, in turn, another object with the properties year, goals and appearances. Boy, this guy really did score a lot of goals, didn't he?!

Add the other players in the cols array.

            var graphdata =
            {
                "cols":
                [
                    {
                        "title":"Fernando Torres",
                        "stats":
                        [
                            {"year":2007,"goals":24,"appearances":33},
                            {"year":2008,"goals":14,"appearances":24},
                            {"year":2009,"goals":18,"appearances":22},
                            {"year":2010,"goals":9,"appearances":23},
                        ]
                    },
                    {
                        "title":"Steven Gerrard",
                        "stats":
                        [
                            {"year":2007,"goals":11,"appearances":36},
                            {"year":2008,"goals":16,"appearances":34},
                            {"year":2009,"goals":9,"appearances":31},
                            {"year":2010,"goals":4,"appearances":33},
                        ]
                    },
                    {
                        "title":"Dirk Kuyt",
                        "stats":
                        [
                            {"year":2007,"goals":3,"appearances":34},
                            {"year":2008,"goals":12,"appearances":32},
                            {"year":2009,"goals":9,"appearances":38},
                            {"year":2010,"goals":13,"appearances":37},
                        ]
                    },
                    {
                        "title":"Ryan Babel",
                        "stats":
                        [
                            {"year":2007,"goals":4,"appearances":30},
                            {"year":2008,"goals":3,"appearances":27},
                            {"year":2009,"goals":4,"appearances":25},
                            {"year":2010,"goals":1,"appearances":1},
                        ]
                    },
                    {
                        "title":"Yossi Benayoun",
                        "stats":
                        [
                            {"year":2007,"goals":4,"appearances":30},
                            {"year":2008,"goals":8,"appearances":32},
                            {"year":2009,"goals":6,"appearances":30},
                        ]
                    },
                    {
                        "title":"David N'gog",
                        "stats":
                        [
                            {"year":2008,"goals":2,"appearances":14},
                            {"year":2009,"goals":5,"appearances":24},
                            {"year":2010,"goals":2,"appearances":25},
                        ]
                    },
                ],
                "rows":[2007,2008,2009,2010],
                "stats":["goals","appearances"]
            };

Let's hammer this into shape!

Add this to the populate() function. There are some undefined variables, and there's the variable graph, which we will peg to the div col_container.

            function populate()
            {
                var col, container, label, fill, p;
                var graph = document.getElementById("col_container");
            }

Now do this. Create a For loop that iterates across the cols array of the graphdata object.

Then, within the loop, create a div element and use the variable col to store that object. Then set the class of that object to col_section. And append that object to graph.

Modify your CSS. Add the col_section CSS class. The width will be 100px but the height will be 100% of its parent. Don't mix the two up! And of course, the float property of this is left, to properly align everything.

Run your code. You'll see 6 columns have been added inside the col_container div! One for each footballer we added in the graphdata object!

We're going to do more now. We'll create a div element, set it to the variable container and set the class to data_container, then append container within col before appending col within graph.

And then we'll add more styling, this time the data_container CSS class. The margin properties ensure that it will be centered within its parent, and only occupy 80% height and width. The background property is set to transparent explicitly, just in case.

Now you see that within the columns is a smaller column!

Now we're going to do the same with the fill variable, setting the class to data_fill. But before appending it within container, we will create a paragraph element and set it to the variable p. Then we'll append p within fill before appending fill within container. We'll give each of these elements an id as well.

Now we add the CSS styles data_fill and value_label.

data_fill is meant for styling the visual representation of the bars. It will fill 100% of the height and width of its parent. I've set the background color to red.

value_label is meant for styling the numerical data. I've set the color to white. The rest of it is cosmetic styling of the font, which you can alter without affecting functionality (much).

You can see that the data columns are filled with red. Just as planned. You won't see the labels because we haven't given them any data. Yet.

Now add this! Create a div element, set it to the label variable with a class of data_label, and the innerHTML property to the title property of the graphdata array element you are currently accessing within the For loop. But instead of appending it within container, append it within col after container.

OK, now add the data_label CSS style. width is set to 100% and height to 20%. The margin property ensures that the div stays centered. The rest is font styling, so do as you please.

And there we have the names of the labels on the bottom! It's not nicely aligned yet, but we can take care of that later.

Now outside of the For loop, we have new code. Remember the drop-down lists? We're going to populate them with data. First, define two variables, ddl and option.

Now set the variable ddl to refer to the object ddlRow. And for each element in the rows array of the graphdata object, create an option and populate it, then add it to the drown-down list ddlRow. The text is slightly different from the value. That's because in football parlance, as previously mentioned, each season starts in the middle of the year and ends in the middle of next year. So a season that started in 2008 would be more appropriately known as "Season 2008/2009".

Take a gander!

Now do the same for ddlStat...

                var ddl,option;

                ddl = document.getElementById("ddlRow");

                for (var i=0;i<graphdata.rows.length;i++)
                {
                    option = document.createElement("option");
                    option.text = graphdata.rows[i] + " - " + (parseInt(graphdata.rows[i])+1);
                    option.value = graphdata.rows[i];
                    ddl.add(option);
                }

                ddl = document.getElementById("ddlStat");

                for (var i=0;i<graphdata.stats.length;i++)
                {
                    option = document.createElement("option");
                    option.text = graphdata.stats[i];
                    option.value = graphdata.stats[i];
                    ddl.add(option);
                }

And both your drop-down lists are populated!

That won't do anything for us right now of course. We'll need a data scale. Let's start by defining a new function, displayData(), and calling it at the end of populate().

Start by grabbing the selected values from the ddlRow and ddlStat drop-down lists. Then run the values through the getMaxStatistic() function and use the result in the displayScale() function. We'll, of course, have to create those functions.

We'll work on the getMaxStatistic() function next. First, define a variable max with a value of 1. Then declare the variable temp.

            function getMaxStatistic(row,stat)
            {
                var max=1;
                var temp;
            }

Next, iterate through the cols array of the graphdata object using a For loop. Within it, process the stats array of the current element of the cols array using the filter() method to match the year property with that of the row parameter of the getMaxStatistic() function. This means that if "2008" is selected, all elements with the year for "2008" will be returned in an array. That array is set to the variable temp.

If temp is an empty array, that means no data for the year was found, which is a possibility. If not, there should be only one row. Grab the first (and only) element in the temp array with the statistic defined by the stat parameter of the getMaxStatistic() function. If it's more than max, set max to that value.

Finally, we conduct a Modulus test. If max is divisible by 10, return max with 10 added. If not, deduct the remainder so that max is divisible by 10, then return max with 10 added.

Now for the displayScale() function! We passed the maximum statistic of the dataset through this function, remember? Here, we grab the graph_scale element and set it to the variable scale. We set the innerHTML property to a blank value to clear the contents of scale.

Next, we define two new variables, units and data_unit. units is the value passed into this function (which is the maximum value of the dataset) divided by 10.

            function displayScale(maxval)
            {
                var scale = document.getElementById("scale_container");
                scale.innerHTML="";

                var units = maxval/10;
                var data_unit;
            }

Now we're going to work backwards, because on a scale, the top number is displayed first. So our For loop starts from units and works its way down to 1, decrementally.

Here, we set data_unit to a created div element, then set its class to scale_unit. Its height is defined by a percentage of its parent. We determine the percentage by dividing 100 by units. Finally, the div is labelled with the value of (i x 10), which means the scale is always in intervals of 10. Then we append the created div within scale.

            function displayScale(maxval)
            {
                var scale = document.getElementById("scale_container");
                scale.innerHTML="";

                var units = maxval/10;
                var data_unit;

                for (var i=units;i>=1;i--)
                {
                    data_unit = document.createElement("div");
                    data_unit.className = "scale_unit";
                    data_unit.style.height = (100/units) + "%";
                    data_unit.innerHTML = i * 10;

                    scale.appendChild(data_unit);
                }
            }

Here's the styling for the CSS class scale_unit. The width is 100% of its parent, and the border for the top and left edges are set to a thin black line. The rest is all cosmetic.

            #scale_container
            {
                height:80%;
                width:20px;
                float:left;
                border-bottom:1px solid #000000;
            }

            .scale_unit
            {
                width:100%;
                border-top:1px solid #000000;
                border-left:1px solid #000000;
                color:#FF0000;
                text-align:right;
                font-weight:bold;
                font-family:verdana;
                font-size:0.5em;
            }

Aaaaand you have a scale!

This is a bit messy, so just change the code here.

div {outline:0px solid #FFAA00;}

Nice. Still a bit messy, but it works. We have a placeholder for all the data we're about to manipulate!

Editor's Note: The dataset for Fernando Torres was found to be incorrect, and later, edited accordingly. As such, some of the screenshots are also incorrect.

Altering the display to fit the data.

Teochew Thunder

Pages

Sunday, 4 June 2017

Web Tutorial: The Bar Chart (Part 1/2)

The data

Let's hammer this into shape!

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews