Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Learning jqPlot
  • Table Of Contents Toc
Learning jqPlot

Learning jqPlot

By : Scott Gottreu
5 (1)
Buy this Book
close
close
Learning jqPlot

Learning jqPlot

5 (1)
By: Scott Gottreu
Buy this Book

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.
Table of Contents (14 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Getting Started
Icon
1. Getting Started
Icon
Reviewing the components of a chart
Icon
Getting a promotion
Icon
Creating a jqPlot chart
Icon
Passing in both x and y values
Icon
Using dates for the x axis
Icon
Adding multiple data series
Icon
Adding a legend
Icon
Learning questions
Icon
Summary
2
2. More Line Charts, Area Charts, and Scatter Plots
Icon
2. More Line Charts, Area Charts, and Scatter Plots
Icon
Working with remote data sources
Icon
Adding a fill between two lines
Icon
Understanding area and stacked area charts
Icon
Creating an area chart
Icon
Creating a stacked area chart with revenue
Icon
Understanding trend lines
Icon
Adding trend lines
Icon
Understanding scatterplot charts
Icon
Extending the data renderer
Icon
Creating a scatterplot chart
Icon
Learning questions
Icon
Summary
3
3. Bar Charts and Digging into Data
Icon
3. Bar Charts and Digging into Data
Icon
Building bars of data
Icon
Adding styles to our bar chart
Icon
Creating charts with multiple data series
Icon
Adding trend lines to selected product categories
Icon
Expanding our datasets with event handlers
Icon
Adding an event handler for our stacked area chart
Icon
Learning questions
Icon
Summary
4
4. Horizontal and Stacked Bar Charts
Icon
4. Horizontal and Stacked Bar Charts
Icon
Turning our chart on its side
Icon
Removing axis labels and adding point labels
Icon
Adding a threshold to our chart
Icon
Learning questions
Icon
Summary
5
5. Pie Charts and Donut Charts
chevron up
Icon
5. Pie Charts and Donut Charts
Icon
Limitations of pie charts
Icon
Making a pie chart with many data points
Icon
Styling our chart and adding functionality
Icon
Building a pie chart with empty wedges
Icon
Creating a pie chart for each division with product category revenue
Icon
Building a donut chart to show web browser usage
Icon
Learning questions
Icon
Summary
6
6. Spice Up Your Charts with Animation, Tooltips, and Highlighting
Icon
6. Spice Up Your Charts with Animation, Tooltips, and Highlighting
Icon
Using the cursor plugin to see the data behind our charts
Icon
Making the tooltip follow the mouse and adding cursor lines
Icon
Connecting the cursor with the legend
Icon
Using the highlighter plugin
Icon
Extending the highlighter plugin to the legend
Icon
Animating line charts
Icon
Animating bar charts with varying speeds
Icon
Learning questions
Icon
Summary
7
7. Stock Market Charts – OHLC and Candlestick Charts
Icon
7. Stock Market Charts – OHLC and Candlestick Charts
Icon
Looking at the employee stock option plan
Icon
Explaining OHLC charts
Icon
Explaining candlestick charts
Icon
Building an OHLC chart with last quarter's stock data
Icon
Building a candlestick chart with filtered data
Icon
Zooming in on a colored candlestick chart
Icon
Adding tooltips to canvas overlay lines
Icon
Modifying the data array and the tooltip
Icon
Learning questions
Icon
Summary
8
8. Bubble Charts, Block Plots, and Waterfalls
Icon
8. Bubble Charts, Block Plots, and Waterfalls
Icon
Creating a waterfall chart with expenses against revenue
Icon
Building a bubble chart
Icon
Building a block plot
Icon
Understanding waterfall charts
Icon
Creating a waterfall chart showing expenses against revenue
Icon
Learning questions
Icon
Summary
9
9. Showing Real-time Data with Our Charts
Icon
9. Showing Real-time Data with Our Charts
Icon
Creating a meter gauge chart with Wi-Fi users
Icon
Refreshing our chart from remote data
Icon
Using the replot method to change remote datasets
Icon
Dynamically building our chart when the page loads
Icon
Learning questions
Icon
Summary
10
10. Beautifying and Extending Your Charts
Icon
10. Beautifying and Extending Your Charts
Icon
Nailing down the charts for our dashboard
Icon
Changing the background color of our chart
Icon
Canvas versus CSS
Icon
Using the second xaxis and smoothing lines
Icon
Setting negative colors on a bar chart
Icon
Creating reusable plot objects
Icon
Using objects to piece together our chart
Icon
Reaping the benefits of the DRY code
Icon
Learning questions
Icon
Summary
11
11. Bringing it All Together
Icon
11. Bringing it All Together
Icon
Combining four charts into a dashboard
Icon
Creating a divisional dashboard
Icon
Mixing renderers
Icon
Adding extra canvas elements
Icon
Modifying an existing plugin
Icon
Learning questions
Icon
Summary
12
A. Answers
Icon
Chapter 1, Getting Started
Icon
Chapter 2, More Line Charts, Area Charts, and Scatter Plots
Icon
Chapter 3, Bar Charts and Digging into Data
Icon
Chapter 4, Horizontal and Stacked Bar Charts
Icon
Chapter 5, Pie Charts and Donut Charts
Icon
Chapter 6, Spice Up Your Charts with Animation, Tooltips, and Highlighting
Icon
Chapter 7, Stock Market Charts – OHLC and Candlestick Charts
Icon
Chapter 8, Bubble Charts, Block Plots, and Waterfalls
Icon
Chapter 9, Showing Real-time Data with Our Charts
Icon
Chapter 10, Beautifying and Extending Your Charts
Icon
Chapter 11, Bringing it All Together
13
Index
Icon
Index

Building a donut chart to show web browser usage

We find the data feed, and it is composed of nested objects. We'll need to manipulate the remote data quite a bit to get it in the format we need. We achieve this by executing the following steps:

  1. We start by including the donutRenderer plugin file. With donut charts, we can use seriesColors for each ring, so we create arrSeriesColors to store the colors of our outer rings. Then, we create innerRingColors to hold the matching colors for our inner ring wedges:

    <script src="../js/jqplot.donutRenderer.min.js"></script>
<script src="../js/functions.js"></script>
<script>
var arrSeriesColors = "#4bb2c5", "#F4CA4A", "#EAA228", "#E4CAAB", "#00CC55", "#AED8D0", "#F2C185"];
var innerRingColors = [];

  2. Next, we create our function to parse our remote data. Since we have multiple levels in our JSON, we decide to store the browsers and versions objects in variables to make our code a little easier to read. We pass the browser...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Learning jqPlot
End of Chapter 5
Next Chapter
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon