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

O'Reilly logo
Beginning JavaScript Charts: With jqPlot, d3, and Highcharts

Book Description

Beginning JavaScript Charts shows how to convert your data into eye-catching, innovative, animated, and highly interactive browser-based charts. This book is suitable for developers of all experience levels and needs: for those who love fast and effective solutions, you can use the jqPlot library to generate charts with amazing effects and animations using only a few lines of code; if you want more power and need to create data visualization beyond traditional charts, then D3 is the JavaScript library for you; finally, if you need a high-performance, professional solution for interactive charts, then the Highcharts library is also covered.

If you are an experienced developer and want to take things further, then Beginning JavaScript Charts also shows you how to develop your own graphics library starting from scratch using jQuery. At the end of the book, you will have a good knowledge of all the elements needed to manage data from every possible source, from high-end scientific instruments to Arduino boards, from PHP SQL databases queries to simple HTML tables, and from Matlab calculations to reports in Excel. You will be able to provide cutting-edge charts exploiting the growing power of modern browsers.

  • Create all kinds of charts using the latest technologies available on browsers (HTML5, CSS3, jQuery, jqPlot, D3, Highcharts, and SVG)

  • Full of step-by-step examples, Beginning JavaScript Charts introduces you gradually to all aspects of chart development, from the data source to the choice of which solution to apply.

  • This book provides a number of tools that can be the starting point for any project requiring graphical representations of data, whether using commercial libraries or your own

What you'll learn

  • Learn the jqPlot, D3, Highcharts, CSS, jQuery and SVG basics.

  • Discover the world of JavaScript graphic libraries.

  • Discover which charts can best represent your data.

  • Switch from a vision of a chart sent from a server as a static image to a highly dynamic one, in which the user is able to interact in real time.

  • Perform input data manipulation to increase chart readability.

  • Develop your own graphic library.

Who this book is for

Beginning JavaScript Charts is for developers at all levels interested in data visualization, and ready to embrace modern web standards and animate and display their data with powerful, cutting-edge technologies.

Table of Contents

  1. Title Page
  2. Dedication
  3. Contents at a Glance
  4. Contents
  5. About the Author
  6. About the Technical Reviewer
  7. Acknowledgments
  8. Introduction
  9. CHAPTER 1: Charting Technology Overview
    1. Elements in a Chart
    2. Most Common Charts
    3. How to Realize Charts on the Web
    4. HTML5
    5. Charting with SVG and CANVAS
    6. The DOM
    7. Developing in JavaScript
    8. Firebug and DevTools
    9. JSON
    10. Summary
  10. CHAPTER 2: jQuery Basics
    1. Including the jQuery Library
    2. jQuery and the DOM
    3. jQuery UI: Widgets
    4. Concluding Thoughts on the jQuery Library
    5. Summary
  11. CHAPTER 3: Simple HTML Tables
    1. Creating a Table for Your Data
    2. Parsing the Table Data
    3. Ready for Implementing Graphics
    4. Summary
  12. CHAPTER 4: Drawing a Line Chart
    1. Defining the Canvas
    2. Setting the Canvas
    3. Drawing a Line Chart
    4. Drawing Lines on the Chart
    5. Adding a Legend
    6. Adding a Title
    7. Hiding the Table
    8. Summary
  13. CHAPTER 5: Drawing a Bar Chart
    1. Drawing a Bar Chart
    2. Summary
  14. CHAPTER 6: Drawing a Pie Chart
    1. Drawing a Pie Chart
    2. Adding Effects
    3. Summary
  15. CHAPTER 7: Creating a Library for Simple Charts
    1. Creating a Library
    2. Main Features: Target, Data, and Options
    3. Implementing the Library
    4. Default Values
    5. Summary
  16. CHAPTER 8: Introducing jqPlot
    1. The jqPlot library
    2. Including Basic Files
    3. Plot Basics
    4. Using jqPlot Plug-ins
    5. Understanding jqPlot Options
    6. Inserting Series of Data
    7. Renderers and Plug-ins: A Further Clarification
    8. CSS Customization
    9. Thinking in Modules
    10. Summary
  17. CHAPTER 9: Line Charts with jqPlot
    1. Using (x, y) Pairs as Input Data
    2. First Steps in the Development of a Line Chart: The Axes
    3. The Multiseries Line Chart
    4. Data with JavaScript
    5. Handling Date Values
    6. Highlighting
    7. Interacting with the Chart: Limit Lines and Zooming
    8. Changing Chart Appearance
    9. Working with Areas on Line Charts
    10. Trend Lines
    11. Summary
  18. CHAPTER 10: Bar Charts with jqPlot
    1. Using the BarRenderer Plug-In to Create Bar Charts
    2. Rotate Axis Tick Labels
    3. Modify the Space Between the Bars
    4. Adding Values at the Top of Bars
    5. Bars with Negative Values
    6. Bar Charts with More Than One Set of Data
    7. Combination Charts: Lines in Bar Charts
    8. Animated Plot
    9. Marimekko Chart
    10. Bar Chart Events
    11. Handling Legends
    12. Custom Tool Tip
    13. Summary
  19. CHAPTER 11: Pie Charts and Donut Charts with jqPlot
    1. Pie Charts
    2. Donut Charts
    3. Multilevel Pie Charts
    4. Summary
  20. CHAPTER 12: Candlestick Charts with jqPlot
    1. OHLC Charts
    2. Using Real Bodies and Shadows
    3. Comparing Candlesticks
    4. Summary
  21. CHAPTER 13: Scatter Charts and Bubble Charts with jqPlot
    1. Scatter Chart (xy Chart)
    2. Bubble Chart
    3. Block Chart
    4. Summary
  22. CHAPTER 14: Funnel Charts with jqPlot
    1. Creating a Funnel Chart
    2. Summary
  23. CHAPTER 15: Adding Controls to Charts
    1. Adding Controls
    2. Using Radio Buttons
    3. Using Sliders
    4. Using Check Boxes
    5. Summary
  24. CHAPTER 16: Embedding jqPlot Charts in jQuery Widgets
    1. jqPlot Charts on Tabs
    2. jqPlot Charts on Accordions
    3. Resizable and Draggable Charts
    4. Summary
  25. CHAPTER 17: Handling Input Data
    1. Using the JSON Format
    2. Real-Time Charts
    3. Summary
  26. CHAPTER 18: Moving from jqPlot to Highcharts
    1. The Highcharts Distribution
    2. Similarities and Differences
    3. Line Charts with Highcharts
    4. Reading Data from a File
    5. Exporting the Chart
    6. The Master Detail Chart
    7. Bar and Pie Charts with Highcharts
    8. Gantt Charts
    9. Combined Charts
    10. Highstock Library
    11. Summary
  27. CHAPTER 19: Working with D3
    1. Introducing D3
    2. Starting with a Blank HTML Page
    3. Using Selections and Operators
    4. Creating New Elements
    5. Inserting Data into Elements
    6. Applying Dynamic Properties
    7. Adding SVG Elements
    8. Summary
  28. CHAPTER 20: Line Charts with D3
    1. Developing a Line Chart with D3
    2. Drawing a Line Chart from Data in a CSV File
    3. Multiseries Line Charts
    4. Difference Line Chart
    5. Summary
  29. CHAPTER 21: Bar Charts with D3
    1. Drawing a Bar Chart
    2. Drawing a Stacked Bar Chart
    3. A Normalized Stacked Bar Chart
    4. Drawing a Grouped Bar Chart
    5. Horizontal Bar Chart with Negative Values
    6. Summary
  30. CHAPTER 22: Pie Charts with D3
    1. The Basic Pie Charts
    2. Donut Charts
    3. Polar Area Diagrams
    4. Summary
  31. CHAPTER 23: Candlestick Charts with D3
    1. Creating an OHLC Chart
    2. Date Format
    3. Box Representation in Candlestick Charts
    4. Summary
  32. CHAPTER 24: Scatterplot and Bubble Charts with D3
    1. Scatterplot
    2. Markers and Symbols
    3. Adding More Functionalities
    4. Highlighting Data Points
    5. Bubble Chart
    6. Summary
  33. CHAPTER 25: Radar Charts with D3
    1. Radar Chart
    2. Improving Your Radar Chart
    3. Summary
  34. CHAPTER 26: Handling Live Data with D3
    1. Real-Time Charts
    2. Using PHP to Extract Data from a MySQL Table
    3. Summary
    4. Conclusion
  35. APPENDIX A: Guidelines for the Examples in the Book
    1. Installing a Web Server
    2. Installing Aptana Studio IDE
    3. Setting the Aptana Studio Workspace
    4. Creating a Project
    5. Completing the Workspace
    6. Filling the src Directory with the Libraries
    7. Running the Examples
    8. Summary
  36. APPENDIX B: jqPlot Plug-ins
  37. Index