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

Connecting the cursor with the legend

As we experiment, we come across the option to pass the data points from the cursor tooltip to the legend. We revisit the chart we just worked on, and save it as a new file, 1168_06_05.html:

  1. We include the canvas plugins so that we can rotate our ticks and labels. We need to do this since our legend will be taking up more space than normal:

    <script src="../js/jqplot.cursor.min.js"></script>
<script src="../js/jqplot.canvasTextRenderer.min.js"></script>
<script src="../js/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="../js/jqplot.canvasAxisLabelRenderer.min.js"></script>

  2. We set showTooltip to false so that we don't show data points in multiple places. We set showVerticalLine to true. By connecting the cursor to the legend, values will only appear when the cursor crosses data points. When our vertical line crosses a data point, the values will appear in the legend. So, showVerticalLine must be...

Previous Section
End of Section 4
Next Section