boazsender/modified-x-axis-intervals-and-labels.js

## modified-x-axis-intervals-and-labels.js
//based on the source of http://g.raphaeljs.com/linechart.html

var options = {
  axis: "0 0 1 1", // Where to put the labels (trbl)
  axisxstep: 16 // How many x interval labels to render (axisystep does the same for the y axis)
};

document.addEventListener('DOMContentLoaded', function () {

  // Make the raphael object
  var r = Raphael("myDomElem");

  var lines = r.g.linechart(
    20, // X start in pixels
    10, // Y start in pixels
    300, // Width of chart in pixels
    200, // Height of chart in pixels
    [.5,1.5,2,2.5,3,3.5,4,4.5,5], // Array of x coordinates equal in length to ycoords
    [7,11,9,16,3,19,12,12,15], // Array of y coordinates equal in length to xcoords
    options // opts object
  );

  // Modify the x axis labels
  var xText = lines.axis[0].text.items;
  for(var i in xText){ // Iterate through the array of dom elems, the current dom elem will be i
    var _oldLabel = (xText[i].attr('text') + "").split('.'), // Get the current dom elem in the loop, and split it on the decimal
        _newLabel = _oldLabel[0] + ":" + (_oldLabel[1] == undefined ? '00' : '30'); // Format the result into time strings
    xText[i].attr({'text': _newLabel}); // Set the text of the current elem with the result
  };


}, false); // End DOMContentLoaded callback

## raphael-chart-demo.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/03538da207cb41e2ebc303fe8fc247dd0b5e655f/raphael-min.js"></script>
  <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/g.raphael/177d888cbc8824d2a513c975ed5be8a3291b72ea/g.raphael.js"></script>
  <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/g.raphael/177d888cbc8824d2a513c975ed5be8a3291b72ea/g.line.js"></script>


  <script type="text/javascript" src="modified-x-axis-intervals-and-labels.js"></script>
</head>
<body>
 <div id="myDomElem"></div>
</body>
</html>
	//based on the source of http://g.raphaeljs.com/linechart.html

	var options = {
	axis: "0 0 1 1", // Where to put the labels (trbl)
	axisxstep: 16 // How many x interval labels to render (axisystep does the same for the y axis)
	};

	document.addEventListener('DOMContentLoaded', function () {

	// Make the raphael object
	var r = Raphael("myDomElem");

	var lines = r.g.linechart(
	20, // X start in pixels
	10, // Y start in pixels
	300, // Width of chart in pixels
	200, // Height of chart in pixels
	[.5,1.5,2,2.5,3,3.5,4,4.5,5], // Array of x coordinates equal in length to ycoords
	[7,11,9,16,3,19,12,12,15], // Array of y coordinates equal in length to xcoords
	options // opts object
	);

	// Modify the x axis labels
	var xText = lines.axis[0].text.items;
	for(var i in xText){ // Iterate through the array of dom elems, the current dom elem will be i
	var _oldLabel = (xText[i].attr('text') + "").split('.'), // Get the current dom elem in the loop, and split it on the decimal
	_newLabel = _oldLabel[0] + ":" + (_oldLabel[1] == undefined ? '00' : '30'); // Format the result into time strings
	xText[i].attr({'text': _newLabel}); // Set the text of the current elem with the result
	};


	}, false); // End DOMContentLoaded callback
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/03538da207cb41e2ebc303fe8fc247dd0b5e655f/raphael-min.js"></script>
	<script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/g.raphael/177d888cbc8824d2a513c975ed5be8a3291b72ea/g.raphael.js"></script>
	<script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/g.raphael/177d888cbc8824d2a513c975ed5be8a3291b72ea/g.line.js"></script>


	<script type="text/javascript" src="modified-x-axis-intervals-and-labels.js"></script>
	</head>
	<body>
	<div id="myDomElem"></div>
	</body>
	</html>