I have migrated Flex 3 application to Flash 4 AIR application. The same code below is showing charts differently in two different scenarios. The first image is the correct one where as the second one is not showing correctly. It seems vertical axes are not updating dynamically. Please let me know if any change is required so that both shows the graphs.
<mx:LineChart id="lcPatientChart" showDataTips="true" horizontalCenter="0" width="950">
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:horizontalAxis>
<mx:DateTimeAxis dataUnits="months" labelUnits="months" alignLabelsToUnits="false" labelFunction="formatDate"/>
</mx:horizontalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer placement="left" axis="{v1}"/>
<mx:AxisRenderer placement="right" axis="{v2}"/>
<mx:AxisRenderer axis="{v3}" minorTickPlacement="none" tickPlacement="none" labelGap="0"
showLabels="false" showLine="false" visible="false" includeInLayout="false"/>
<mx:AxisRenderer axis="{v4}" minorTickPlacement="none" tickPlacement="none" labelGap="0"
showLabels="false" showLine="false" visible="false" includeInLayout="false"/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:LineSeries id="lsCB4Abs" xField="assayDate" yField="cd4Abs"
dataProvider="{_cd4ChartData}" displayName="CD4"
fill="{scBlue}" stroke="{sBlue}" lineStroke="{lsBlue}" visible="true" >
<mx:verticalAxis>
<mx:LinearAxis id="v1" title="CD4 Count (Cells/mm3)"/>
</mx:verticalAxis>
<mx:itemRenderer>
<mx:Component>
<mx:DiamondItemRenderer />
</mx:Component>
</mx:itemRenderer>
</mx:LineSeries>
<mx:LineSeries id="lsViralLoad" xField="assayDate" yField="viralLoad"
dataProvider="{_vlChartData}" displayName="Viral Load"
fill="{scGreen}" stroke="{sGreen}" lineStroke="{lsGreen}" visible="true">
<mx:verticalAxis>
<mx:LinearAxis id="v2" title="Viral Load (Copies/ml)"/>
</mx:verticalAxis>
<mx:itemRenderer>
<mx:Component>
<mx:DiamondItemRenderer/>
</mx:Component>
</mx:itemRenderer>
</mx:LineSeries>
<mx:AreaSeries id="asTherapy" xField="therapyDate" yField="therapy" form="horizontal" displayName="Therapy"
areaStroke="{sGreenTransparent}" areaFill="{scGreenTransparent}" dataProvider="{_therapyChartData}" visible="true">
<mx:verticalAxis>
<mx:LinearAxis id="v3"/>
</mx:verticalAxis>
</mx:AreaSeries>
<component:CustomPlotSeries id="psSpecimen" dataProvider="{_specimenChartData}"
xField="specimenDate" yField="specimen"
displayName="Specimen"
fill="{scRedTransparent}" stroke="{sRedTransparent}" visible="true">
<component:verticalAxis>
<mx:LinearAxis id="v4" maximum="1.05" minimum="0"/>
</component:verticalAxis>
<component:itemRenderer >
<mx:Component>
<mx:CircleItemRenderer />
</mx:Component>
</component:itemRenderer>
</component:CustomPlotSeries>
</mx:series>
</mx:LineChart>
Related
I have a neat chart that is rendering overlaid columns with values in excess of 6000 but my vertical axis stays at 0-100, as if my dataProvider was being ignored.
The problem here is with "msAxis"
autoAdjust didn't change anything. Do I need to force its values manually?
<mx:ColumnChart xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
dataTipFunction="formatDataTip"
fontSize="12"
showDataTips="true"
initialize="init()"
>
<mx:horizontalAxis>
<mx:CategoryAxis id="haxis"
categoryField.time="t"
categoryField.exchange="x"
title.time="Time"
title.exchange="Exchange"
labelFunction.time="renderTime"
labelFunction.exchange="renderExchange"
/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{msAxis}"
placement="left"
canDropLabels="true"/>
<mx:AxisRenderer axis="{oAxis}"
placement="right"
canDropLabels="true"
/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:ColumnSet type="overlaid">
<mx:verticalAxis>
<mx:LinearAxis id="msAxis" autoAdjust="true" />
</mx:verticalAxis>
<mx:series>
<mx:ColumnSeries
xField.time="t" xField.exchange="x"
yField="ml"
fill="{sc_red}"
displayName="Max Latency"
showDataEffect="{interpolateIn}"
/>
<mx:ColumnSeries
xField.time="t" xField.exchange="x"
yField="al"
fill="{sc_blue}"
displayName="Average Latency"
showDataEffect="{interpolateIn}"
/>
</mx:series>
</mx:ColumnSet>
<mx:LineSeries yField="o"
displayName="Orders"
showDataEffect="{interpolateIn}"
>
<mx:verticalAxis>
<mx:LinearAxis id="oAxis" interval="1" />
</mx:verticalAxis>
</mx:LineSeries>
</mx:series>
</mx:ColumnChart>
I think you should affect your series to their corresponding axis using the verticalAxis property.
Here is my question:
I have a hybrid chart that uses bars and lines
I want to add to the right vertical axis a horizontal line that represents a break even
<mx:ColumnChart id="cvpaOpenCloseRatio" x="79" y="107"
dataProvider="{CF_Closed_to_Opened_by_MonthResult.lastResult}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis id="categoryAxis" categoryField="Month"/>
</mx:horizontalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer placement="left" axis="{v1}"/>
<mx:AxisRenderer placement="right" axis="{v2}"/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:ColumnSeries id="columnSeries"
displayName="Total Closed"
yField="ClosedCount"
xField="Month"
>
<mx:verticalAxis>
<mx:LinearAxis id="v1" minimum="0" maximum="300"/>
</mx:verticalAxis>
</mx:ColumnSeries>
<mx:ColumnSeries id="columnSeries2"
displayName="Total Opened"
yField="OpenCount"
xField="Month"
></mx:ColumnSeries>
<mx:LineSeries id="columnSeries3" displayName="Closed/OpenRatio" yField="ClosedToOpenRatio" xField="Month"
>
<mx:verticalAxis>
<mx:LinearAxis id="v2" minimum="0" maximum="3" />
</mx:verticalAxis>
</mx:LineSeries>
<!--mx:LineSeries id="columnSeries4" displayName="Target" xField="Month" yField="1.5" verticalAxis="{v2}" horizontalAxis="{categoryAxis}" /-->
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{cvpaOpenCloseRatio}"/>
I was trying to achieve this with
<mx:LineSeries id="columnSeries4" displayName="Target" xField="Month" yField="1.5" verticalAxis="{v2}" horizontalAxis="{categoryAxis}" />
so to clarify the break even line is a horisontal line located at 1.5 with respect to the right side verticalAxis.
Thanks in advance
Nate
You were almost there, you just need to specify a custom item renderer for the line in the LineSeries. Example here.
I want to show multiple series on a chart.
But this would result in multiple axis, to avoid this I am trying to make some axis invisible.
Question:
When i set the axis renderer's invisible = false, there is a white space that is left behind.
Is there any way to avoid this white space from showing up ?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.charts.HitData;
import mx.collections.ArrayCollection;
[Bindable]
public var DS:ArrayCollection = new ArrayCollection([
{date:"22-Aug-05", expense:1575.9, tax:41.87, price: 4},
{date:"23-Aug-05", expense:NaN, tax:NaN,price: 4},
{date:"24-Aug-05", expense:1507.1, tax:42.77,price:5 },
{date:"25-Aug-05", expense:1568.8 ,tax:48.06, price:5},
]);
public function dtFunc(hd:HitData):String {
if(""+hd.item.expense == "NaN")
return "";
else
return hd.item.expense ;
}
]]></mx:Script>
<mx:SolidColor id="sc1" color="blue" alpha=".8"/>
<mx:Stroke id="s1" color="blue" weight="1"/>
<mx:Panel title="Column Chart With Multiple Axes">
<mx:CartesianChart id="myChart" showDataTips="true" dataTipFunction="dtFunc">
<mx:horizontalAxis>
<mx:CategoryAxis id="h1" categoryField="date"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer placement="bottom" axis="{h1}"/>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer placement="left" axis="{v1}"/>
<mx:AxisRenderer placement="left" axis="{v3}" visible="false"/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:ColumnSeries id="cs1"
horizontalAxis="{h1}"
dataProvider="{DS}"
yField="expense"
displayName="EXPENSE-BARCHART"
filterData="false"
>
<mx:verticalAxis>
<mx:LinearAxis id="v1" />
</mx:verticalAxis>
</mx:ColumnSeries>
<mx:LineSeries id="cs3" horizontalAxis="{h1}" dataProvider="{DS}" yField="price"
displayName="Price" form="step"
>
<mx:verticalAxis>
<mx:LinearAxis id="v3" />
</mx:verticalAxis>
</mx:LineSeries>
</mx:series>
</mx:CartesianChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
try adding attributes showLine="false" showLabels="false" tickPlacement="none" inside axisrenderer.
it works well for me, but I'm not sure if it is already too late for you. Hope it helps.
Apparently, it is not possible to have a chart with several independant horizontal axis.
What I am trying to achieve is :
display a bar chart, organized by any category
overlay a line (actually a single horizontal line) on top of it (to display some sort of threshold)
I tried doing the following :
[Bindable] public var columnsDataProvider : ArrayCollection =
new ArrayCollection([{"Category" : "Cat1", "Value" : 10},
{"Category" : "Cat2", "Value" : 20}]);
[Bindable] public var lineDataProvider : ArrayCollection =
new ArrayCollection([{"X" : 0, "Y" : 10},
{"X" : 1, "Y" : 10}]);
...
<mx:ColumnChart id="columnChart"
showDataTips="true"
columnWidthRatio="0.5"
paddingTop="10"
paddingLeft="5" paddingRight="5"
width="100%" height="100%">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{columnsDataProvider}" categoryField="Category"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries id="series1" yField="Value" xField="Carrier" dataProvider="{columnsDataProvider}">
<mx:horizontalAxis>
<mx:CategoryAxis id="axis1" categoryField="Category"/>
</mx:horizontalAxis>
</mx:ColumnSeries>
<mx:LineSeries id="series2" yField="Y" xField="X" dataProvider=" {lineDataProvider}">
<mx:horizontalAxis>
<mx:LinearAxis id="axis2"/>
</mx:horizontalAxis>
</mx:LineSeries>
</mx:series>
This is the closest to what I want, except that the line does not start span all the graphs vertically (it is drawn only between the two columns of my bar chart).
Is it possible to define a completely independant horizontal axis ?
I also tried drawing directly on the canvas, but the canvas.lineTo() method only works in "data" coordinate ; I would need something that works in "chart/canvas/absolute/whatever" coordinates.
Any help on that ?
Thanks
PH
<mx:ColumnChart id="columnChart" dataProvider="{columnsDataProvider}"
showDataTips="true" columnWidthRatio="0.5"
paddingTop="10"
paddingLeft="5" paddingRight="5"
width="100%" height="100%">
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{h1}" />
<mx:AxisRenderer axis="{h2}" visible="false" />
</mx:horizontalAxisRenderers>
<mx:verticalAxis>
<mx:LinearAxis id="v1"/>
</mx:verticalAxis>
<mx:series>
<mx:ColumnSeries id="series1" yField="Value" xField="Category">
<mx:horizontalAxis>
<mx:CategoryAxis id="h1" categoryField="Category"/>
</mx:horizontalAxis>
</mx:ColumnSeries>
<mx:LineSeries yField="Y" xField="X" dataProvider="{lineDataProvider}">
<mx:horizontalAxis>
<mx:LinearAxis id="h2" maximum="1"/>
</mx:horizontalAxis>
</mx:LineSeries>
</mx:series>
I am wondering how will i proceed with the following requirement. I need to create a line chart of business data of the last 8 quarters. It is easy, but the requirement is that, there should not be a connection between last year's Q4 and this years Q1. In effect, using the same array collection i need to split the line chart so that it looks like two diffferent lines on the same chart. Any idea how to proceed with it.
Thanks, PK
First, you can add multiple line series by a criteria in your Array Collection:
<mx:series>
<mx:LineSeries
yField="Profit"
displayName="Profit"
/>
<mx:LineSeries
yField="Expenses"
displayName="Expenses"
/>
</mx:series>
You can change the width and color of the lines for each series by using the tag. Making each line a different stroke and color.
<?xml version="1.0"?>
<!-- charts/BasicLineStroke.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
]);
]]></mx:Script>
<mx:Panel title="Line Chart With Strokes">
<mx:LineChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries
yField="Profit"
displayName="Profit"
>
<mx:lineStroke>
<mx:Stroke
color="0x0099FF"
weight="20"
alpha=".2"
/>
</mx:lineStroke>
</mx:LineSeries>
<mx:LineSeries
yField="Expenses"
displayName="Expenses"
>
<mx:lineStroke>
<mx:Stroke
color="0x0044EB"
weight="20"
alpha=".8"
/>
</mx:lineStroke>
</mx:LineSeries>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>