Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learning jqPlot

By : Scott Gottreu

5 (1)

Learning jqPlot

5 (1)

By: Scott Gottreu

Overview of this book

If you are a developer with a good understanding of JavaScript and jQuery and have been burdened with the task of analyzing and presenting some data, this book will provide you with the start you need to create some very attractive data visualizations.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Getting Started

1. Getting Started

Reviewing the components of a chart

Getting a promotion

Creating a jqPlot chart

Passing in both x and y values

Using dates for the x axis

Adding multiple data series

Adding a legend

Learning questions

Summary

2. More Line Charts, Area Charts, and Scatter Plots

2. More Line Charts, Area Charts, and Scatter Plots

Working with remote data sources

Adding a fill between two lines

Understanding area and stacked area charts

Creating an area chart

Creating a stacked area chart with revenue

Understanding trend lines

Adding trend lines

Understanding scatterplot charts

Extending the data renderer

Creating a scatterplot chart

Learning questions

Summary

3. Bar Charts and Digging into Data

3. Bar Charts and Digging into Data

Building bars of data

Adding styles to our bar chart

Creating charts with multiple data series

Adding trend lines to selected product categories

Expanding our datasets with event handlers

Adding an event handler for our stacked area chart

Learning questions

Summary

4. Horizontal and Stacked Bar Charts

4. Horizontal and Stacked Bar Charts

Turning our chart on its side

Removing axis labels and adding point labels

Adding a threshold to our chart

Learning questions

Summary

5. Pie Charts and Donut Charts

5. Pie Charts and Donut Charts

Limitations of pie charts

Making a pie chart with many data points

Styling our chart and adding functionality

Building a pie chart with empty wedges

Creating a pie chart for each division with product category revenue

Building a donut chart to show web browser usage

Learning questions

Summary

6. Spice Up Your Charts with Animation, Tooltips, and Highlighting

6. Spice Up Your Charts with Animation, Tooltips, and Highlighting

Using the cursor plugin to see the data behind our charts

Making the tooltip follow the mouse and adding cursor lines

Connecting the cursor with the legend

Using the highlighter plugin

Extending the highlighter plugin to the legend

Animating line charts

Animating bar charts with varying speeds

Learning questions

Summary

7. Stock Market Charts – OHLC and Candlestick Charts

7. Stock Market Charts – OHLC and Candlestick Charts

Looking at the employee stock option plan

Explaining OHLC charts

Explaining candlestick charts

Building an OHLC chart with last quarter's stock data

Building a candlestick chart with filtered data

Zooming in on a colored candlestick chart

Adding tooltips to canvas overlay lines

Modifying the data array and the tooltip

Learning questions

Summary

8. Bubble Charts, Block Plots, and Waterfalls

8. Bubble Charts, Block Plots, and Waterfalls

Creating a waterfall chart with expenses against revenue

Building a bubble chart

Building a block plot

Understanding waterfall charts

Creating a waterfall chart showing expenses against revenue

Learning questions

Summary

9. Showing Real-time Data with Our Charts

9. Showing Real-time Data with Our Charts

Creating a meter gauge chart with Wi-Fi users

Refreshing our chart from remote data

Using the replot method to change remote datasets

Dynamically building our chart when the page loads

Learning questions

Summary

10. Beautifying and Extending Your Charts

10. Beautifying and Extending Your Charts

Nailing down the charts for our dashboard

Changing the background color of our chart

Canvas versus CSS

Using the second xaxis and smoothing lines

Setting negative colors on a bar chart

Creating reusable plot objects

Using objects to piece together our chart

Reaping the benefits of the DRY code

Learning questions

Summary

11. Bringing it All Together

11. Bringing it All Together

Combining four charts into a dashboard

Creating a divisional dashboard

Mixing renderers

Adding extra canvas elements

Modifying an existing plugin

Learning questions

Summary

A. Answers

Chapter 1, Getting Started

Chapter 2, More Line Charts, Area Charts, and Scatter Plots

Chapter 3, Bar Charts and Digging into Data

Chapter 4, Horizontal and Stacked Bar Charts

Chapter 5, Pie Charts and Donut Charts

Chapter 6, Spice Up Your Charts with Animation, Tooltips, and Highlighting

Chapter 7, Stock Market Charts – OHLC and Candlestick Charts

Chapter 8, Bubble Charts, Block Plots, and Waterfalls

Chapter 9, Showing Real-time Data with Our Charts

Chapter 10, Beautifying and Extending Your Charts

Chapter 11, Bringing it All Together

Index

Index

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "For the yaxis option, we set our label and use the formatString option to format our values as currency."

A block of code is set as follows:

   <script>
   $(document).ready(function(){
     var secondPlot = $.jqplot ('secondChart', [[[5,4],[10,7],[15,6],[20,9]]]);
   });
   </script>
   <div id="secondChart" style="width:400px;"></div>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<script src="../js/jqplot.dateAxisRenderer.min.js"></script>
<script>
$(document).ready(function(){

  var revenue = [['2012-07-20', 807403], ['2012-08-20', 755840], ['2012-09-20', 775304]];
  var profit = [['2012-07-20', 193793.82], ['2012-08-20', 183221.56], ['2012-09-20', 192797.31]];
  var electronics = [['2012-07-20', 116276.29], ['2012-08-20', 95867.97], ['2012-09-20', 120591.27]];
  var media = [['2012-07-20', 27596.25], ['2012-08-20', 32396.47], ['2012-09-20', 26709.06]];
  var nerd_corral = [['2012-07-20', 49921.28], ['2012-08-20', 54957.12], ['2012-09-20', 45496.98]];

  var rev_profit = $.jqplot ('division_profit', [revenue, profit, electronics, media, nerd_corral],
  {

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "We test our chart, and a trend line for DVDs/Blu-ray is rendered since we did not pass a query string."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning jqPlot

Search

Your notes and bookmarks