In the first part of this tutorial we’ve added AmStockChart component to our Flex application. Let’s work a little bit further on that app.
More Charts
Let’s add another chart (sub-chart) to our stock chart. As you probably remember from part 1, we have only one data field in our data provider. Let’s address that first by adding another value field in our generateChartdata() method:
1: ...2: var b1:Number = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
3: 4: chartData1.addItem({date:newDate, a:a1, b:b1}); 5: ...Now I’ll add another FieldMapping in the DataSet object:
1: <amcharts:DataSet dataProvider="{chartData1}"
2: categoryField="date"
3: title="First data set">
4: <amcharts:fieldMappings>
5: <amcharts:FieldMapping fromField="a" toField="value"/>
6: <amcharts:FieldMapping fromField="b" toField="volume"/>
7: </amcharts:fieldMappings>
8: </amcharts:DataSet>
and another StockPanel for our second chart the same way as we did for the first:
1: <amcharts:StockPanel>
2: <amcharts:stockGraphs>
3: <amcharts:StockGraph valueField="volume" />
4: </amcharts:stockGraphs>
5: </amcharts:StockPanel>
When we run our application this is what we see:
This way you can add a virtually unlimited number of sub-charts to the stock chart. Now let’s customize this view a little.
Customizing the View
First let’s make our second (lower) chart a column chart instead of line. We do this by setting type property of StockGraph object to “column”. By default graphs are rendered with transparent fill. This is not how we want our columns to look, so we set fillAlphas property to an array with a single value of 1. This property is of an array type so you can make gradient fills, but we won’t do it this time. At the same time let’s make column outlines transparent so they don’t stick together by setting lineAlpha to 0.
Both charts have exactly the same height. This is not the look we are after. Let’s make first chart occupy 70% of the vertical space and second one 30%. This is done via height property of the StockPanel,
Also a category axis (date/time x-axis) is shown in both charts which is redundant. Let’s leave it in the bottom chart only by setting showCategoryAxis property of the top chart to false.
Here’s the panels code with these modifications:
1: <amcharts:panels>
2: 3: <amcharts:StockPanel height="70%" showCategoryAxis="false">
4: <amcharts:stockGraphs>
5: <amcharts:StockGraph valueField="value" />
6: </amcharts:stockGraphs>
7: </amcharts:StockPanel>
8: 9: <amcharts:StockPanel height="30%">
10: <amcharts:stockGraphs>
11: <amcharts:StockGraph valueField="volume"
12: type="column"
13: fillAlphas="[1]"
14: lineAlpha="0"
15: />
16: </amcharts:stockGraphs>
17: </amcharts:StockPanel>
18: 19: </amcharts:panels>
And this is how it looks in browser:
Legends
Let’s add some context to this view in a form of legends over the chart to display titles and current values for the hovered data points. First let’s add titles to our panels via title property. First charts represent values so we call it “Value” and the second one is for volumes so it gets a “Volume” title.
To add legends to panels we just need to add StockLegend objects to stockLegend property of the panel.
Here’s the code for the panels with titles and legends:
1: <amcharts:StockPanel title="Value"
2: height="70%"
3: showCategoryAxis="false">
4: <amcharts:stockGraphs>
5: <amcharts:StockGraph valueField="value" />
6: </amcharts:stockGraphs>
7: <amcharts:stockLegend>
8: <amcharts:StockLegend/>
9: </amcharts:stockLegend>
10: </amcharts:StockPanel>
11: 12: <amcharts:StockPanel title="Volume"
13: height="30%">
14: <amcharts:stockGraphs>
15: <amcharts:StockGraph valueField="volume"
16: type="column"
17: fillAlphas="[1]"
18: lineAlpha="0"
19: />
20: </amcharts:stockGraphs>
21: <amcharts:stockLegend>
22: <amcharts:StockLegend/>
23: </amcharts:stockLegend>
24: </amcharts:StockPanel>
When we launch the application and hover of the chart legends show values for the hovered date:
Here’s the complete source code for this part:
1: <?xml version="1.0" encoding="utf-8"?>
2: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3: xmlns:s="library://ns.adobe.com/flex/spark"
4: xmlns:mx="library://ns.adobe.com/flex/mx"
5: xmlns:amcharts="http://www.amcharts.com/com_internal"
6: creationComplete="generateChartData()"
7: >
8: <fx:Script>
9: <![CDATA[
10: import mx.collections.ArrayCollection; 11: 12: [Bindable] 13: private var chartData1:ArrayCollection = new ArrayCollection(); 14: 15: private function generateChartData():void 16: { 17: var firstDate:Date = new Date(); 18: firstDate.setDate(firstDate.getDate() - 1000); 19: 20: for(var i:Number = 0; i < 1000; i++)
21: { 22: var newDate:Date = new Date(firstDate); 23: 24: newDate.setDate(newDate.getDate() + i); 25: 26: var a1:Number = Math.round(Math.random() * (40 + i)) + 100 + i; 27: var b1:Number = Math.round(Math.random() * (1000 + i)) + 500 + i * 2; 28: 29: chartData1.addItem({date:newDate, a:a1, b:b1}); 30: } 31: } 32: ]]>
33: </fx:Script>
34: 35: <amcharts:AmStockChart x="10" y="10"
36: width="640" height="400">
37: 38: <amcharts:dataSets>
39: 40: <amcharts:DataSet dataProvider="{chartData1}"
41: categoryField="date"
42: title="First data set">
43: <amcharts:fieldMappings>
44: <amcharts:FieldMapping fromField="a" toField="value"/>
45: <amcharts:FieldMapping fromField="b" toField="volume"/>
46: </amcharts:fieldMappings>
47: </amcharts:DataSet>
48: 49: </amcharts:dataSets>
50: 51: <amcharts:panels>
52: 53: <amcharts:StockPanel title="Value"
54: height="70%"
55: showCategoryAxis="false">
56: <amcharts:stockGraphs>
57: <amcharts:StockGraph valueField="value" />
58: </amcharts:stockGraphs>
59: <amcharts:stockLegend>
60: <amcharts:StockLegend/>
61: </amcharts:stockLegend>
62: </amcharts:StockPanel>
63: 64: <amcharts:StockPanel title="Volume"
65: height="30%">
66: <amcharts:stockGraphs>
67: <amcharts:StockGraph valueField="volume"
68: type="column"
69: fillAlphas="[1]"
70: lineAlpha="0"
71: />
72: </amcharts:stockGraphs>
73: <amcharts:stockLegend>
74: <amcharts:StockLegend/>
75: </amcharts:stockLegend>
76: </amcharts:StockPanel>
77: 78: </amcharts:panels>
79: 80: </amcharts:AmStockChart>
81: </s:Application>
Conclusion
In this part we’ve added another panel (chart) to our stock chart, changed it’s type, slightly customized the look and size of the panels, and added legends. In the next parts I’ll show you how display a graph in the scrollbar, control zooming, compare multiple datasets and more.
Stay tuned…
