Book Image

Learning jqPlot

By : Scott Gottreu
Book Image

Learning jqPlot

By: Scott Gottreu

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Learning jqPlot
Scott Gottreu
Aug, 2014 | 240 pages
No titles found
Table of Contents (19 chapters)
Learning jqPlot
Learning jqPlot
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started
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
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
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
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
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
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
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
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
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
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
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
Answers
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

Making the tooltip follow the mouse and adding cursor lines

This is a nice addition to our chart, but we know that Roshan specifically asked for the tooltip to appear near his cursor. We also take Calvin's advice about making things a bit more engaging and easier to use.

We can enable lines to span the length of the grid and intersect with the cursor. This will make it more obvious where the user's cursor is on the grid. We can also use tooltipLocation to move our tooltip around respective to the cursor. We return to the chart we just created and make a few changes. We set the following options within the cursor object:

  1. We start by changing tooltipLocation to se:

          cursor: {
        show: true,
        tooltipLocation:'se',

  2. Next, we add the followMouse option and set it to true to allow the tooltip to follow the cursor:

            followMouse: true,

  3. We enable both the vertical and horizontal cursor lines by setting showVerticalLine and showHorizontalLine to true:

            showVerticalLine: true...
Previous Section
End of Section 3
Next Section