whitespace COMPANY whitespace SERVICES whitespace PRODUCTS whitespace PURCHASE whitespace SUPPORT whitespace CONTACTS whitespace Home whitespace Contact Us whitespace Site Map whitespace
whitespace
WHY ARTFULBITS
whitespace
OUR APPROACH
whitespace
OUR TEAM
whitespace
FACT SHEET
whitespace
NEWS & EVENTS
whitespace
PRIVACY
whitespace
whitespace

StepArea Chart Type

Overview

An area chart displays graphically quantitative data. This chart type is based on the line chart. An area chart emphasizes a change in values by filling in the portion of the graph beneath the line connecting various data points. The area between axis and line are commonly emphasized with colors, textures, hatchings or animation. This colorful and visual display distinguishes the data more clearly. Along with the line chart, the area chart is the only chart type that displays data contiguously. For example, you can use this chart type to show change in the relative amounts of the principal and interest over the time of a mortgage.

Creating the Step Area Chart

In order to create a step area chart, first create an instance of chart series, set ChartType as StepArea and fill series with required data, like in the following sample:

zip archive Download sample

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<com.artfulbits.aiCharts.ChartView
		android:id="@+id/chartView"
		chart="@xml/chart"
		android:background="@android:drawable/alert_dark_frame"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"/>
</LinearLayout>
package com.artfulbits.aiCharts.StepAreaSample;

import com.artfulbits.aiCharts.ChartView;
import com.artfulbits.aiCharts.Annotations.ChartAnnotationPosition;
import com.artfulbits.aiCharts.Annotations.ChartDrawableAnnotation;
import com.artfulbits.aiCharts.Base.ChartPoint;
import com.artfulbits.aiCharts.Base.ChartSeries;
import com.artfulbits.aiCharts.Enums.Alignment;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.graphics.drawable.Drawable;
import android.os.Bundle;

public class MainActivity extends Activity
{
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		ChartView chartView = (ChartView) findViewById(R.id.chartView);
		ChartSeries series = chartView.getSeries().get(0);

		double[] ds = { 10, 20, 30, 40, 50, 60, 70, 80, 90, 90, 90 };

		for (int i = 0; i < ds.length; i++)
		{
			series.getPoints().addXY(i, ds[i]);
		}
		
		ChartPoint point = series.getPoints().get(series.getPoints().size() - 2);
		
		Paint labelPaint = new Paint();
		
		labelPaint.setTextSize(20);
		labelPaint.setAntiAlias(true);
		labelPaint.setColor(0xFFFFCC33);
		labelPaint.setShadowLayer(10, 0, 0, 0xFFFFDF00);
		labelPaint.setTypeface(Typeface.DEFAULT_BOLD);
		
		point.setLabel("Success!!!");
		point.setShowLabel(Boolean.TRUE);
		point.setVLabelAlignment(Alignment.Near);
		point.setMarkerPaint(labelPaint);
		
		Drawable drawable = getResources().getDrawable(R.drawable.man);
		ChartDrawableAnnotation annotation = new ChartDrawableAnnotation(drawable);
		
		annotation.setPosition(ChartAnnotationPosition.relativeToSeries(series.getName(), 3));
		
		chartView.getChart().getAnnotations().add(annotation);
	}
}
<?xml version="1.0" encoding="utf-8"?>
<ai:chart xmlns:ai="http://www.artfulbits.com/android/aiCharts">
	<ai:area>
		<area.xaxis labels_visible="false"/>
		<area.yaxis labels_visible="false"/>
	</ai:area>
	<ai:series name="series1" type="StepArea" background="@drawable/background"/>
</ai:chart>
Company | Services | Practices | Technologies | Career | Contacts | Privacy
© 2005-2016 ArtfulBits. All rights reserved.