Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Learning jqPlot
Learning jqPlot

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

eBook
€19.79 €21.99
Paperback
€26.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Learning jqPlot

Chapter 2. More Line Charts, Area Charts, and Scatter Plots

In the previous chapter, we reviewed the parts of a chart and began creating line charts. We manually created data arrays and passed them into our jqPlot objects. In this chapter, we'll learn how to import data from remote sources. We will discuss what area charts, stacked area charts, and scatter plots are. Then we will learn how to implement these newly learned charts. We will also learn about trend lines. The following list details the topics covered in this chapter:

  • Learn how to work with remote data sources
  • Fill the area between two lines to denote expenses
  • Learn about area charts and stacked area charts and how they differ
  • Create an area chart showing profits by division
  • Create a stacked area chart showing revenue by division
  • Learn what trend lines are and how to implement them
  • Discuss how scatterplot charts are different from line charts
  • Create a scatterplot looking for a correlation between shares on Twitter and...

Working with remote data sources

We return from lunch and decide to start on our line chart showing social media conversions. With this chart, we want to pull the data in from other sources. You start to look for some internal data sources, coming across one that returns the data as an object. We can see an excerpt of data returned by the data source. We will need to parse the object and create data arrays for jqPlot:

{ "twitter":[ ["2012-11-01",289],...["2012-11-30",225] ],
  "facebook":[ ["2012-11-01",27],...["2012-11-30",48] ] }
  1. We solve this issue using a data renderer to pull our data and then format it properly for jqPlot. We can pass a function as a variable to jqPlot and when it is time to render the data, it will call this new function. We start by creating the function to receive our data and then format it. We name it remoteDataSource. jqPlot will pass the following three parameters to our function:
    • url: This is the URL...

Adding a fill between two lines

We talk through Calvin's comments. Adding in expenses won't be too much of an issue. We could simply add the expense line to one of our existing reports but that will likely not be what they want. Visually, the gap on our chart between profit and revenue should be the total amount of expenses. You mention that we could fill in the gap between the two lines. We decide to give this a try:

  1. We leave the plugins and the data arrays alone. We pass an empty array into our data array as a placeholder for our expenses. Next, we update our title. After this, we add a new series object and label it Expenses:
    ...
        var rev_profit = $.jqplot ('revPrfChart', [revenue, profit, []],
        {
          title:'Monthly Revenue & Profit with Highlighted Expenses',
          series:[ { label: 'Revenue' }, { label: 'Profit' }, { label: 'Expenses' } ],
          legend: { show: true, placement: 'outsideGrid' },
  2. To fill in...

Understanding area and stacked area charts

Area charts come in two varieties. The default type of area chart is simply a modification of a line chart. Everything from the data point on the y axis all the way to zero is shaded. In the event your numbers are negative, then the data above the line up to zero is shaded in. Each data series you have is laid upon the others. Area charts are best to use when we want to compare similar elements, for example, sales by each division in our company or revenue among product categories.

The other variation of an area chart is the stacked area chart. The chart starts off being built in the same way as a normal area chart. The first line is plotted and shaded below the line to zero. The difference occurs with the remaining lines. We simply stack them. To understand what happens, consider this analogy.

Each shaded line represents a wall built to the height given in the data series. Instead of building one wall behind another, we stack them on top of each...

Creating an area chart

We grab the quarterly report with the divisional profits we created this morning. We will extend the data to a year and plot the divisional profits as an area chart:

  1. We remove the data arrays for revenue and the overall profit array. We also add data to the three arrays containing the divisional profits:
    <script src="../js/jqplot.dateAxisRenderer.min.js"></script>
    <script>
    $(document).ready(function(){
      var electronics = [["2011-11-20", 123487.87], ...];
      var media = [["2011-11-20", 66449.15], ...];
      var nerd_corral = [["2011-11-20", 2112.55], ...];
    
      var div_profit = $.jqplot ('division_profit', [media, nerd_corral, electronics],
      {
        title:'12 Month Divisional Profits',
  2. Under seriesDefaults, we assign true to fill and fillToZero. Without setting fillToZero to true, the fill would continue to the bottom of the chart. With the option set, the fill will extend downward to zero on the...

Creating a stacked area chart with revenue

Calvin stops by while we're taking a break. "Hey guys, I had a VP call and they want to see revenue broken down by division. Can we do that?" We tell him we can. "Great" he says, before turning away and leaving. We discuss this new request and realize this would be a great chance to use a stacked area chart.

We dig around and find the divisional revenue numbers Calvin wanted. We can reuse the chart we just created and just change out the data and some options.

  1. We use the same variable names for our divisional data and plug in revenue numbers instead of profit. We use a new variable name for our chart object and a new id attribute for our div. We update our title and add the stackSeries option and set it to true:
      var div_revenue = $.jqplot ('division_revenue', [electronics, media, nerd_corral],
      {
        title:'12 Month Divisional Revenue',
        stackSeries: true,
    
  2. We leave our series' options alone and...

Working with remote data sources


We return from lunch and decide to start on our line chart showing social media conversions. With this chart, we want to pull the data in from other sources. You start to look for some internal data sources, coming across one that returns the data as an object. We can see an excerpt of data returned by the data source. We will need to parse the object and create data arrays for jqPlot:

{ "twitter":[ ["2012-11-01",289],...["2012-11-30",225] ],
  "facebook":[ ["2012-11-01",27],...["2012-11-30",48] ] }
  1. We solve this issue using a data renderer to pull our data and then format it properly for jqPlot. We can pass a function as a variable to jqPlot and when it is time to render the data, it will call this new function. We start by creating the function to receive our data and then format it. We name it remoteDataSource. jqPlot will pass the following three parameters to our function:

    • url: This is the URL of our data source.

    • plot: The jqPlot object we create is passed...

Adding a fill between two lines


We talk through Calvin's comments. Adding in expenses won't be too much of an issue. We could simply add the expense line to one of our existing reports but that will likely not be what they want. Visually, the gap on our chart between profit and revenue should be the total amount of expenses. You mention that we could fill in the gap between the two lines. We decide to give this a try:

  1. We leave the plugins and the data arrays alone. We pass an empty array into our data array as a placeholder for our expenses. Next, we update our title. After this, we add a new series object and label it Expenses:

    ...
        var rev_profit = $.jqplot ('revPrfChart', [revenue, profit, []],
        {
          title:'Monthly Revenue & Profit with Highlighted Expenses',
          series:[ { label: 'Revenue' }, { label: 'Profit' }, { label: 'Expenses' } ],
          legend: { show: true, placement: 'outsideGrid' },
  2. To fill in the gap between the two lines, we use the fillBetween option. The only...

Understanding area and stacked area charts


Area charts come in two varieties. The default type of area chart is simply a modification of a line chart. Everything from the data point on the y axis all the way to zero is shaded. In the event your numbers are negative, then the data above the line up to zero is shaded in. Each data series you have is laid upon the others. Area charts are best to use when we want to compare similar elements, for example, sales by each division in our company or revenue among product categories.

The other variation of an area chart is the stacked area chart. The chart starts off being built in the same way as a normal area chart. The first line is plotted and shaded below the line to zero. The difference occurs with the remaining lines. We simply stack them. To understand what happens, consider this analogy.

Each shaded line represents a wall built to the height given in the data series. Instead of building one wall behind another, we stack them on top of each...

Creating an area chart


We grab the quarterly report with the divisional profits we created this morning. We will extend the data to a year and plot the divisional profits as an area chart:

  1. We remove the data arrays for revenue and the overall profit array. We also add data to the three arrays containing the divisional profits:

    <script src="../js/jqplot.dateAxisRenderer.min.js"></script>
    <script>
    $(document).ready(function(){
      var electronics = [["2011-11-20", 123487.87], ...];
      var media = [["2011-11-20", 66449.15], ...];
      var nerd_corral = [["2011-11-20", 2112.55], ...];
    
      var div_profit = $.jqplot ('division_profit', [media, nerd_corral, electronics],
      {
        title:'12 Month Divisional Profits',
  2. Under seriesDefaults, we assign true to fill and fillToZero. Without setting fillToZero to true, the fill would continue to the bottom of the chart. With the option set, the fill will extend downward to zero on the y axis for positive values and stop. For negative data points...

Creating a stacked area chart with revenue


Calvin stops by while we're taking a break. "Hey guys, I had a VP call and they want to see revenue broken down by division. Can we do that?" We tell him we can. "Great" he says, before turning away and leaving. We discuss this new request and realize this would be a great chance to use a stacked area chart.

We dig around and find the divisional revenue numbers Calvin wanted. We can reuse the chart we just created and just change out the data and some options.

  1. We use the same variable names for our divisional data and plug in revenue numbers instead of profit. We use a new variable name for our chart object and a new id attribute for our div. We update our title and add the stackSeries option and set it to true:

      var div_revenue = $.jqplot ('division_revenue', [electronics, media, nerd_corral],
      {
        title:'12 Month Divisional Revenue',
        stackSeries: true,
    
  2. We leave our series' options alone and the only option we change on our x axis is set numberTicks...

Understanding trend lines


The next morning with coffee mugs in hand, we set about adding trend lines to some of our existing charts. We decide that we will take our chart with the past twelve months of revenue and profit data and add a trend line.

Trend lines are calculated by taking all the data points on the y axis and picking a path where the number of points on either side of the line are as close to equal as possible. By doing this, jqPlot creates a line that will generally move upward or downward moving from left to right. This allows us to see if our data is moving upwards or downwards over time. Hence, we can see if our data is "trending" up or down.

Adding trend lines


We decide to use the profit and revenue chart with two y axes we created yesterday:

  1. We begin our updates by including the trend line plugin. We leave the data arrays as they are:

    <script src="../js/jqplot.dateAxisRenderer.min.js"></script>
    <script src="../js/jqplot.trendline.min.js"></script>
    <script>
    $(document).ready(function(){
    
      var revenue = [['2011-11-20', 800538], ['2011-12-20', 804879], ['2012-01-20', 847732], ['2012-02-20', 795758], ['2012-03-20', 835554], ['2012-04-20', 844379], ['2012-05-20', 828510], ['2012-06-20', 753984], ['2012-07-20', 807403], ['2012-08-20', 755840], ['2012-09-20', 775304], ['2012-10-20', 781322]];
    
      var profit = [['2011-11-20', 192049.56], ['2011-12-20', 188744.75], ['2012-01-20', 197352.54], ['2012-02-20', 190106.74], ['2012-03-20', 193453.07], ['2012-04-20', 197249.69], ['2012-05-20', 205480.18], ['2012-06-20', 177648.78], ['2012-07-20', 193793.82], ['2012-08-20', 183221.56], ['2012-09-20', 192797.31], ...
Left arrow icon Right arrow icon

Description

If you are a developer with a good understanding of JavaScript and jQuery and have been burdened with the task of analyzing and presenting some data, this book will provide you with the start you need to create some very attractive data visualizations.

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

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Aug 26, 2014
Length: 240 pages
Edition : 1st
Language : English
ISBN-13 : 9781783981175
Category :
Languages :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Aug 26, 2014
Length: 240 pages
Edition : 1st
Language : English
ISBN-13 : 9781783981175
Category :
Languages :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 114.97
Learning jqPlot
€26.99
AngularJS Web Application Development Blueprints
€41.99
Mastering D3.js
€45.99
Total 114.97 Stars icon

Table of Contents

13 Chapters
1. Getting Started Chevron down icon Chevron up icon
2. More Line Charts, Area Charts, and Scatter Plots Chevron down icon Chevron up icon
3. Bar Charts and Digging into Data Chevron down icon Chevron up icon
4. Horizontal and Stacked Bar Charts Chevron down icon Chevron up icon
5. Pie Charts and Donut Charts Chevron down icon Chevron up icon
6. Spice Up Your Charts with Animation, Tooltips, and Highlighting Chevron down icon Chevron up icon
7. Stock Market Charts – OHLC and Candlestick Charts Chevron down icon Chevron up icon
8. Bubble Charts, Block Plots, and Waterfalls Chevron down icon Chevron up icon
9. Showing Real-time Data with Our Charts Chevron down icon Chevron up icon
10. Beautifying and Extending Your Charts Chevron down icon Chevron up icon
11. Bringing it All Together Chevron down icon Chevron up icon
A. Answers Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(1 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
SuJo Dec 17, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Learning jqPlotScott Gottreu did a fine job on this title, it was informative, to the point, and the code worked. The information was detailed and to the point, I felt like I learned something new which was my intentions for reading this title. "This book empowers you to create highly-customized charts and graphs that present your data in a visually appealing and analytic manner." This was taken from the publisher page for this title and it's spot on, I did enjoy starting from a very basic graph and moving on to a more advanced graph.There isn't really much more to say about this title, I've used other plugins and they are pretty good but I feel leveraging the power of jqPlot opens the door for even better data representation using charts or graphs. I would also like to mention this is probably the first Packt book where the author actually utilized some humor and it was very refreshing. I REALLY REALLY enjoyed the story driven type setup, it actually helps me retain information. There are charts-o-plenty in this book as well, so if you're a visual learner like me you'll really appreciate the number of elements which are represented in full color for the eBook version. I did like the emphasis on limitations and I would have liked to seen more scenarios that require heavy loads or database driven dashboards. The remote loading was a nifty feature, do people still use that word?All in all I'm very pleased with this book, it will allow you to add some pizzazz to your web application while maintaining a well known and liked framework, no need to re-invent the wheel on this one folks. If you're just wondering if remote datasets are covered, you're in luck because they are. I would say I could have used a few more pages with database driven charts but I'm confident I can fill in the blanks. I'd highly recommend this book to anyone creating a web application that requires visual representation of the data, you'll really enjoy this one.[...]
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.

Modal Close icon
Modal Close icon