nach oben

2014 | Buch

Create Web Charts With jqPlot

verfasst von: Fabio Nelli

Verlag: Apress

Enthalten in: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Einloggen, um Zugang zu erhalten

Über dieses Buch

Create Web Charts with jqPlotshows 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.

By 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 simple HTML tables to structured JSON files, and from Matlab calculations to reports in Excel. You will be able to provide cutting-edge charts exploiting the growing power of modern browsers.

This book contains content previously published in Beginning JavaScript Charts.

Create all kinds of charts using the latest technologies available on browsersFull of step-by-step examples, Create Web Charts with jqPlot 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

Inhaltsverzeichnis

Frontmatter

Chapter 1. Charting Technology Overview

Abstract

When we need to represent data or qualitative structures graphically in order to show a relationship—to make a comparison or highlight a trend—we make use of charts. A chart is a graphic structure consisting of symbols, such as lines, in a line chart; bars, in a bar chart; or slices, in a pie chart. Charts serve as valid tools that can help us discern and understand the relationships underlying large quantities of data. It is easier for humans to read graphic representations, such as a chart, than raw numeric data. Nowadays, use of charts has become common practice in a wide variety of professional fields as well as in many other aspects of daily life. For this reason, charts have come to take on many forms, depending on the stucture of the data and the phenomenon that is being highlighted. For example, if you have data separated into different groups and want to represent the percentage of each, with respect to the total, you usually display these groups of data in a pie chart or a bar chart. In contrast, if you want to show the trend of a variable over time, a line chart is typically the best choice.

Fabio Nelli

Chapter 2. jQuery Basics

Abstract

In the previous chapter, you learned about the DOM tree and saw how HTML documents are composed of many elements that can be created, modified, and deleted from the initial context. These operations are performed by the browser via JavaScript commands that, as discussed previously, can be executed either at the time of page loading or as a result of events that follow. A JavaScript library that manages all these operations in a simple and well-established manner has been developed for this purpose. This library is jQuery, and it is completely open source. It was created in 2006 by Jon Resig and continues to be improved on by a team of developers. Because of its usefulness, compared with classic JavaScript, and its ability to manipulate DOM elements, jQuery is currently the most widely used JavaScript library and constitutes a point of reference for all web developers.

Fabio Nelli

Chapter 3. Introducing jqPlot

Abstract

In the course of this chapter, you will be introduced to the basic concepts that underlie this library. After seeing how the library is structured and the files that compose it, you will begin to understand how easy it is to make a chart using only a few lines of code.

Fabio Nelli

Chapter 4. Line Charts with jqPlot

Abstract

In the previous chapter, you observed the most basic use of jqPlot, in which a series of data serves to plot a line, with no need for any additional options. You saw that in order to create the most basic type of chart, a line chart, you do not need to include plug-ins.

Fabio Nelli

Chapter 5. Bar Charts with jqPlot

Abstract

In this chapter, you will deal with another large class of charts: bar charts. In the previous chapter, you were shown ways to characterize line charts, the default chart type in jqPlot. Now, using the BarRenderer plug-in, you will discover how the structure of the main jqPlot object is gradually enriched with new properties and objects. Through practical examples, you will see how to change the values of property and object attributes with rendererOptions.

Fabio Nelli

Chapter 6. Pie Charts and Donut Charts with jqPlot

Abstract

Pie charts and donut charts are an excellent way to show the breakdown of data into their constituent parts. A pie chart is a circular chart divided into sectors, or “slices,” and its main purpose is to illustrate their relative proportions: the arc length of each slice is proportional to the quantity it represents. A donut chart is very similar to a pie chart but has a hole in the center and supports the comparison of multiple series. In this chapter, you will look at both kinds of charts. The chapter concludes with a discussion of multidimentionsional pie charts.

Fabio Nelli

Chapter 7. Candlestick Charts with jqPlot

Abstract

Candlestick charts are widely used in the analysis of a currency over time or of price movements. This chart consists of a series of vertical bars, called candlesticks. They show the opening, closing, lowest, and highest price in a given time period (see Figure 7-1). For this reason, this kind of chart is often called an OHLC chart (when it reports open-high-low-close values) or an HLC chart (when it reports onlyhigh-low-close values).

Fabio Nelli

Chapter 8. Scatter Charts and Bubble Charts with jqPlot

Abstract

In this chapter, I will discuss a category of charts that are particularly useful when representing a data distribution. It is likely you will often find yourself interested in how a set of data is distributed along the space defined by two different parameters, shown along the x axis and y axis. Such data distribution can suggest correlation or clustering.

Fabio Nelli

Chapter 9. Funnel Charts with jqPlot

Abstract

Funnel charts are used to show the progressive reduction of data as they go down one level to the next. The chart consists of an inverted pyramid, or funnel, divided into different levels. Each level has its own area, which is proportional to a given percentage value. A funnel chart is similar to a pie chart in that both express a whole divided into its constituent parts. But, the funnel chart specifies levels, which succeed one another in a very precise sequence. This sequence may express a hierarchical order, the steps of a process, and so on. A pie chart cannot do this.

Fabio Nelli

Chapter 10. Adding Controls to Charts

Abstract

Sometimes, it can be useful to change settings directly from the browser at runtime and then replot the chart with these new settings. A typical way of doing this is to add active controls. These controls make the chart interactive, allowing the user to make choices in real time, such as deciding how the chart should be represented.By inserting controls, you give the user the ability to control the values of the chart's attributes, which you would normally have to set in options.

Fabio Nelli

Chapter 11. Embedding jqPlot Charts in jQuery Widgets

Abstract

In Chapter 2, you saw several examples of jQuery UI widgets used as containers. In this chapter, you’ll exploit such capability to represent the charts within these containers. This enables you to exploit the great potential of the jQuery UI widgets to further improve the way in which your charts are represented.

Fabio Nelli

Chapter 12. Handling Input Data

Abstract

Once you have dealt with all the graphical aspects of a chart, it is time to analyze input data in more detail. In the previous chapters, you assigned the values of input data to arrays. These arrays were defined in the same HTML page within which the jqPlot code resides. You have frequently used these two ways:

Fabio Nelli

Appendix A. Guidelines for the Examples in the Book

Abstract

This appendix provides guidelines on how to use XAMPP and Aptana Studios together to create a development environment on your PC that will allow you to develop, run, and fix the examples given in the book.

Fabio Nelli

Appendix B. jqPlot Plug-ins

Abstract

This appendix shows the complete list of available plug-ins in the jqPlot distibution (see Table B-1). Not all these plug-ins have been treated in this book; for more information, please visit the jqPlot web site ( www.jqplot.com ).

Fabio Nelli

Backmatter

Titel: Create Web Charts With jqPlot
verfasst von: Fabio Nelli
Verlag: Apress
Electronic ISBN: 978-1-4842-0862-5
Print ISBN: 978-1-4842-0863-2
DOI: https://doi.org/10.1007/978-1-4842-0862-5