Created
June 21, 2010 19:49
-
-
Save boazsender/447379 to your computer and use it in GitHub Desktop.
Raphael line chart with custom x-axis labels demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks a lot! This is very helpful for me.