| <?xml version="1.0" encoding="utf-8"?> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <js:View xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:js="library://ns.apache.org/royale/basic" |
| initComplete="onInitComplete(event)"> |
| <fx:Script> |
| <![CDATA[ |
| import models.ProductsModel; |
| |
| import org.apache.royale.events.Event; |
| |
| private function onInitComplete(event:Event):void |
| { |
| var m:ProductsModel = applicationModel as ProductsModel; |
| m.generateWaves(50); |
| waveChart.dataProvider = m.wave1; |
| } |
| ]]> |
| </fx:Script> |
| |
| <fx:Style> |
| @namespace js "library://ns.apache.org/royale/basic"; |
| .AllCharts { |
| border-width: 1px; |
| padding-left: 2px; |
| padding-top: 10px; |
| padding-bottom: 2px; |
| padding-right: 10px; |
| } |
| </fx:Style> |
| |
| <js:Label id="output" x="50" y="30" width="100" /> |
| |
| <js:ColumnChart id="columnChart" x="20" y="20" width="400" height="200" className="AllCharts"> |
| <js:beads> |
| <js:ConstantBinding |
| sourceID="applicationModel" |
| sourcePropertyName="productList" |
| destinationPropertyName="dataProvider" /> |
| <js:HorizontalCategoryAxisBead categoryField="title" /> |
| <js:VerticalLinearAxisBead valueField="sales2013" /> |
| </js:beads> |
| <js:series> |
| <js:ColumnSeries yField="sales2013"> |
| <js:itemRenderer> |
| <fx:Component> |
| <js:BoxItemRenderer> |
| <js:fill> |
| <js:SolidColor color="#FF964D" alpha="1.0" /> |
| </js:fill> |
| </js:BoxItemRenderer> |
| </fx:Component> |
| </js:itemRenderer> |
| </js:ColumnSeries> |
| <js:ColumnSeries yField="sales2014"> |
| <js:itemRenderer> |
| <fx:Component> |
| <js:BoxItemRenderer> |
| <js:fill> |
| <js:SolidColor color="#964DFF" alpha="1.0" /> |
| </js:fill> |
| </js:BoxItemRenderer> |
| </fx:Component> |
| </js:itemRenderer> |
| </js:ColumnSeries> |
| </js:series> |
| </js:ColumnChart> |
| |
| <js:BarChart id="barChart" x="500" y="20" width="400" height="300" className="AllCharts"> |
| <js:beads> |
| <js:ConstantBinding |
| sourceID="applicationModel" |
| sourcePropertyName="productList" |
| destinationPropertyName="dataProvider" /> |
| <js:VerticalCategoryAxisBead categoryField="title" /> |
| <js:HorizontalLinearAxisBead valueField="sales2013" /> |
| </js:beads> |
| <js:series> |
| <js:BarSeries xField="sales2013"> |
| <js:itemRenderer> |
| <fx:Component> |
| <js:BoxItemRenderer> |
| <js:fill> |
| <js:SolidColor color="#FF964D" alpha="1.0" /> |
| </js:fill> |
| </js:BoxItemRenderer> |
| </fx:Component> |
| </js:itemRenderer> |
| </js:BarSeries> |
| <js:BarSeries xField="sales2014"> |
| <js:itemRenderer> |
| <fx:Component> |
| <js:BoxItemRenderer> |
| <js:fill> |
| <js:SolidColor color="#964DFF" alpha="1.0" /> |
| </js:fill> |
| </js:BoxItemRenderer> |
| </fx:Component> |
| </js:itemRenderer> |
| </js:BarSeries> |
| </js:series> |
| </js:BarChart> |
| |
| <js:StackedColumnChart id="stackedChart" x="20" y="300" width="400" height="200" className="AllCharts"> |
| <js:beads> |
| <js:ConstantBinding |
| sourceID="applicationModel" |
| sourcePropertyName="productList" |
| destinationPropertyName="dataProvider" /> |
| <js:HorizontalCategoryAxisBead categoryField="title" /> |
| </js:beads> |
| <js:series> |
| <js:ColumnSeries yField="sales2013"> |
| <js:itemRenderer> |
| <fx:Component> |
| <js:BoxItemRenderer> |
| <js:fill> |
| <js:SolidColor color="#FF964D" alpha="0.5" /> |
| </js:fill> |
| <js:stroke> |
| <js:SolidColorStroke color="#FF964D" weight="2" /> |
| </js:stroke> |
| </js:BoxItemRenderer> |
| </fx:Component> |
| </js:itemRenderer> |
| </js:ColumnSeries> |
| <js:ColumnSeries yField="sales2014"> |
| <js:itemRenderer> |
| <fx:Component> |
| <js:BoxItemRenderer> |
| <js:fill> |
| <js:SolidColor color="#964DFF" alpha="0.5" /> |
| </js:fill> |
| <js:stroke> |
| <js:SolidColorStroke color="#964DFF" weight="2" /> |
| </js:stroke> |
| </js:BoxItemRenderer> |
| </fx:Component> |
| </js:itemRenderer> |
| </js:ColumnSeries> |
| </js:series> |
| </js:StackedColumnChart> |
| |
| <js:StackedBarChart id="stackedBarChart" x="500" y="400" width="400" height="300" className="AllCharts"> |
| <js:beads> |
| <js:ConstantBinding |
| sourceID="applicationModel" |
| sourcePropertyName="productList" |
| destinationPropertyName="dataProvider" /> |
| <js:VerticalCategoryAxisBead categoryField="title" /> |
| </js:beads> |
| <js:series> |
| <js:BarSeries xField="sales2013"> |
| <js:itemRenderer> |
| <fx:Component> |
| <js:BoxItemRenderer> |
| <js:fill> |
| <js:SolidColor color="#FF964D" alpha="0.5" /> |
| </js:fill> |
| <js:stroke> |
| <js:SolidColorStroke color="#FF964D" weight="2" /> |
| </js:stroke> |
| </js:BoxItemRenderer> |
| </fx:Component> |
| </js:itemRenderer> |
| </js:BarSeries> |
| <js:BarSeries xField="sales2014"> |
| <js:itemRenderer> |
| <fx:Component> |
| <js:BoxItemRenderer> |
| <js:fill> |
| <js:SolidColor color="#964DFF" alpha="0.5" /> |
| </js:fill> |
| <js:stroke> |
| <js:SolidColorStroke color="#964DFF" weight="2" /> |
| </js:stroke> |
| </js:BoxItemRenderer> |
| </fx:Component> |
| </js:itemRenderer> |
| </js:BarSeries> |
| </js:series> |
| </js:StackedBarChart> |
| |
| <js:PieChart id="pieChart" x="20" y="550" width="200" height="200" className="AllCharts"> |
| <js:beads> |
| <js:ConstantBinding |
| sourceID="applicationModel" |
| sourcePropertyName="productList" |
| destinationPropertyName="dataProvider" /> |
| </js:beads> |
| <js:series> |
| <js:PieSeries dataField="sales2013"> |
| <js:itemRenderer> |
| <fx:Component> |
| <js:WedgeItemRenderer /> |
| </fx:Component> |
| </js:itemRenderer> |
| </js:PieSeries> |
| </js:series> |
| </js:PieChart> |
| |
| <js:LineChart id="lineChart" x="500" y="750" width="400" height="200" className="AllCharts"> |
| <js:beads> |
| <js:ConstantBinding |
| sourceID="applicationModel" |
| sourcePropertyName="productList" |
| destinationPropertyName="dataProvider" /> |
| <js:HorizontalLinearAxisBead valueField="detail" /> |
| <js:VerticalLinearAxisBead valueField="sales2013" /> |
| <js:LineChartLinearVsLinearLayout /> |
| </js:beads> |
| <js:series> |
| <js:LineSeries xField="detail" yField="sales2013"> |
| <js:itemRenderer> |
| <fx:Component> |
| <js:BoxItemRenderer> |
| <js:fill> |
| <js:SolidColor color="#FF964D" alpha="1" /> |
| </js:fill> |
| </js:BoxItemRenderer> |
| </fx:Component> |
| </js:itemRenderer> |
| <js:lineSegmentRenderer> |
| <fx:Component> |
| <js:LineSegmentItemRenderer> |
| <js:stroke> |
| <js:SolidColorStroke color="#FF964D" weight="3" alpha="0.8" /> |
| </js:stroke> |
| </js:LineSegmentItemRenderer> |
| </fx:Component> |
| </js:lineSegmentRenderer> |
| </js:LineSeries> |
| <js:LineSeries xField="detail" yField="sales2014"> |
| <js:itemRenderer> |
| <fx:Component> |
| <js:BoxItemRenderer> |
| <js:fill> |
| <js:SolidColor color="#964DFF" alpha="1" /> |
| </js:fill> |
| </js:BoxItemRenderer> |
| </fx:Component> |
| </js:itemRenderer> |
| <js:lineSegmentRenderer> |
| <fx:Component> |
| <js:LineSegmentItemRenderer> |
| <js:stroke> |
| <js:SolidColorStroke color="#964DFF" weight="3" alpha="0.8" /> |
| </js:stroke> |
| </js:LineSegmentItemRenderer> |
| </fx:Component> |
| </js:lineSegmentRenderer> |
| </js:LineSeries> |
| </js:series> |
| </js:LineChart> |
| |
| <js:LineChart id="waveChart" x="20" y="800" width="400" height="200" className="AllCharts"> |
| <js:beads> |
| <js:ConstantBinding |
| sourceID="applicationModel" |
| sourcePropertyName="wave1" |
| destinationPropertyName="dataProvider" /> |
| <js:HorizontalLinearAxisBead valueField="x" /> |
| <js:VerticalLinearAxisBead valueField="sin" minimum="-1" maximum="1" /> |
| <js:LineChartLinearVsLinearLayout /> |
| </js:beads> |
| <js:series> |
| <js:LineSeries xField="x" yField="sin"> |
| <js:lineSegmentRenderer> |
| <fx:Component> |
| <js:LineSegmentItemRenderer> |
| <js:stroke> |
| <js:SolidColorStroke color="#964DFF" weight="5" alpha="1" /> |
| </js:stroke> |
| </js:LineSegmentItemRenderer> |
| </fx:Component> |
| </js:lineSegmentRenderer> |
| </js:LineSeries> |
| <js:LineSeries xField="x" yField="cos"> |
| <js:lineSegmentRenderer> |
| <fx:Component> |
| <js:LineSegmentItemRenderer> |
| <js:stroke> |
| <js:SolidColorStroke color="#FF964D" weight="5" alpha="1" /> |
| </js:stroke> |
| </js:LineSegmentItemRenderer> |
| </fx:Component> |
| </js:lineSegmentRenderer> |
| </js:LineSeries> |
| </js:series> |
| </js:LineChart> |
| |
| </js:View> |