Packt+ | Advance your knowledge in tech

You're reading from jQuery for Designers Beginner's Guide Second Edition

Product typeBook

Published inJul 2014

Reading LevelBeginner

Publisher

ISBN-139781783284535

Edition1st Edition

Languages

JavaScript

Tools

jQuery

Concepts

Web Design

Author (1)

Natalie Maclees

Chapter 10. Displaying Data Beautifully

While you might not consider displaying data to be all that exciting, it is often crucial to present large amounts of data to site visitors in a way that makes it easy for them to understand, explore, and interact with in new ways. Finding new and better ways to display data helps to communicate complex principles effectively. Allowing site visitors to interact with data enables them to make their own discoveries. As we are presented with more and more data everyday, the field of data visualization grows. Let's take a look at some simple things we can do when working with large amounts of data to make it easier for our site visitors to consume and understand.

In this chapter, we'll learn:

How to turn an ordinary table into an interactive data grid using the DataTables jQuery plugin by Allan Jardine
How to customize the appearance and behavior of the data grid using the jQuery UI ThemeRoller plugin
How to use the jQuery Visualize plugin to use tables...

A basic data grid

We'll get started by using the DataTables plugin to create a basic data grid, keeping the default settings and the styles provided with the data grid. Data grids are most helpful when we have large amounts of data to present, and the site visitors might want to filter and sort the data in different ways to find the information they are looking for. Think, for example, of a list of flights; one site visitor might be interested in sorting the flights by the departure time to find the earliest possible departure, while another site visitor might want to sort the flights by duration of the flight to find the shortest possible flight. Presenting the data in an interactive data grid allows each site visitor to quickly and easily find just the information they're looking for in a sea of information. For site visitors with JavaScript disabled, they'll simply see a large table of data and will never know that they're missing out on the interactive features. All of the information...

Time for action – creating a basic data grid

Let's take a look at how to turn a basic HTML table into an interactive data grid, as follows:

We'll get started as usual with our basic HTML file and associated files and folders, just like we did in Chapter 1, Designer, Meet jQuery. We'll fill the <body> element of our HTML document with the HTML markup for a large table of data. The DataTables plugin requires us to be careful and correct with our table markup, otherwise the DataTables features may not work as expected. We'll need to ensure that we use a <thead> element for the table's header, and a <tbody> element for the table's body. A <tfoot> element for the table's footer is optional. The following code is an abbreviated sample of the HTML markup for a table of the all-time best-selling books:
```
<table id="book-grid">
  <thead>
    <tr>
      <th>Title</th>
      <th>Author(s)</th>
      <th>Original Language</th>...
```

A customized data grid

The DataTables plugin is the first plugin we've used that has support for the jQuery UI ThemeRoller plugin. jQuery UI is a collection of widgets and interactions that make building complex applications easier and faster. Learning jQuery UI itself is beyond the scope of this book, but we'll take a look at how to use the jQuery UI ThemeRoller to create a custom theme for our data table. This same theme would apply to any jQuery UI widgets used on our page, as well as any jQuery plugins being used that include support for the jQuery UI ThemeRoller.

Time for action – customizing the data grid

We'll pick up right from where we left off with our data table. If you'd like to save your basic data grid example, just save a copy of the files we created. Then, perform the following steps to customize the appearance of your data grid:

Head over to http://jqueryui.com/themeroller where we'll take a look at the ThemeRoller plugin. Take a look at the following screenshot to see the page. In the left-hand side column, you'll find the controls for selecting a predefined theme or creating a custom theme, and the right-hand side wide column contains samples of several different types of widgets.
Click on the Gallery tab in the left-hand side column, and you'll see that you have dozens of choices of prebuilt ThemeRoller themes to choose from. As you click on different samples, you'll see the sample widgets in the right-hand side column update to reflect that style. I usually like to get started by selecting a prebuilt theme that's reasonably close to...

Showing graphs and charts

In some cases, a table is the ideal way of presenting a set of data. At other times, it would be more helpful to see that data visualized as a chart or a graph. Unfortunately, charts and graphs can be challenging to present in HTML. Without the help of JavaScript, we are stuck using static images to present graphs, which can then be difficult to update when the data changes.

This is when jQuery comes to the rescue. In this section, we'll take a look at using the Visualize plugin to turn tables of data into graphs and charts. The best part is that site visitors without JavaScript enabled will still have access to the data in the form of an HTML table, so nobody misses out on what we're trying to share. The data also remains accessible for those who visit our page and who might have visual impairment or other disabilities that would prevent them from consuming the data if it were presented in a static image.

Time for action – showing data in graphs and charts

Perform the following steps to create graphs and charts from HTML tables:

We'll get started as usual with our basic HTML file and associated files and folders, just like we did in Chapter 1, Designer, Meet jQuery. Inside the <body> element of the HTML document, we'll include a heading and a table with some numerical data, as follows:

<div class="content">
  <h1>A Mad Tea-Party</h1>
</div>


<table id="menu">
  <caption>Menu Items</caption>
  <thead>
    <tr>
      <td>Title</td>
      <th scope="col">Total Items</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Scones</th>
      <td>23</td>
    </tr>
    <tr>
      <th scope="row">Tea Sandwiches</th>
      <td>18</td>
    </tr>
    <tr>
      <th scope="row">Pastries</th>
      <td...

Time for action – creating a pie chart

We'll keep working with the files we set up in the previous section. Perform the following steps to create a pie chart with the Visualize plugin:

Inside the HTML file, add a second HTML table that contains some data, as shown in the following code:

<table id="eaten">
  <caption>Who had what?</caption>
  <thead>
    <tr>
      <td>&nbsp;</td>
      <th scope="col">Scones</th>
      <th scope="col">Tea Sandwiches</th>
      <th scope="col">Pastries</th>
      <th scope="col">Tea</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alice</th>
      <td>1</td>
      <td>3</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <th scope="row">Mad Hatter</th>
      <td>0</td>
      <td>6</td>
      <td>3<...

Time for action – calculating the ideal size for charts and graphs

We'll keep working with the files we created in the previous section. Perform the following steps to dynamically set the width and height of our charts and graphs according to the width of the browser window:

Open your scripts.js file. We'll want to add a few quick calculations. First up, let's set a preferred width for our graphs and charts, as follows:
```
$(document).ready(function(){
  var preferredWidth = 450;


  $('#menu').visualize({
    ...
  });

  $('#eaten').addClass('accessHide').visualize({
    ...
  }).appendTo('#pie-container').trigger('visualizeRefresh');

});
```
We created a variable named preferredWidth. Recall that a variable is just a container—in this case, the variable contains the size in pixels that we'd like our charts and graphs to appear by default.
Next, we need to get the actual width of the available content area on our page. As our CSS code is fluid, this will change depending on the width of the browser...

Summary

In this chapter, we learned how to turn an ordinary HTML table into an interactive data grid. Our site visitors can now take advantage of sorting different columns of the table to view the data in different ways. Site visitors with JavaScript disabled simply see an ordinary HTML table that contains all of the data. Data grids aren't terribly exciting, but they can make dealing with large amounts of data worlds easier for your site visitors. We also took a look at how to display numerical tabular data in charts and graphs, adding visual interest to our pages. Next up, we'll take a look at using scrolling effects in our pages, including parallax effects.

The rest of the chapter is locked

You have been reading a chapter from

jQuery for Designers Beginner's Guide Second Edition

Published in: Jul 2014Publisher: ISBN-13: 9781783284535

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

undefined

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $15.99/month. Cancel anytime

Author (1)

Natalie Maclees

contacted on 10 may '16 _______________ Natalie MacLees is the founder of Purple Pen Productions (purplepen.com), an interactive agency based in Los Angeles, California. She has been designing websites since 1997 and is a passionate advocate of both accessibility and usability. She loves teaching and sharing her knowledge, both in seminars and workshops and also with her clients. She discovered WordPress a few years ago as a flexible, extendable, and quick way to build robust websites that clients could manage on their own. She is the organizer of the Southern California WordPress Meetup Group. She is also a Google Analytics Qualified Individual.
Read more about Natalie Maclees

Personalised recommendations for you

Based on your interests and search pattern

Modernizing Drupal 10 Theme Development

Modernizing Drupal 10 Theme Development covers everything a frontend developer or a Drupal developer needs to know about the Drupal 10 theme layer. Using real-world examples, this book will help you to build up from an empty theme to a fast, responsive, maintainable, and accessible Drupal website in both monolithic and decoupled ways.

BookAug 2023360 pages4

Full Stack Development with Spring Boot 3 and React

Full Stack Development with Spring Boot 3 and React contains a wealth of practical guidance for picking up full stack development. The step-by-step exploration of everything from dependency injection, ORM with Hibernate, and JWTs to RESTful APIs, UI styling, and TypeScript will help you to develop the Spring Boot and React skills you need.

BookOct 2023454 pages5

Modern API Development with Spring 6 and Spring Boot 3

This practical guide teaches inexperienced Java programmers and web developers how to design, develop, test, and deploy highly scalable and maintainable APIs using REST, gRPC, GraphQL, and reactive programming paradigms with Java and Spring Boot. Complete with real-world examples, it will guide you to build enterprise-level APIs and services.

BookSep 2023494 pages1

Hands-On Web Scraping with Python

This book guides you to discover and extract quality data from the web using Python libraries such as requests, lxml, pyquery, scrapy, and to use effective scraping techniques. It’ll help you master the fundamentals and advanced concepts of web scraping and apply your skills to real-world data extraction tasks, with analysis and visualization.

BookOct 2023324 pages

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages4

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages3

Full Stack Web Development with Remix

Unlock the power of the web platform and cutting-edge technologies for your React applications using Remix to take advantage of the full stack to create a great user experience. This book is a complete resource covering the conventions, levers, and primitives of Remix and illustrates concepts through a real-world project.

BookNov 2023318 pages

Real-World Svelte

This book is a must-have guide to unlocking Svelte's true potential. You’ll learn about advanced component development, efficient coding, and powerful UI patterns using actions. With a focus on state management, custom stores, and renderless components, this book equips you to build exceptional web apps with lightning-fast performance.

BookDec 2023282 pages3

Building Micro Frontends with React 18

This book is a step-by-step guide to building production-grade, highly scalable, and performant web apps using multi-SPA and micro apps patterns, where you’ll learn to deal with complexities related to micro frontends. The book is a full life cycle guide to building, deploying, and managing micro frontends in a cloud-native environment.

BookOct 2023218 pages

Drupal 10 Masterclass

This all-in-one guide helps you get up and running with building Drupal applications using the latest Drupal 10 features. You’ll develop a complete practical understanding of Drupal frontend, backend, architecture, content management, themes, and modules to deliver a rich user experience by creating custom Drupal apps.

BookDec 2023310 pages

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages5

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages2