An In-Depth look at FlexChart Line Markers in Xuni Android

Interactive line markers are an important aspect of the Xuni 2015v3 release, and we've previously covered using them in both iOS and Xamarin. They are an easy way to convey similar information to the contents of a tooltip, but often require less space and less precise interactions which can be very helpful in a mobile environment. Here, we'll examine using line markers on the Android platform including the steps necessary for setup and some configuration possibilities.

Implementing a custom Line Marker

The implementation will be similar to iOS in that we will have a class for our line marker which will have one portion devoted to the layout of the marker view and another piece that intercepts data points on render. Our class MyMarker extends ChartMarkerView, and the layout will be taken care of in it's constructor. In this case, we'll use a linear layout and populate it a couple of TextViews to act as title and content for the marker. The constructor for the class should look as follows:

public MyMarker(FlexChart flexChart, Context context, ChartLineMarker marker)  
    {  
        super(flexChart, context, marker);  
        mParentPackage = context.getPackageName();  
        setRendering(impl);  
        // create custom layouts  
        customLayout = new LinearLayout(getContext());  
        customLayout.setBackgroundColor(Color.parseColor("#55ffffff"));  
        customLayout.setOrientation(LinearLayout.VERTICAL);  

        LinearLayout childLayout = new LinearLayout(getContext());  
        childLayout.setOrientation(LinearLayout.HORIZONTAL);  

        // initialize layout elements  

        mTitle = new TextView(getContext());  
        mContent = new TextView(getContext());  

        // set element properties  
        mTitle.setTextColor(Color.BLACK);  
        mTitle.setTypeface(mTitle.getTypeface(), Typeface.BOLD);  
        mTitle.setPadding(10, 0, 0, 0);  
        mContent.setTextColor(Color.BLACK);  

        // add layouts  
        childLayout.addView(mTitle);  
        customLayout.addView(childLayout);  
        customLayout.addView(mContent);  
        addView(customLayout);  
        flexChart.addView(this);  
    }  

It will also have its own IChartMarkerRendering implementation which will handle the second portion. In this class, we will write a renderMarker method which will intercept the data points, format them, and add them to our to the TextViews that constitute our marker. Additionally, we can add some code here to change out marker depending on the Sales value at a particular position. I've added some conditional logic to detect whether the sales value is above a certain threshold and tint the marker green for values above 10,000 and red for values below.

private class MyChartMarkerRenderingImpl implements IChartMarkerRendering  
    {  
        @Override  
        public void renderMarker()  
        {  
            String strTitle = "";  
            String strContent = "";  

            List<ChartDataPoint> points = marker.getDataPoints();  
            if (points == null || points.size() == 0)  
                return;  

            strTitle = points.get(0).xValue.toString();  

            for (int i = 0; i < points.size(); i++)  
            {  
                ChartDataPoint point = points.get(i);  
                strContent += " " + point.seriesName + " : " + point.yValue + "\\r\\n";  
                if(Integer.parseInt(points.get(0).yValue.toString()) > 10000){  
                    customLayout.setBackgroundColor(Color.argb(71, 0, 255, 0));  
                }  
                else{  
                    customLayout.setBackgroundColor(Color.argb(71, 255, 0, 0));  
                }  

            }  

            if (strTitle.length() > 0 || strContent.length() > 0)  
            {  
                mTitle.setText(strTitle);  
                mContent.setText(strContent);  
            }  
            chart.plotAreaView.invalidate();  
        }  
    }  

Using the Line Marker with your Chart

Now that we set up our own MyMarker class we can use it throughout our project. In the main activity, we can add this to out chart easily with a couple lines of code. I'll also take care to hide the chart tooltips (since they're redundant at this point) and make sure that the line markers are visible.

        mChart.getTooltip().setVisible(false);  
        mChart.getMarker().setVisible(true);  
        mChart.getMarker().setContent(new MyMarker(mChart, getApplicationContext(), mChart.getMarker()));  

This allows us to use the line marker with our chart, but there other customizations that are possible. The line marker has properties that dictate alignment, lines, interaction, seriesIndex, color, and position. Alignment can either be automatic or snap into a quadrant (aligned to the top left, top right, bottom left, bottom right of the selected point). The line option gives you the choice of displaying a horizontal line, vertical line, both line types, or no lines at all. Interaction can either be move (where a user can either tap or drag to move the line marker), drag (where the user actively selects the line marker and drags it), or no interaction at all. SeriesIndex sets which series your line marker will snap to, thus if it is set to 0 it will snap along points in the first series. If you do not wish to have the line marker snap to points along any series and instead move freely you can set the seriesIndex to -1. The ability to move free can make interactions touch interactions a little easier at times, though snapping to points is generally more precise. You can also change the horizontal and vertical positions if you want to fix the placement of the marker. If you leave these positions unset or explicitly set them to NaN you'll see the default behavior of the marker being drawn at the selected point where the horizontal and vertical lines intersect.

Line Markers

Line Markers offer an alternative to the builtin tooltip functionality that Xuni provides, and are a good way of presenting the same data while requiring less precise interactions. There are many customizations available, and they can potentially be a nice enhancement to any mobile chart.

Read more about FlexChart >>