diff --git a/README.md b/README.md new file mode 100644 index 0000000..7c26344 --- /dev/null +++ b/README.md @@ -0,0 +1,62 @@ +# flot-tickrotor + +![License](https://img.shields.io/badge/license-MIT-green) +![Version](https://img.shields.io/badge/version-1.0.0-blue) + +## Overview + +`flot-tickrotor` is a Flot plugin that allows you to display angled X-axis tick labels in your charts. This feature is particularly useful for improving readability when dealing with long or overlapping labels. + +## Features + +- Rotate X-axis tick labels to any angle for better visibility. +- Easy integration with existing Flot charts. +- Lightweight and simple to use. + +## Installation + +You can install `flot-tickrotor` using Bower or by including the script directly in your project. + +### Using Bower + +To install via Bower, run the following command: + +bower install flot-tickrotor + +### Manual Installation + +Alternatively, you can download the `jquery.flot.tickrotor.js` file from the [releases page](https://github.com/markrcote/flot-tickrotor/releases) and include it in your project. + + + +## Usage + +To use the `flot-tickrotor` plugin, simply call it on your Flot chart as follows: + +$(function() { + var data = [[0, 0], [1, 1], [2, 4], [3, 9], [4, 16]]; + + $.plot("#placeholder", [data], { + xaxis: { + ticks: [[0, "Zero"], [1, "One"], [2, "Two"], [3, "Three"], [4, "Four"]], + tickRotation: 45 // Set the rotation angle here + } + }); +}); + +## Contributing + +Contributions are welcome! If you find a bug or have a feature request, please open an issue on GitHub. You can also fork the repository and submit a pull request. + +## License + +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. + +## Authors + +- [Mark R. Cote](https://github.com/markrcote) +- [M. No Fresno](https://github.com/mnofresno) + +## Homepage + +For more information, visit the [flot-tickrotor homepage](https://github.com/markrcote/flot-tickrotor). diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..2635d94 --- /dev/null +++ b/bower.json @@ -0,0 +1,17 @@ +{ + "name": "flot-tickrotor", + "authors": [ + "@markrcote", "@mnofresno" + ], + "description": "Flot plugin for rotating the ticks", + "main": "jquery.flot.tickrotor.js", + "license": "MIT", + "homepage": "https://github.com/markrcote/flot-tickrotor", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/jquery.flot.tickrotor.js b/jquery.flot.tickrotor.js index 5ee0be5..58272c8 100644 --- a/jquery.flot.tickrotor.js +++ b/jquery.flot.tickrotor.js @@ -27,7 +27,7 @@ // the first time to get the tick measurements, so that we can change // them, and then have it draw it again. - var ticks = []; // preserve between draw() calls. + var ticks = null; // preserve between draw() calls. var font; var secondPass = false; var rotateTicks, rotateTicksRads, radsAboveHoriz; @@ -72,7 +72,7 @@ // property. That probably requires another hook. xaxis = plot.getAxes().xaxis; - ticks = plot.getAxes().xaxis.ticks; + ticks = xaxis.ticks ? xaxis.ticks : []; xaxis.rotatedTicks = ticks; opts.ticks = []; // we'll make our own