https://github.com/m1ga/ti.lines
Draw simple lines, graphs and slicced circle in Titanium SDK
https://github.com/m1ga/ti.lines
android titanium-mobile titanium-module
Last synced: 6 months ago
JSON representation
Draw simple lines, graphs and slicced circle in Titanium SDK
- Host: GitHub
- URL: https://github.com/m1ga/ti.lines
- Owner: m1ga
- License: mit
- Created: 2022-11-13T14:36:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T16:54:02.000Z (10 months ago)
- Last Synced: 2024-07-19T02:30:13.095Z (10 months ago)
- Topics: android, titanium-mobile, titanium-module
- Language: Java
- Homepage:
- Size: 221 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# ti.lines - Draw simple lines, graphs and slicced circle in Titanium SDK
`ti.lines` allows you to draw simple line graphics or graphs in a views.
## Installation
* download the module from [Releases](./releases)
* put the ZIP into you project root
* add `ti.lines` to your tiapp.xml `` section.
## Lines
### Example
```js
const lines = require('ti.lines');
const lineView = lines.createLine({
width: 180,
height: 230,
lineWidth: 4,
lineColor: "#fff",
xAxis: true,
yAxis: true,
maxValue: 10,
yLines: 1,
xLines: 2,
values: [2, 2, 5, 1, 3, 1, 3, 2, 3, 1, 1],
startAt: lines.START_BOTTOM,
fillSpace: true
});
```
Alloy:
```xml
```
Full example is available here.
### Methods
* clear() - clears the view
* redraw() - redraws the line after you change properties
### Properties
|Property|Type|Description|
|---|---|---|
| values | Array/Object | Can be a simple array `[2, 2, 5...]` to draw a graph or `[{x: 0, y: 0}, { x: 50, y: 200},...]` to draw lines |
| lineColor | Color | Color of the line |
| lineColorFrom | Color | Line color gradient - start color |
| lineColorTo | Color | Line color gradient - end color |
| lineWidth | int | Width of the line |
| axisWidth | int | Width of the x/y axis |
| axisColor | Color | Color of the x/y axis |
| startAt | int | START_CENTER or START_BOTTOM. Will set the 0 point in the y-axis center or bottom |
| maxValue | int | Sets a custom max value for the y-axis and remaps your input values. Otherwise the view height will be the maxValue |
| xAxis | boolean | Show the x-axis |
| yAxis |boolean | Show the y-axis |
| yLines | int | Draws dotted y-axis lines. This value will be the steps (e.g. 1 will draw every x value, 2 will draw every 2nd value,...) |
| xLines | int | Draws dotted x-axis lines. This value will be the steps (e.g. 1 will draw every y value, 2 will draw every 2nd value,...)|
| lineType | int | TYPE_CURVED or TYPE_STRAIGHT. Will either draw a normal line or a bezier curve |
| strokeType | int | STROKE_NORMAL or STROKE_NORMAL. Different stroke style |
| fillSpace | boolean | Will fill the area below the curve (experimental) |
| fillColorTop | Color | Color at the top |
| fillColorBottom | Color | Color at the bottom |
| padding | int/array | Either one int value for all sides or 4 values: [top, right, bottom, left] as an array |
If you change properties after the view is visible you will need to call `redraw()` to see the changes.
### Constants
* **TYPE_CURVED**: bezier line
* **TYPE_STRAIGHT**: normal line
* **START_CENTER**: start in the center
* **START_BOTTOM**: start at the bottom
* **STROKE_NORMAL**: normal line
* **STROKE_DASHED**: dashed line
* **DIRECTION_CW**: circle direction clock wise
* **DIRECTION_CCW**: circle direction counter clock wise
### iOS version
The iOS version is currently very limited. You can use:
* values
* maxValue
* lineColor
* lineWidth
* lineType
* startAt
## Canvas
You can also create a canvas view that currently allows you to draw sliced circles:
```js
const circleView = lines.createCanvas({
width: 200,
height: 200,
startRotation: 45,
direction: lines.DIRECTION_CCW,
circleColors: ["#cecece", "#ff0", "#f0f", "#f00"],
})
win.add(circleView);
```
### Properties
* startRotation
* direction: DIRECTION_CW, DIRECTION_CCW
* circleColors: Array of colors
### Methods
* drawCircle(same properties)
## License
MIT
## Author
* Android: Michael Gangolf