I introduced the basics of the AnyChart product family in my previous article on SitePoint. This time I will tell you about how AnyStock is helpful in visualizing stock data as well as any large date and time-based data sets (and how to use it best).
AnyStock is part of the AnyChart JavaScript charting library that is marketed as a set of products:
- AnyChart – common chart types,
- AnyMap – geo maps and seat maps,
- AnyGantt – Project Gantt, Resource, and PERT charts,
- AnyStock – visualization of big date/time-based data sets, the features of which are the topic of this article.
Because AnyChart is essentially one big JavaScript charting library, the API is common and all charts are configured in pretty much the same way, sharing themes, settings, and ways to load data. That said, most of the things and approaches you'll learn about in this article can be easily applied to making other charts and maps.
AnyStock stock charts are a special type of charts that can effectively visualize big amounts of date/time-based data. It has many special features such as zoom with Scroller UI, synchronized plots, data grouping, and so on. AnyStock is completely compatible with all other AnyChart charts, and besides having all basic stock features such as grouping, streaming, scrolling, etc., AnyStock stocks also have multiple technical indicators built-in and ability to customize them.
To put it in a nutshell, in this article I will:
- explain the basics of how AnyStock works;
- demonstrate the beauty of data mapping;
- show how to load data directly from Google Finance into AnyStock;
- provide a sample of how the data mapping mechanism helps to use data from Xignite API in AnyStock.
AnyStock Quick Start
To start using AnyStock in your HTML page you need three simple things. The first one is a link to the library's JavaScript file. The second one is a block-level HTML element; here's a sample HTML template you may use:
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ift.tt/2wKnOzV"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
}
</style>
<title>AnyStock Basic Example</title>
</head>
<body>
<div id="container"></div>
<script>
// AnyStock code here
</script>
</body>
</html>
And here is a basic code to create a simple Japanese Candlestick chart, along with the volume on the second plot and scroller that shows volume as an area:
anychart.onDocumentReady(function() {
// data
var data = [
['2015-12-24', 511.53, 514.98, 505.79, 506.40, 1050016],
['2015-12-25', 512.53, 514.88, 505.69, 505.34, 1050015],
['2015-12-26', 511.83, 514.98, 505.59, 506.23, 1050016],
['2015-12-27', 511.22, 515.30, 505.49, 506.47, 1250016],
['2015-12-28', 510.35, 515.72, 505.23, 505.80, 1250015],
['2015-12-29', 510.53, 515.86, 505.38, 508.25, 1250018],
['2015-12-30', 511.43, 515.98, 505.66, 507.45, 1250017],
['2015-12-31', 511.50, 515.33, 505.99, 507.98, 1250017],
['2016-01-01', 511.32, 514.29, 505.99, 506.37, 1250016],
['2016-01-02', 511.70, 514.87, 506.18, 506.75, 1250016],
['2016-01-03', 512.30, 514.78, 505.87, 508.67, 1250018],
['2016-01-04', 512.50, 514.77, 505.83, 508.35, 1250018],
['2016-01-05', 511.53, 516.18, 505.91, 509.42, 1050019],
['2016-01-06', 511.13, 516.01, 506.00, 509.26, 1050019],
['2016-01-07', 510.93, 516.07, 506.00, 510.99, 1050110],
['2016-01-08', 510.88, 515.93, 505.22, 509.95, 1350019],
['2016-01-09', 509.12, 515.97, 505.15, 510.12, 1350110],
['2016-01-10', 508.53, 516.13, 505.66, 510.42, 1350110],
['2016-01-11', 508.90, 516.24, 505.73, 510.40, 1350110]
];
// create stock chart
chart = anychart.stock();
chart.title("AnyStock: Basic Sample");
// create data table and load data in it
table = anychart.data.table();
table.addData(data);
// map data - name fields
mapping = table.mapAs({open: 1, high: 2, low: 3, close: 4, value: 5});
// create series to show stock changes
chart.plot(0).candlestick(mapping).name("Stock name");
// create second plot and show trading volume there as a line
chart.plot(1).column(mapping).name("Volume");
// create series to show trading volume
chart.scroller().area(mapping);
// set HTML container and draw chart into it
chart.container('container').draw();
});
Data mapping
In the previous article about AnyChart, I demonstrated multiple ways to load data into the library, but an important and astonishing feature called data mapping has been left out.
What is data mapping? Let's delve into it a little bit, as we have already made good use of this feature in the basic AnyStock sample and will continue to use it in every sample in this article.
As this Wikipedia article on data mapping tells us:
In computing and data management, data mapping is the process of creating data element mappings between two distinct data models. Data mapping is used as the first step for a wide variety of data integration tasks including data transformation or data mediation between a data source and a destination.
One of the ways to translate this definition into layman's terms: "Data mapping is a rule that tells what is what in the data and prepares some data to be used somewhere else."
I know it may sound crude and an oversimplification, but it still might be helpful.
Now, let's look how the data mapping happens in the example above. First, we have an array with numbers and dates that we load into the table:
// data
var data = [
['2015-12-24', 511.53, 514.98, 505.79, 506.40, 1050016],
['2015-12-25', 512.53, 514.88, 505.69, 505.34, 1050015],
['2015-12-26', 511.83, 514.98, 505.59, 506.23, 1050016],
['2015-12-27', 511.22, 515.30, 505.49, 506.47, 1250016],
['2015-12-28', 510.35, 515.72, 505.23, 505.80, 1250015],
['2015-12-29', 510.53, 515.86, 505.38, 508.25, 1250018],
['2015-12-30', 511.43, 515.98, 505.66, 507.45, 1250017],
['2015-12-31', 511.50, 515.33, 505.99, 507.98, 1250017]
];
// create data table and load data in it
table = anychart.data.table();
table.addData(data);
There is nothing in this data that explains which columns contain prices or anything else. Open, high, low and close prices can come in any order. So how can the AnyStock library understand what's what? By using data mappings!
In this case, we need only one:
// map data - name fields
mapping = table.mapAs({open: 1, high: 2, low: 3, close: 4, value: 5});
As we see, the mapAs() method takes an object where we decide what names a field gets and then we pass this mapping to the functions that show series:
// create series to show stock changes
chart.plot(0).candlestick(mapping).name("Stock name");
// create second plot and show trading volume there as line
chart.plot(1).column(mapping).name("Volume");
// create series to show trading volume
chart.scroller().area(mapping);
AnyStock expects a mapping with open, high, low and close fields for a candlestick series and value for area and column and this allows us to use one mapping in this case.
Continue reading %Visualize Large Date and Time-Based Datasets with AnyStock%
by Roman Lubushkin via SitePoint
No comments:
Post a Comment