7 min read

(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:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here