In the previous blog we introduced the FinancialChart control. We outlined some of the important features and provided instructions on how to get the necessary files; introduced how to use the base class; outlined what each of the chart types do and what they accomplished; and looked at the different chart types. In this blog, let's work with a simple candlestick chart and add some additional functionality to it—customize some properties, add analytics, and provide some styling.
Simple Candlestick Chart
Reference the documentation and the first blog to gather all of the scripts and references in addition to creating your AngularJS application. We'll be working with the same dataset to keep the samples consistent. Go ahead and add a FinancialChart to your markup by adding the following code:
<wj-financial-chart items-source="data" binding-x="date" chart-type="Candlestick">
<wj-financial-chart-series binding="high,low,open,close"></wj-financial-chart-series>
</wj-financial-chart>
At this point, our chart should load our dataset.
This chart's missing a few basic things, so let's go ahead and add them.
Title and Legend
The item all we'll add is a title. Title it "Facebook’s Stock Candlestick". This is pretty easy—add a single attribute to our wj-financial-chart element.
header="Facebook's Stock Candlestick"
The next thing we want to do is add a legend to our chart so our users know what the candlesticks describe. For simplicity's sake, we'll call the first series Facebook Data by adding a single attribute to our series element.
name="Facebook Data"
Now that we have our legend, let's move it over to the left side of the chart. We'll need to add a new element to our chart, above our series. Once we've added our new element, we need to give it an attribute of position that allows us to move the legend around the chart.
<wj-flex-chart-legend position="Left"></wj-flex-chart-legend>
Your title appears at the top, by default.
Markers
The markers on the FinancialCharts consists of a text area with their content reflecting data point values. You can customize it to either have vertical, horizontal, or both. This is pretty straightforward, as well: add a line marker element inside the chart element.
<wj-flex-chart-line-marker lines="Both"
interaction="Move"
alignment="Auto"
>
</wj-flex-chart-line-marker>
Here we give our alignment the text enum property of Auto. This allows it to adjust automatically so that it stays inside the boundaries of the plot area. It's worth noting that you can customize the string in the above tooltip.
Trend Lines
Trend lines are used to represent trends in data and examine the problems of prediction. The following example indicates moving average trend based on the past prices. We can change the period and type of the moving average line. The trend lines are provided via the following include:
<script src="scripts/wijmo.chart.finance.analytics.js"></script>
- period: a positive integer value.
- type: the calculation type of the moving average line. This includes Simple, Weighted, Exponential and Triangular types
As you increase the period of the calculation, the trend line begins to normalize itself. Adding a trend line to your application requires only a new markup element:
<wj-flex-chart-moving-average
binding="high,low,open,close"
name="Weighted Trendline"
period="8"
type ="Weighted">
</wj-flex-chart-moving-average>
The name of the trend line will appear in the legend, if you have one. The period is a numeric value; the type is the string of the four types listed above.
Using trend lines can be greatly beneficial when it comes to analyzing large datasets. I'm not an expert on data analysis, but the charts do have some great built-in analytic tools.
Event Annotation
In addition to adding trend lines for data analysis, the FinancialChart offers an annotation layer on top of the chart. The layer is a text area and can contain plain text, URLs, and charts, among other types of markup. You can use annotations to display events or news related to a certain data point, such as a date. You can provide symbols on the chart to represent an occurrence on that date. You can also allow the user to hover over the data point and read more about the underlying cause for event annotation. In order to introduce Annotations, we need to introduce a new data set called box.json. Here's a plnkr you can open up to see the live code. We need to add an additional script to include the extensions:
<script src="wijmo.chart.annotation.js"></script>
To begin, we need to add an annotation layer to our markup.
<wj-flex-chart-annotation-layer> </wj-flex-chart-annotation-layer>
Next, let's look at the structure of our box-annotations.json:
{ "title": "string",
"publicationData": "mm/dd/yyyy",
"dataIndex": number
}
Next we'll retrieve the annotation data in our controller:
$http.get('box-annotations.json')
.success(function(annotations) {
$scope.annotations = annotations;
}).error(function(error) {
console.log(error);
});
Finally, in our markup, we need to add the annotations themselves. We'll also define some properties of the annotations, stylize it, and bind it to our json data from our controller.
<wj-flex-chart-annotation ng-repeat="a in annotations"
type="Ellipse"
content="E"
height="30"
width="30"
attachment="DataIndex"
tooltip="{{ a.description }}"
point-index="{{ a.dataIndex }}">
</wj-flex-chart-annotation>
This annotation example is fairly basic, so I encourage you to play around around with it.
Resources
MESCIUS inc.