Problem solved: I just commented that line:
pricesHLOCChart.series.push(vwapLineSeries); // Same VWAP line series as
the AreaChart
Added the same series to two different charts causes trouble.
--- In flexcoders@yahoogroups.com, "k.sigiscar" <k.sigiscar@...> wrote:
>
> Hi,
>
> I have created a custom chart component with dynamic series.
>
> Everything but the VWAP series is shown.
>
> I have tried created an empty array, assign series to it then set the series
> of the priceAreaChart instead of pushing them one by one. To no avail.
>
> I have tried using invalidateSeriesStyles() as well.
>
> Any clue ?
>
>
>
> override protected function commitProperties():void
> {
> super.commitProperties();
>
>
> if(isTextColorStyleChanged)
> {
> isTextColorStyleChanged = false;
>
> pricesAreaChart.setStyle("color",
> textColorData);
> pricesHLOCChart.setStyle("color",
> textColorData);
> tradeVolumesChart.setStyle("color",
> textColorData);
> legend.setStyle("color", textColorData);
> }
>
> if(isFontFamilyStyleChanged)
> {
> isFontFamilyStyleChanged = false;
>
> pricesAreaChart.setStyle("fontFamily",
> fontFamilyData);
> pricesHLOCChart.setStyle("fontFamily",
> fontFamilyData);
> tradeVolumesChart.setStyle("fontFamily",
> fontFamilyData);
> legend.setStyle("fontFamily", fontFamilyData);
> }
>
> if(isFontWeightStyleChanged)
> {
> isFontWeightStyleChanged = false;
>
> pricesAreaChart.setStyle("fontWeight",
> fontWeightData);
> pricesHLOCChart.setStyle("fontWeight",
> fontWeightData);
> tradeVolumesChart.setStyle("fontWeight",
> fontWeightData);
> legend.setStyle("fontWeight", fontWeightData);
> }
>
> if(isFontSizeStyleChanged)
> {
> isFontSizeStyleChanged = false;
>
> pricesAreaChart.setStyle("fontSize",
> fontSizeData);
> pricesHLOCChart.setStyle("fontSize",
> fontSizeData);
> tradeVolumesChart.setStyle("fontSize",
> fontSizeData);
> legend.setStyle("fontSize", fontSizeData);
> }
>
> if(this._bDataDirty)
> {
> this._bDataDirty = false;
>
> // Reset charts series
>
> pricesAreaChart.series = [];
> pricesHLOCChart.series = [];
> tradeVolumesChart.series = [];
>
> // Remove Dynamic skin parts
>
> for each(var dynamicSkinPartObject:Object in
> dynamicPartsInstances) {
>
> removeDynamicPartInstance(dynamicSkinPartObject.partName,
> dynamicSkinPartObject.instance);
> }
>
> dynamicPartsInstances = [];
>
> // Remove all the data children (dingbats) from
> the DataDrawingCanvas in the annotationElements
>
> pricesAreaForegroundCanvas.removeAllChildren();
> pricesHLOCForegroundCanvas.removeAllChildren();
>
> // Create dingbats for the alert being
> investigated
> createDingBats();
>
> // Create charts series
>
> var columnSet:ColumnSet = new ColumnSet();
> columnSet.type = "stacked";
>
> for each(var item:StockDataItemDTO in
> dataProvider)
> {
> if(item.data)
> {
> // Create one data tip per
> market
> //createDataTip(item);
>
>
> //#######################################
> // Each StockDataItem
> represents a market
>
> //#######################################
>
>
> //-------------------------------------------------------------------------
> // Top chart: Spread, Level 1,
> VWAP - AreaSeries, LineSeries and HLOCSeries
>
> //-------------------------------------------------------------------------
>
> // Spread area
>
> var spreadAreaSeries:AreaSeries
> = new AreaSeries();
>
> spreadAreaSeries.dataProvider =
> item.data;
> spreadAreaSeries.xField =
> "date";
> spreadAreaSeries.yField =
> "high";
> spreadAreaSeries.minField =
> "low";
>
> var spreadAreaStroke:IStroke =
> new SolidColorStroke(item.areaColor, 1, 1);
> var
> spreadAreaFill:LinearGradient = new LinearGradient();
> var spreadAreaRatio:Number =
> 0.0;
> spreadAreaFill.rotation = 90;
> var gradientEntries:Array = [];
>
> for each(var spreadColor:Number
> in item.areaFill)
> {
> var
> gradientEntry:GradientEntry = new GradientEntry(spreadColor, spreadAreaRatio,
> 1.0);
>
> gradientEntries.push(gradientEntry);
> spreadAreaRatio += 0.33;
> }
>
> spreadAreaFill.entries =
> gradientEntries;
>
>
> spreadAreaSeries.setStyle("areaStroke", spreadAreaStroke);
>
> spreadAreaSeries.setStyle("areaFill", spreadAreaFill);
>
> spreadAreaSeries.setStyle("form", formData);
>
> pricesAreaChart.series.push(spreadAreaSeries);
>
>
> BindingUtils.bindProperty(spreadAreaSeries, "visible", item,
> "isSpreadDisplayed");
>
>
> // Level 1 (Price)
>
> var priceLineSeries:LineSeries
> = new LineSeries();
>
> priceLineSeries.dataProvider =
> item.data;
> priceLineSeries.xField = "date";
> priceLineSeries.yField =
> "price";
> var priceLineStroke:IStroke =
> new SolidColorStroke(item.priceColor, 1, 1);
>
> priceLineSeries.setStyle("lineStroke", priceLineStroke);
> var priceLineFilter:GlowFilter
> = new GlowFilter(0xFFFFFF, 2, 2, 2, 2, 1); // Glow the color of vwapColor
> //priceLineSeries.filters =
> [priceLineFilter];
>
> priceLineSeries.setStyle("form", formData);
>
> pricesAreaChart.series.push(priceLineSeries);
>
>
> BindingUtils.bindProperty(priceLineSeries, "visible", item,
> "isLevel1Displayed");
>
> // VWAP line
>
> var vwapLineSeries:LineSeries =
> new LineSeries();
>
> vwapLineSeries.dataProvider =
> item.data;
> vwapLineSeries.xField="date";
> vwapLineSeries.yField="vwap";
> var vwapLineStroke:IStroke =
> new SolidColorStroke(0xFFFFFF, 1, 1); // Line the same color for all markets
> (default is white)
>
> vwapLineSeries.setStyle("lineStroke", vwapLineStroke);
> var vwapFilter:GlowFilter = new
> GlowFilter(item.priceColor, 2, 2, 2, 2, 1); // Glow the color of vwapColor
> //vwapLineSeries.filters =
> [vwapFilter];
> vwapLineSeries.setStyle("form",
> formData);
>
> pricesAreaChart.series.push(vwapLineSeries);
>
>
> BindingUtils.bindProperty(vwapLineSeries, "visible", item, "isVWAPDisplayed");
>
> // HLOC
>
> var hlocSeries:HLOCSeries = new
> HLOCSeries();
>
> hlocSeries.dataProvider =
> item.data;
> hlocSeries.xField="date";
> hlocSeries.openField="open"
> hlocSeries.highField="high"
> hlocSeries.lowField="low"
> hlocSeries.closeField="close"
>
> hlocSeries.setStyle("openTickLength", 7);
>
> hlocSeries.setStyle("closeTickLength", 7);
> var hlocLineStroke:IStroke =
> new SolidColorStroke(item.hlocColor, 1, 1);
>
> hlocSeries.setStyle("lineStroke", hlocLineStroke);
> var closeTickStroke:IStroke =
> new SolidColorStroke(item.closeTickColor, 1, 1);
>
> hlocSeries.setStyle("closeTickStroke", closeTickStroke);
> var openTickStroke:IStroke =
> new SolidColorStroke(item.openTickColor, 1, 1);
>
> hlocSeries.setStyle("openTickStroke", openTickStroke);
>
> var highLineSeries:LineSeries =
> new LineSeries();
>
> highLineSeries.dataProvider =
> item.data;
> highLineSeries.xField = "date";
> highLineSeries.yField = "high";
>
> highLineSeries.setStyle("lineStroke", spreadAreaStroke);
> highLineSeries.setStyle("form",
> formData);
>
> var lowLineSeries:LineSeries =
> new LineSeries();
>
> lowLineSeries.dataProvider =
> item.data;
> lowLineSeries.xField = "date";
> lowLineSeries.yField = "low";
>
> lowLineSeries.setStyle("lineStroke", spreadAreaStroke);
> lowLineSeries.setStyle("form",
> formData);
>
>
> pricesHLOCChart.series.push(hlocSeries);
>
> pricesHLOCChart.series.push(vwapLineSeries); // Same VWAP
> line series as the AreaChart
>
> pricesHLOCChart.series.push(highLineSeries);
>
> pricesHLOCChart.series.push(lowLineSeries);
>
>
> //----------------------------------------------
> // Bottom chart: Volume of
> trades - ColumnSeries
>
> //----------------------------------------------
>
> var
> volumeColumnSeries:ColumnSeries = new ColumnSeries();
>
> volumeColumnSeries.dataProvider
> = item.data;
>
> volumeColumnSeries.xField="date";
>
> volumeColumnSeries.yField="volume";
>
> volumeColumnSeries.setStyle("stroke", spreadAreaStroke); // Same values as
> the spread
>
> volumeColumnSeries.setStyle("fill", spreadAreaFill); // Same values as
> the spread
> volumeColumnSeries.displayName
> = item.marketName;
>
> columnSet.series.push(volumeColumnSeries);
> }
> }
>
> tradeVolumesChart.series = columnSet.series;
>
>
> //-------------------------------------------------------------------------------------------------------------------------
> // Update the timeline dataProvider with the
> first item whose data is not null (the date range for all markets is the same)
>
> //-------------------------------------------------------------------------------------------------------------------------
>
> var dataProviderAC:ArrayCollection =
> dataProvider as ArrayCollection;
> var itemData:ArrayCollection;
>
> if(dataProviderAC.length > 0)
> {
> for each(var market:StockDataItemDTO in
> dataProviderAC)
> {
> if(market.data)
> {
> itemData = market.data;
> timeLine.dataProvider =
> itemData;
>
> break;
> }
> }
> }
> }
>
> // Reset price at time of order line on both price and
> HLOC canvases
>
> pricesAreaBackgroundCanvas.clear();
> pricesHLOCBackgroundCanvas.clear();
>
> invalidateDisplayList();
> }
>
> Best regards,
> Karl.
>
