7. Stock Market Charts – OHLC and Candlestick Charts | Learning jqPlot

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learning jqPlot

By : Scott Gottreu

5 (1)

Learning jqPlot

5 (1)

By: Scott Gottreu

Overview of this book

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Getting Started

1. Getting Started

Reviewing the components of a chart

Getting a promotion

Creating a jqPlot chart

Passing in both x and y values

Using dates for the x axis

Adding multiple data series

Adding a legend

Learning questions

Summary

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

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

Working with remote data sources

Adding a fill between two lines

Understanding area and stacked area charts

Creating an area chart

Creating a stacked area chart with revenue

Understanding trend lines

Adding trend lines

Understanding scatterplot charts

Extending the data renderer

Creating a scatterplot chart

Learning questions

Summary

3. Bar Charts and Digging into Data

3. Bar Charts and Digging into Data

Building bars of data

Adding styles to our bar chart

Creating charts with multiple data series

Adding trend lines to selected product categories

Expanding our datasets with event handlers

Adding an event handler for our stacked area chart

Learning questions

Summary

4. Horizontal and Stacked Bar Charts

4. Horizontal and Stacked Bar Charts

Turning our chart on its side

Removing axis labels and adding point labels

Adding a threshold to our chart

Learning questions

Summary

5. Pie Charts and Donut Charts

5. Pie Charts and Donut Charts

Limitations of pie charts

Making a pie chart with many data points

Styling our chart and adding functionality

Building a pie chart with empty wedges

Creating a pie chart for each division with product category revenue

Building a donut chart to show web browser usage

Learning questions

Summary

6. Spice Up Your Charts with Animation, Tooltips, and Highlighting

6. Spice Up Your Charts with Animation, Tooltips, and Highlighting

Using the cursor plugin to see the data behind our charts

Making the tooltip follow the mouse and adding cursor lines

Connecting the cursor with the legend

Using the highlighter plugin

Extending the highlighter plugin to the legend

Animating line charts

Animating bar charts with varying speeds

Learning questions

Summary

7. Stock Market Charts – OHLC and Candlestick Charts

7. Stock Market Charts – OHLC and Candlestick Charts

Looking at the employee stock option plan

Explaining OHLC charts

Explaining candlestick charts

Building an OHLC chart with last quarter's stock data

Building a candlestick chart with filtered data

Zooming in on a colored candlestick chart

Adding tooltips to canvas overlay lines

Modifying the data array and the tooltip

Learning questions

Summary

8. Bubble Charts, Block Plots, and Waterfalls

8. Bubble Charts, Block Plots, and Waterfalls

Creating a waterfall chart with expenses against revenue

Building a bubble chart

Building a block plot

Understanding waterfall charts

Creating a waterfall chart showing expenses against revenue

Learning questions

Summary

9. Showing Real-time Data with Our Charts

9. Showing Real-time Data with Our Charts

Creating a meter gauge chart with Wi-Fi users

Refreshing our chart from remote data

Using the replot method to change remote datasets

Dynamically building our chart when the page loads

Learning questions

Summary

10. Beautifying and Extending Your Charts

10. Beautifying and Extending Your Charts

Nailing down the charts for our dashboard

Changing the background color of our chart

Canvas versus CSS

Using the second xaxis and smoothing lines

Setting negative colors on a bar chart

Creating reusable plot objects

Using objects to piece together our chart

Reaping the benefits of the DRY code

Learning questions

Summary

11. Bringing it All Together

11. Bringing it All Together

Combining four charts into a dashboard

Creating a divisional dashboard

Mixing renderers

Adding extra canvas elements

Modifying an existing plugin

Learning questions

Summary

A. Answers

Chapter 1, Getting Started

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

Chapter 3, Bar Charts and Digging into Data

Chapter 4, Horizontal and Stacked Bar Charts

Chapter 5, Pie Charts and Donut Charts

Chapter 6, Spice Up Your Charts with Animation, Tooltips, and Highlighting

Chapter 7, Stock Market Charts – OHLC and Candlestick Charts

Chapter 8, Bubble Charts, Block Plots, and Waterfalls

Chapter 9, Showing Real-time Data with Our Charts

Chapter 10, Beautifying and Extending Your Charts

Chapter 11, Bringing it All Together

Index

Index

Modifying the data array and the tooltip

In order to remedy this problem, we need the closing price to be the first y value in our data array. We can accomplish this by modifying our dataPull function. We save the previous code as a new file and start making our changes executing the following steps:

We create a new array called stocks, and then loop through the remoteData array. We add the date, which is the first element, and then we add the closing price, which is the last element in the remoteData array:
```
...
  function dataPull(remoteData,options) {
    var stocks = new Array;
    for(var x=0;x<remoteData.length;x++){
      stocks[x] = new Array;
      stocks[x].push(remoteData[x][0],remoteData[x][4]);
```
We now have our x and y values, so we loop through the rest of the prices in the child array. Once we finish working through remoteData, we return our new array to jqPlot:
```
      for(var y=1;y<remoteData[x].length;y++){
        stocks[x].push(remoteData[x][y]);
      }
    }
    return...
```

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning jqPlot

Search

Your notes and bookmarks