Tabular data and graphs

This post is content previously published on www.cathmhaol.com

I often rail about complexity. Increasing complexity is, in my opinion, one of the most dangerous by-products of the increase in technology. Years ago, for example, a person with a decent set of tools and a basic understanding of the internal combustion engine could easily repair an automobile - a task that now practically requires complex machinery in addition to hours of training and specialized tools. Are automobiles better than they were years ago? That depends on the criteria you measure in drawing such subjective conclusions.

In web technology, we moved from static pages to dynamic - which at the beginning were still relatively simple using the same basic mechanism as sed to generate dynamic content - and we've now moved further still with backbone, node, require, jquery, and dust. Are web pages better? That depends on the criteria you measure in drawing such subjective conclusions. Are we improving the experience for the developer at the expense of the user? Honestly, sometimes we are - because some things are horribly complex.

That brings us to today's installment - tabular data and graphs.

One of the activities you will eventually undertake is the presentment of tabular data. This is relatively simple because we're all familiar with rows and columns of information, but let's think about it at a little deeper level, because not everyone understands data in the same way. In this instance, it may benefit the user to increase the complexity to a degree to increase understanding by presenting the data in a visual manner rather than just as text - of course it also helps to add an explanation of the data, and there again we have a little help.

Here's how to quickly and easily add graphing to your page.

Let's say you have a table of periodic sales data in four regions (North, South, East, and West). You can easily mark this up as

<table id="quarterly-sales">
  <caption>
    Monthly Sales by Region
    <details>
      <summary>The number of units sold categorized by quarters and grouped into regional series</summary>
      <p>The sales numbers in each row represent a region's quarterly performance, with each column in the row representing a quarter. All numbers demonstrate an increase in year-over-year totals and we are very encouraged by the degree of growth shown in all for regions.</p>
    </details>
  </caption>
  <tr>
    <th>Sales Region</th><th>Q1</th><th>Q2</th><th>Q3</th><th>Q4</th>
  </tr>
  <tr>
    <td>North</td><td>100</td><td>150</td><td>100</td><td>150</td>
  </tr>
  <tr>
    <td>South</td><td>75</td><td>80</td><td>90</td><td>100</td>
  </tr>
  <tr>
    <td>East</td><td>100</td><td>150</td><td>150</td><td>100</td>
  </tr>   <tr>
    <td>West</td><td>100</td><td>75</td><td>100</td><td>150</td>
  </tr>
</table>

By clearly describing the table in the details and summary tags (new in HTML5), we can make the table more accessible. Of course we may want to use a CSS rule to clip those two tags so that they're not generally displayed, but that's generally a matter of preference.

Although we want to display this data as a graph, that presents a few challenges. For example, we have to determine if the series in rows or columns - in this example, if the regions are the four series we need to graph or are the quarters the series. Once you have the orientation established, it's a relatively simple matter to see the data as a set of series. Unfortunately, there isn't a way to make this distinction in HTML or CSS. Of course since we'll be using JavaScript to graph the data it doesn't really matter that we're handing this outside of those two languages anyway.

At this point, I'm going to include the JavaScript that will graph the table by taking the orientation and label indexes and converting the table into a collection of series that can be graphed¹. Since I want the series to be in rows, I'm going to pass "true" in the parameter that identifies if series are in table rows (as opposed to columns), and since the first row and first column are labels, I'm going to pass 0 in the parameters for the category label and the series label. I'm also going to add a canvas element to be used when rendering the graph.

<canvas height="540" id="sales-chart" height="540"></canvas>
<script src="http://js.cathmhaol.com/cjl-dataset.js"></script>
<script>
var dataset = new Cathmhaol.DatasetFromTable("sales", true, 0, 0);
</script>

Once that's complete, it's just a matter of invoking the chart² and rendering it.³

<script>
var dataset = new Cathmhaol.DatasetFromTables("sales", true, 0, 0), lineChart = new dataset.Chart("sales-chart", "line");
lineChart.render();
</script>

Once all that's done, we should have a chart that looks something like this -

Monthly Sales by Region

The number of units sold categorized by quarters and grouped into regional series

The sales numbers in each row represent a region's quarterly performance, with each column in the row representing a quarter. All numbers demonstrate an increase in year-over-year totals and we are very encouraged by the degree of growth shown in all for regions.

Sales Region	Q1	Q2	Q3	Q4
North	100	150	100	150
South	75	80	90	100
East	100	150	150	100
West	100	75	100	150

Notes - links open in a new window

1. Cathmhaol.Dataset Cathmhaol.DatasetFromTable(string|HTMLElement table, boolean dataInRows, integer categoryLabelIndex, integer seriesLabelIndex)
2. Cathmhaol.Chart [Cathmhaol.Dataset].Chart(string|HTMLElement canvas, string {bar|line|pie})
3. [Cathmhaol.Chart].render(string series)