Converting tables into graphs (Advanced)

Exclusive offer: get 50% off this eBook here
Instant HTML5 Responsive Table Design How-to [Instant]

Instant HTML5 Responsive Table Design How-to [Instant] — Save 50%

Present your data everywhere on any device using responsive design techniques with this book and ebook

£7.99    £4.00
by Fernando Monteiro | May 2013 | Open Source

Another alternative much discussed by the community of developers is transforming the table into a graphic when it is being displayed on small screen devices. This is not an easy task taking into account the size and amount of data that a table can have.

Let's see an alternative solution combining the previous recipes with another plugin for rendering graphics. The main reason for this combination is we use only one plugin per page, thus optimizing our load.

This article by Fernando Monteiro, the author of the book, Instant HTML5 Responsive Table Design How-to explains what happens when we convert the data and display a nice graphic for our users using a properly formatted table.

(For more resources related to this topic, see here.)

Getting ready

We maintained the same structure for our table, however this time we do not use this example and load it via AJAX. So the markup looks as follows:

<table id="dynamicTable" class="table"> <thead> <tr> <th>Reviews</th> <th>Top</th> <th>Rolling Stones</th> <th>Rock Hard</th> <th>Kerrang</th> </tr> </thead> <tbody> <tr> <th>Ac/Dc</th> <td>10</td> <td>9</td> <td>8</td> <td>9</td> </tr> <tr> <th>Queen</th> <td>9</td> <td>6</td> <td>8</td> <td>5</td> </tr> <tr> <th>Whitesnake</th> <td>8</td> <td>9</td> <td>8</td> <td>6</td> </tr> <tr> <th>Deep Purple</th> <td>10</td> <td>6</td> <td>9</td> <td>8</td> </tr> <tr> <th>Black Sabbath</th> <td>10</td> <td>5</td> <td>7</td> <td>8</td> </tr> </tbody> </table>

How to do it...

Let's see what we need to do:

  1. Add a div right on the top of our table with an ID called graph:

    <div id="graph"></div>

  2. We will use a jQuery Plugin called Highcharts, which can be downloaded for free from http://www.highcharts.com/products/highcharts.

  3. Add the following script to the bottom of our document:

    <script src = "highcharts.js"></script>

  4. Add a simple script to initialize the graph as follows:

    var chart; Highcharts.visualize = function(table, options) { // the data series options.series = []; var l= options.series.length; options.series[l] = { name: $('thead th:eq('+(l+1)+')', table).text(), data: [] }; $('tbody tr', table).each( function(i) { var tr = this; var th = $('th', tr).text(); var td = parseFloat($('td', tr).text()); options.series[0].data.push({name:th,y:td}); }); chart = new Highcharts.Chart(options); } // On document ready, call visualize on the datatable. $(document).ready(function() { var table = document.getElementById('dynamicTable'), options = { chart: { renderTo: 'graph', defaultSeriesType: 'pie' }, title: { text: 'Review Notes from Metal Mags' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true } }, tooltip: { pointFormat: 'Total: <b>{point.percentage}%</ b>', percentageDecimals: 1 } }; Highcharts.visualize(table, options); });

    Many people choose to hide the div with the table in smaller devices and show only the graph.

    Once they've optimized our table and depending on the amount of data, there is no problem. It also shows that the choice is yours.

  5. Now when we look at the browser, we can view both the table and the graph as shown in the following screenshot:

Browser screenshot at 320px.

Highcharts plugins have an excellent quality in all browsers and works with SVG, they are compatible with iPad, iPhone, and IE 6.

How it works...

The plugin can generate the table using only a single data array, but by our intuition and step-by-step description of its uses, we have created the following code to generate the graph starting from a table previously created.

We create the graph using the id#= dynamicTable function, where we read its contents through the following function:

$('tbody tr', table).each( function(i) { var tr = this; var th = $('th', tr).text(); var td = parseFloat($('td', tr).text()); options.series[0].data.push({name:th,y:td}); });

In the plugin settings, we set the div graph to receive the graph after it is rendered by the script. We also add a pie type and a title for our graph.

options = { chart: { renderTo: 'graph', defaultSeriesType: 'pie' }, title: { text: 'Review Notes from Metal Mags' },

There's more...

We can hide the table using media query so that only the graph appears. Remember that it just hides the fact and does not prevent it from being loaded by the browser; however we still need it to build the graph.

For this, just apply display none to the table inside the breakpoint:

@media only screen and (max-width: 768px) { .table { display: none; } }

Browser screenshot at 320px, without the table

Merging data – numbers and text (Advanced)

We introduce an alternative based on CSS3 for dealing with tables containing text and numbers.

Getting ready

Tables are used for different purposes, we will see an example where our data is not a data table. (Code Example: Chapter07_Codes_1 )

Browser screenshot at 1024px

Although our table did not have many columns, showing it on a small screen is not easy. Hence we will progressively show the change in the table by subtracting the width of the screen.

How to do it...

Note that we have removed the .table class so this time apply the style directly in the table tags, see the following steps:

  1. Let's use a simple table structure as we saw before.

  2. Add some CSS3 to make some magic with our selectors.

  3. Set our breakpoints to two sizes.

    <table> <thead> <tr> <th>CONTACT</th> <th scope="col">Manager</th> <th scope="col">Label</th> <th scope="col">Phone</th> </tr> </thead> <tbody> <tr> <th scope="row">Black Sabbath</th> <td>Richard Both</td> <td>Atlantic</td> <td>+1 (408) 257-1500 </td> </tr> <tr> <th scope="row">Ac/DC</th> <td>Paolla Matazo</td> <td>Sony</td> <td>+1 (302) 236-0800</td> </tr> <tr> <th scope="row">Queen</th> <td>Suzane Yeld</td> <td>Warner</td> <td>+1 (103) 222-6754</td> </tr> <tr> <th scope="row">Whitesnake</th> <td>Paul S. Senne</td> <td>Vertigo</td> <td>+1 (456) 233-1243</td> </tr> <tr> <th scope="row">Deep Purple</th> <td>Ian Friedman</td> <td>CosaNostra</td> <td>+1 (200) 255-0066</td> </tr> </tbody> </table>

  4. Applying the style as follows:

    table { width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; background-color: #fff } th { text-align: left; } td:last-child, th:last-child { text-align:right; } td, th { padding: 6px 12px; } tr:nth-child(odd), tr:nth-child(odd) { background: #f3f3f3; } tr:nth-child(even) { background: #ebebeb; } thead tr:first-child, thead tr:first-child { background: #000; color:white; } table td:empty { background:white; }

  5. We use CSS3 pseudo-selectors here again to help in the transformation of the table. And the most important part, the Media Queries breakpoints:

    @media (max-width: 768px) { tr :nth-child(3) {display: none;} } @media (max-width: 480px) { thead tr:first-child {display: none;} th {display: block} td {display: inline!important;} }

  6. When the resolution is set to 768px, we note that the penultimate column is removed.

    This way we keep the most relevant information on the screen. We have hidden the information less relevant to the subject. And when we decrease further, we have the data distributed as a block.

Summary

In this article, we saw an alternative solution combining the previous recipes with another plugin for rendering graphics.

Resources for Article :


Further resources on this subject:


Instant HTML5 Responsive Table Design How-to [Instant] Present your data everywhere on any device using responsive design techniques with this book and ebook
Published: April 2013
eBook Price: £7.99
See more
Select your format and quantity:

About the Author :


Fernando Monteiro

Fernando Monteiro is a front end developer, speaker and the mind behind the ResponsiveBolierplate, a micro framework for responsive layouts.He contributes several articles and materials on his blog and for the entire community, on web design and development.

He is passionate about web standards, semantics, and mobile design.

He began his career as a graphic designer in 2004 and quickly became an expert in QuarkXPress, producing and editing more than 500 ads for different companies in different magazines.

He has worked as a manager of e-commerce and UX designer for various companies and products, including mobile applications. Since 2009 he has worked full time as a frontend developer; his spare time is dedicated to open source projects and freelance jobs.

Books From Packt


HTML5 and CSS3 Transition, Transformation and Animation
HTML5 and CSS3 Transition, Transformation and Animation

 Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

 HTML5 and CSS3 Responsive Web Design Cookbook
HTML5 and CSS3 Responsive Web Design Cookbook

HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook

 Responsive Web Design by Example
Responsive Web Design by Example

 HTML5 Boilerplate Web Development
HTML5 Boilerplate Web Development

 Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

 HTML5 Multimedia Development Cookbook
HTML5 Multimedia Development Cookbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software