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 : Gottreu
5 (1)
Buy this Book
close
close
Learning jqPlot

Learning jqPlot

5 (1)
By: 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
chevron up
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
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

Adding a fill between two lines

We talk through Calvin's comments. Adding in expenses won't be too much of an issue. We could simply add the expense line to one of our existing reports but that will likely not be what they want. Visually, the gap on our chart between profit and revenue should be the total amount of expenses. You mention that we could fill in the gap between the two lines. We decide to give this a try:

  1. We leave the plugins and the data arrays alone. We pass an empty array into our data array as a placeholder for our expenses. Next, we update our title. After this, we add a new series object and label it Expenses:

    ...
    var rev_profit = $.jqplot ('revPrfChart', [revenue, profit, []],
    {
      title:'Monthly Revenue & Profit with Highlighted Expenses',
      series:[ { label: 'Revenue' }, { label: 'Profit' }, { label: 'Expenses' } ],
      legend: { show: true, placement: 'outsideGrid' },

  2. To fill in the gap between the two lines, we use the fillBetween option. The only...

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 Section 2
Next Section
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