dotted navigation using Adobe Flex 3 or 4 - apache-flex

I have a requirement of showing a pie chart with different data using 'dotted navigation'.
Below is a sample I need to implement similarly using Flex
< * * * * * >
If a user clicks left or right arrows, I need to show a pie chart with different data accordingly.
Do we have any component like this in Adobe Flex?
Anyone have any suggestion how we can implement it using Adobe Flex 3 or 4?
Many Thanks
Pavan

You can use standard List or a Repeater. Make it the right size and set scrollPosition accordingly.

Related

Can i make tree graph where button means leaf?

id like to do something like tree graph with buttons. Idk how to explain my idea so ive created image. I build my website via Elementor. Is it even possible please?
My image
You can do this in one section using buttons and dividers, set width for the divider, and set it using margin and padding

Drawing on Flex Chart

I've created a line chart in flex and it works like expected. Now, I would like to add shading to the background for specific information. For example, this chart - http://research.stlouisfed.org/fred2/graph/?id=TOTALSL,TOTALNS, - shows a shaded background for recessions. How would I mimic this shading in a Flex linechart?
Thanks
You could draw it in the background of the chart using the drawing api.
edit:
I dont know of any code examples on the web, I've only done it in production code (aka I cant share it, sorry :( )
you will want to create a container and put it into the charts
<mx:backgroundElements>
You should pass into this container the min and max for the x-axis probably as separate properties and a dataprovider that describes when to show a highlighted section. You might have to compute the min and max based on the dataprovider you pass into the chart.
If you just want to show the highlighted area you will just use the drawing api and compute where to put on the x-axis based on your min, max, width of container, and data point (start and end values) from your dataprovider. It will look something like this in your updateDisplayList:
// code is not tested but a good start
var shadeStartX:Number = (max-min)/startPoint;
var shadeEndX:Number = (max-min)/endPoint;
var shadeWidth:Number = shadeEndX - shadeStartX;
...
this.graphics.drawRect(shadeStartX, 0, shadeWidth, unscaledHeight);
but if you want to have things like hover states and all that goodness I would suggest creating a display object that you pass the width in and adding that to the container at the computed x-axis to set it at.
Hi I feel that drawing something yourself is not the right way to go.
You should ideally use a PlotSeries inside the LineChart, and create a custom item renderer for each element in the series.
PlotSeries allows you to give your own custom image/object to draw at a specific date/point in the chart.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/PlotSeries.html
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_10.html
All the examples show the plotSeries with smaller objects but you can create an object which covers the chart vertically and has a constant width.

Mirroring effect in Flex 4

Is it possible to create a mirroring effect in Flex4 at runtime? (load picture and create a mirrored part of that image).
Thanks in advance
you can create a reflection of a DisplyObject by scaleX = -1 (in a vertical mirror) or scaleY = -1 (for a horizontal one)
another way is to draw graphics you want to reflect as a BitmapData so that it'd be possible to implement any pixelwise reflecting algorithm you can imagine

Selecting Flex chart items and displaying sum of items selected

I would like to use the selectionMode=multiple described in the Flex docs, but with a few modifications:
1) I would like the box that the user drags over the graph to remain there until the user drags a new one.
2) In the top right corner of the box I want to display the sum of the items selected by that box.
Does anyone have any examples of this or something similar?
If not, what's the easiest way to implement this?
try this
http://demo.quietlyscheming.com/ChartSampler/app.html

Flex: Points to pixels and back again

So I have extended the PlotChart that comes with Flex to have the ability to draw trend-lines. To do this, I have to get pixel positions. How can I convert (100px,100px) in pixels to a point on the graph, such as (0.7,1.0)?
You can draw on charts using the CartesianChartCanvas, here is the link to the LiveDoc: Drawing on Chart Controls
To answer your question more specifically, CartesianChartCanvas supports drawing by pixels.
You probably want to create a subclass of ChartElement, and add it to annotationElements for your chart. The docs for Flex 2 show an example: Livedocs
PlotSeries::dataToLocal(...) ended up working fine.

Resources