Data visualization and analysis is a key skill in today's data-driven world. Whether you need to help users understand data in your application or you're building reports to help track your business' information, you will almost certainly need the ability to create custom charts and graphs in your toolbelt.
Flot is a JavaScript and charting library based on jQuery. It allows you to create beautiful, sophisticated, and dynamic charts, graphs, and plots with ease. Flot's sensible defaults and simple API let you get started quickly.
This book guides you through Flot's features and capabilities. The recipes give you a concise introduction to Flot and its built-in plugins. You'll learn how to create various types of charts and graphs, customize the charts' options to suit your needs, and apply what you've learnt to real data.
We'll also cover some statistical methods via the jStat JavaScript library so that you can further analyze your data.
When you've mastered Flot's features, you'll learn to take advantage of its extensibility and build plugins that help you encapsulate and reuse custom functionality.
Creating basic charts (Must know), introduces Flot and its API. You'll learn to create the simplest types of charts and configure the charts to combine multiple series and chart types.
Creating stacked charts (Must know), covers Flot's built-in stack plugin, which allows you to create stacked line and bar charts. You'll also learn to use the plugin's options to group series into multiple stacks.
Creating pie charts (Must know), covers the pie plugin and its various options. You'll create plain pie charts, labelled charts, donut charts, tilted pie charts, and use one of the plugin's more advanced features.
Working with axes (Should know), teaches you to customize a chart's axes, transforming the shape of a graph by using a logarithmic scale, displaying multiple data series with their own independent axes, and making the axes interactive.
Tracking curves (Should know), covers the crosshair plugin and introduces Flot's hover event so that you can create a chart that tracks a user's mouse cursor across a graph interactively.
Plotting time series (Should know), explains the time plugin, which allows you to plot time-based data. You'll also learn to configure the plugin to display a custom date format.
Displaying error bars (Should know), covers the errorbars plugin and teaches you to display horizontal and vertical error bars on a chart.
Displaying percentiles (Should know), covers the fillbetween plugin, which we use to visualize percentile data.
Incorporating statistics with Flot (Should know), introduces the jStat library and uses it to calculate some basic statistical properties of data sets including standard deviation, correlation, and distribution.
Applying Flot (Should know), demonstrates how you can apply Flot to visualize real-world data. We create pie charts with data from an Open Data API and calculate averages and trends for personal weight data.
Creating custom plugins (Become an expert), introduces Flot's plugin API and teaches you to create a plugin that can add a running average to any dataset.
This book uses Flot Version 0.8.1 available directly from http://www.flotcharts.org/downloads/flot-0.8.1.zip. You can learn more about Flot at http://www.flotcharts.org/.
Flot requires jQuery and works with Version 1.2.6 and above. Of course, it's best to use more recent versions of jQuery for performance and stability. jQuery 1.8.3 is included in the Flot download but you can also find it at http://code.jquery.com/jquery/.
Flot supports modern browsers including Firefox, Chrome, Safari, and Opera. It also supports Internet Explorer 6 and above. Internet Explorer 8 and below require an additional Explorer Canvas library, which is included in the Flot download and at http://code.google.com/p/explorercanvas/.
We also use the jStat library. The library does not have an official released version, but you can download the exact version used in this book from https://github.com/jstat/jstat/archive/e4c2d0cc43c02bbfa1c99969d72659a856e2d393.zip. Learn more about jStat at https://github.com/jstat/jstat and http://jstat.github.io/.
If you're looking to add data visualization capabilities to your web application, this book is for you. You'll gain a head start that will allow you to create beautiful, powerful, and dynamic charts with ease. The book assumes that you have a working knowledge of JavaScript and jQuery.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "Our HTML must include a div element that will contain the chart."
A block of code is set as follows:
<body> <div class="chart" id="sampleChart"></div> <script src="jquery.js"></script> <script src="jquery.flot.js"></script> </body> </html>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Flot - Basic Charts</title> <style> .chart { width: 500px; height: 300px; } </style> </head> <body> <div class="chart" id="sampleChart"></div> </body> </html>
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
We also provide you a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from: http://www.packtpub.com/sites/default/files/downloads/0650OS_ColoredGraphics.pdf
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.