Question

Trying to build a timeline in Flex, Have a horizontal slider when i slide the slider there should be a line on the linechart as a needle moving with respect to value of slider,I Tried using gridlines to achieve this but the grid lines are visible across all the values of x axis,But I want to show only single gridline with respect to value of slider. Is there a way to hide few grid lines and show specific gridlines.

Answer 1

Here’s something I created in about 30 minutes. It’s very rudimentary, and has some issues that I will leave for you to solve (or you can post a new question specific to the remaining issues). It’s likely you’ll need to modify this to suit your application anyway, so I didn’t bother looking at the remaining issues.

I’ve assumed you’re using Date objects for the horizontal axis of the chart. As such you need to convert the date object to it’s corresponding numerical value (in epoch time). This allows you to work with the slider component, which expects numbers.

If you do have further questions, I recommend trying to post whatever code you’re using (or a simple version of it), that others can run. That way the answers you get will be specific to your case, and not generic like this one 🙂

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="onCreationComplete()">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            import spark.primitives.Line;

            [Bindable] private var chartData : ArrayCollection =
                new ArrayCollection(
                    [
                        { sales: 101000, month: new Date( '01/01/2013' ) },
                        { sales: 350000, month: new Date( '02/01/2013' ) },
                        { sales: 475000, month: new Date( '03/01/2013' ) },
                        { sales: 425000, month: new Date( '04/01/2013' ) }
                    ] );

            private var line:Line;

            private function onCreationComplete():void
            {
                line = new Line();
                line.height = chart.height;
                line.stroke = new SolidColorStroke(0x0000FF, 2);
                chartContainer.addElement(line);            }

            private function getDateInEpochTime(date:Date):Number
            {
                return date.time;
            }

            private function dataTipFormatFunction(value:Number):Object
            {
                return new Date(value).toString();
            }

            private function onSliderChange():void
            {
                line.x = convertSliderValueToXCoordinate();
            }

        private function convertSliderValueToXCoordinate():Number
        {
            var min:Number = slider.minimum;
            var max:Number = slider.maximum;
            var adjustedValue:Number = slider.value - min;
            var range:Number = max - min;
            var percentOfRange:Number = adjustedValue/range
            var xCoordinate:Number = slider.width * percentOfRange;
            var thumbWidth:Number = slider.thumb.width;
            if (percentOfRange > .5)
                xCoordinate = xCoordinate - (thumbWidth * (percentOfRange - .5));
            else if (percentOfRange < .5)
                xCoordinate = xCoordinate + (thumbWidth * (.5 - percentOfRange));
            return xCoordinate;
        }

        ]]>
    </fx:Script>

    <s:Group id="chartContainer" width="800" height="600">
        <mx:LineChart id="chart" dataProvider="{chartData}" left="0" right="0" top="0" bottom="20">
            <mx:horizontalAxis>
                <mx:DateTimeAxis id="hAxis" dataUnits="months" alignLabelsToUnits="true" displayLocalTime="true"/>
            </mx:horizontalAxis>
            <mx:series>
                <mx:LineSeries displayName="Sales by Month" yField="sales" xField="month">
                    <mx:lineStroke>
                        <s:SolidColorStroke color="0xFF0000" />
                    </mx:lineStroke> 
                </mx:LineSeries> 
            </mx:series>
        </mx:LineChart>
        <s:HSlider id="slider" left="0" right="0" bottom="0"
                   dataTipFormatFunction="dataTipFormatFunction"
                   minimum="{getDateInEpochTime(chartData.getItemAt(0).month)}"
                   maximum="{getDateInEpochTime(chartData.getItemAt( chartData.length -1 ).month)}"
                   change="onSliderChange()"/>
    </s:Group>
</s:Application>