O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning jqPlot

Book Description

Learn how to create your very own rich and intuitive JavaScript data visualizations using jqPlot

In Detail

jqPlot is a charting and plotting plugin for the jQuery framework with numerous chart style options, and is a great tool to build data visualizations. Using jqPlot, you can create bar charts, pie charts, and even stock market charts. It is more than just a plugin for jQuery; you can design, build, and integrate graphs in a far more straightforward manner than popular feature-rich options such as Highcharts.

This book empowers you to create highly-customized charts and graphs that present your data in a visually appealing and analytic manner. Starting with a basic line graph, you'll cover the other standard charts as well as some of the not-so-standard ones. If you want to be leaps and bounds ahead of your colleagues when it comes to developing graphs and charts for your web applications, this book is the answer.

What You Will Learn

  • Make basic line graphs, bar charts, and pie charts
  • Create functions to parse various JSON objects to build datasets
  • Customize the style of your charts to create your own personal designs
  • Update your charts with live data using AJAX calls
  • Build waterfall, block, and OHLC charts
  • Increase the functionality of your charts by building event handlers
  • Add plugins to make the data more accessible

Table of Contents

  1. Learning jqPlot
    1. Table of Contents
    2. Learning jqPlot
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Getting Started
      1. Reviewing the components of a chart
      2. Getting a promotion
      3. Creating a jqPlot chart
      4. Passing in both x and y values
      5. Using dates for the x axis
      6. Adding multiple data series
        1. Adding multiple y axes
      7. Adding a legend
        1. Adding line and marker options
      8. Learning questions
      9. Summary
    9. 2. More Line Charts, Area Charts, and Scatter Plots
      1. Working with remote data sources
        1. Adding to the project's scope
      2. Adding a fill between two lines
      3. Understanding area and stacked area charts
      4. Creating an area chart
      5. Creating a stacked area chart with revenue
      6. Understanding trend lines
      7. Adding trend lines
        1. Increasing the number of data points
      8. Understanding scatterplot charts
      9. Extending the data renderer
      10. Creating a scatterplot chart
      11. Learning questions
      12. Summary
    10. 3. Bar Charts and Digging into Data
      1. Building bars of data
      2. Adding styles to our bar chart
      3. Creating charts with multiple data series
      4. Adding trend lines to selected product categories
      5. Expanding our datasets with event handlers
      6. Adding an event handler for our stacked area chart
      7. Learning questions
      8. Summary
    11. 4. Horizontal and Stacked Bar Charts
      1. Turning our chart on its side
        1. Using a stacked bar chart to make our data easier to read
        2. Understanding the limits of data
          1. Making our chart compact
      2. Removing axis labels and adding point labels
      3. Adding a threshold to our chart
      4. Learning questions
      5. Summary
    12. 5. Pie Charts and Donut Charts
      1. Limitations of pie charts
      2. Making a pie chart with many data points
      3. Styling our chart and adding functionality
      4. Building a pie chart with empty wedges
      5. Creating a pie chart for each division with product category revenue
        1. Defining donut charts
      6. Building a donut chart to show web browser usage
      7. Learning questions
      8. Summary
    13. 6. Spice Up Your Charts with Animation, Tooltips, and Highlighting
      1. Using the cursor plugin to see the data behind our charts
      2. Making the tooltip follow the mouse and adding cursor lines
        1. Pushing the limits of the cursor plugin
      3. Connecting the cursor with the legend
      4. Using the highlighter plugin
      5. Extending the highlighter plugin to the legend
      6. Animating line charts
      7. Animating bar charts with varying speeds
      8. Learning questions
      9. Summary
    14. 7. Stock Market Charts – OHLC and Candlestick Charts
      1. Looking at the employee stock option plan
      2. Explaining OHLC charts
      3. Explaining candlestick charts
      4. Building an OHLC chart with last quarter's stock data
      5. Building a candlestick chart with filtered data
      6. Zooming in on a colored candlestick chart
      7. Adding tooltips to canvas overlay lines
      8. Modifying the data array and the tooltip
      9. Learning questions
      10. Summary
    15. 8. Bubble Charts, Block Plots, and Waterfalls
      1. Creating a waterfall chart with expenses against revenue
        1. Deciding on new chart types
        2. Understanding bubble charts
      2. Building a bubble chart
      3. Building a block plot
        1. Gaining our next set of requirements
      4. Understanding waterfall charts
      5. Creating a waterfall chart showing expenses against revenue
      6. Learning questions
      7. Summary
    16. 9. Showing Real-time Data with Our Charts
      1. Creating a meter gauge chart with Wi-Fi users
      2. Refreshing our chart from remote data
      3. Using the replot method to change remote datasets
      4. Dynamically building our chart when the page loads
      5. Learning questions
      6. Summary
    17. 10. Beautifying and Extending Your Charts
      1. Nailing down the charts for our dashboard
      2. Changing the background color of our chart
      3. Canvas versus CSS
      4. Using the second xaxis and smoothing lines
      5. Setting negative colors on a bar chart
      6. Creating reusable plot objects
      7. Using objects to piece together our chart
      8. Reaping the benefits of the DRY code
      9. Learning questions
      10. Summary
    18. 11. Bringing it All Together
      1. Combining four charts into a dashboard
      2. Creating a divisional dashboard
        1. Digesting our work
        2. Extending the divisional dashboard
        3. Dashboard Version 3
      3. Mixing renderers
      4. Adding extra canvas elements
      5. Modifying an existing plugin
        1. Modifying our chart to use the cursor tooltip
      6. Learning questions
      7. Summary
    19. A. Answers
      1. Chapter 1, Getting Started
      2. Chapter 2, More Line Charts, Area Charts, and Scatter Plots
      3. Chapter 3, Bar Charts and Digging into Data
      4. Chapter 4, Horizontal and Stacked Bar Charts
      5. Chapter 5, Pie Charts and Donut Charts
      6. Chapter 6, Spice Up Your Charts with Animation, Tooltips, and Highlighting
      7. Chapter 7, Stock Market Charts – OHLC and Candlestick Charts
      8. Chapter 8, Bubble Charts, Block Plots, and Waterfalls
      9. Chapter 9, Showing Real-time Data with Our Charts
      10. Chapter 10, Beautifying and Extending Your Charts
      11. Chapter 11, Bringing it All Together
    20. Index