Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save boazsender/447379 to your computer and use it in GitHub Desktop.
Save boazsender/447379 to your computer and use it in GitHub Desktop.
Raphael line chart with custom x-axis labels demo
//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>
@tmtk75
Copy link

tmtk75 commented Feb 20, 2013

Thanks a lot! This is very helpful for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment