Beginning JavaScript Charts: With jqPlot, d3, and Highcharts

Beginning JavaScript Charts: With jqPlot, d3, and Highcharts

by Fabio Nelli
Released November 2013
Publisher(s): Apress
ISBN: 9781430262893

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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

    Product information

    • Title: Beginning JavaScript Charts: With jqPlot, d3, and Highcharts
    • Author(s): Fabio Nelli
    • Release date: November 2013
    • Publisher(s): Apress
    • ISBN: 9781430262893