Hyperloop Donut Example using Alloy Custom Tags (charts.js should be put in the app/lib folder of your app)

charts.js

var Hyperloop = require('hyperloop');
var UIView = require('UIView');
var CGRect = require('CGRect');
var CGPoint = require('CGPoint');
var UIColor = require('UIColor');
var UIBezierPath = require('UIBezierPath');

function DEGREES_TO_RADIANS(angle) { return (Number(angle) / 180.0 * Math.PI) };


var NativeHyperloopView = Hyperloop.createClass({
	name: 'NativeHyperloopView',
	super: 'UIView'
});

NativeHyperloopView.addInstanceMethod({
	signature: 'drawRect:',
	arguments: '{CGRect={CGPoint=dd}{CGSize=dd}}',
	callback: function(_arg) {
		var rect = new CGRect(_arg);
		var centerPoint = CGPoint.Make(rect.width / 2, rect.height / 2);

		//http://stackoverflow.com/questions/18404124/uibezierpath-draw-circle-with-different-strokes
		
		var bluePath = UIBezierPath.bezierPath();
		bluePath.addArcWithCenterRadiusStartAngleEndAngleClockwise(
			centerPoint, 
			90.0, 
			DEGREES_TO_RADIANS(-90),
			DEGREES_TO_RADIANS(90), 
			true
		);

		bluePath.lineWidth = 50;
		UIColor.blueColor().setStroke();
		bluePath.stroke();
		
		var redPath = UIBezierPath.bezierPath();
		redPath.addArcWithCenterRadiusStartAngleEndAngleClockwise(
			centerPoint, 
			90.0, 
			DEGREES_TO_RADIANS(92),
			DEGREES_TO_RADIANS(180), 
			true
		);

		redPath.lineWidth = 30;
		UIColor.redColor().setStroke();
		redPath.stroke();
		
		var greenPath = UIBezierPath.bezierPath();
		greenPath.addArcWithCenterRadiusStartAngleEndAngleClockwise(
			centerPoint, 
			90.0, 
			DEGREES_TO_RADIANS(182),
			DEGREES_TO_RADIANS(-92), 
			true
		);

		greenPath.lineWidth = 10;
		UIColor.greenColor().setStroke();
		greenPath.stroke();
		
		var ovalRect = CGRect.Make((rect.width / 2)-50,(rect.height / 2)-50,100,100);
		var circle = UIBezierPath.bezierPathWithOvalInRect(ovalRect);
		
		UIColor.lightGrayColor().setFill();
		circle.fill();
		
	}
});

var HyperloopView = UIView.extend('NativeHyperloopView');

exports.createDonutChart = function _createDonutChart(){
	
	var tiview = Ti.UI.createView({
		backgroundColor: '#363636'
	});

	var uiview = HyperloopView.init();
	uiview.backgroundColor = UIColor.clearColor();
	uiview.native.applyProperties({
		width: 300,
		height: 300
	});
	uiview.layer.allowsEdgeAntialiasing = true;
	uiview.layer.cornerRadius = 10;
	
	tiview.add(uiview.native);
	
	var lbl = Ti.UI.createLabel({
		font:{
			fontSize: 48,
			fontWeight: "bold"
		},
		color: "#666",
		text: 35
	});
	tiview.add(lbl);
	return tiview;

};

index.tss

".container": {
	backgroundColor:"white"
}

"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
}

"#label": {
	font: {
		fontSize: 12
	}
}

index.xml

<Alloy>
	<Window class="container">
		<DonutChart module="charts" />
	</Window>
</Alloy>

Picture or it didn't happen.