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

ECG Animation Sample

Overview

This sample demonstrates how to implement electrocardiogram-styled chart. This might help making your application more attractive to the end-user.
Sample uses following approaches:
- only part of points is updated at the same time.
- strip-line is used as a marker of uptated points. 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:layout_width="fill_parent"
		android:layout_height="fill_parent"/>
</LinearLayout>
package com.artfulbits.aiCharts.ECGGraphSample;

import com.artfulbits.aiCharts.ChartView;
import com.artfulbits.aiCharts.Base.ChartArea;
import com.artfulbits.aiCharts.Base.ChartAxisStripLine;
import com.artfulbits.aiCharts.Base.ChartPointCollection;
import com.artfulbits.aiCharts.Base.ChartSeries;
import com.artfulbits.aiCharts.Types.ChartStepLineType;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;

public class MainActivity extends Activity
{
	static final int POINTS_COUNT = 100;
	static final int UPDATE_STEP = 5;
	static final double[] DEMO_DATA = { 0.02, 0.02, 0.02, 0.02, 0.05, 0.07, 0.06, 0.09, 0.06, 
		-0.2, 0.9, 0.5, -0.1, 0.02, 0.02, 0.04, 0.1, 0.08, 0.03, 0.02, 0.02, 0.02, 0.02, 0.02};

	Handler m_handler = new Handler(); 
	ChartSeries m_series;
	ChartAxisStripLine m_updateLine = new ChartAxisStripLine(1, 0);
	
	int m_dataOffset = 1;
	int m_pointOffset = 0;
	
	/** 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);

		ChartArea area = chartView.getAreas().get(0);

		area.getDefaultXAxis().getGridLinePaint().setColor(Color.DKGRAY);
		area.getDefaultYAxis().getGridLinePaint().setColor(Color.DKGRAY);
		
		area.getDefaultXAxis().getStripLines().add(m_updateLine);

		m_series = chartView.getSeries().get(0);

		for (int i = 0; i <= POINTS_COUNT; i++)
		{
			m_series.getPoints().addXY(i, DEMO_DATA[i % DEMO_DATA.length]);
		}
		
		// timer workaround
		m_handler.post(new Runnable()
		{
			@Override
			public void run()
			{
				m_pointOffset += UPDATE_STEP;
				
				if(m_pointOffset >= m_series.getPoints().size())
				{
					m_pointOffset = 0;
					m_dataOffset++;
				}

				ChartPointCollection points = m_series.getPoints();
				
				points.beginUpdate();

				for (int i = 0; i < UPDATE_STEP; i++)
				{
					int pointIndex = (m_pointOffset + i) % m_series.getPoints().size();
					int dataIndex = (m_dataOffset + pointIndex) %  DEMO_DATA.length;
					
					points.get(pointIndex).setY(DEMO_DATA[dataIndex]);
				}
				
				points.endUpdate();
				
				m_updateLine.setStart(m_pointOffset + UPDATE_STEP);
				
				m_handler.postDelayed(this, 50);
			}
		});
	}
}
<?xml version="1.0" encoding="utf-8"?>
<ai:chart
	xmlns:ai="http://www.artfulbits.com/android/aiCharts">
	<ai:area>
		<area.xaxis
			scale_min="0"
			scale_max="100"
			position="HorizontalCenter"/>
		<area.yaxis
			scale_min="-1"
			scale_max="1"
			position="VerticalCenter"/>
	</ai:area>
	<ai:series
		type="FastLine" color="0xFF2FDF36"/>
</ai:chart>
Company | Services | Practices | Technologies | Career | Contacts | Privacy
© 2005-2014 ArtfulBits. All rights reserved.