Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dannyben/minichart
Create SVG mini charts with Ruby
https://github.com/dannyben/minichart
chart charts ruby sparkline sparklines svg
Last synced: 2 days ago
JSON representation
Create SVG mini charts with Ruby
- Host: GitHub
- URL: https://github.com/dannyben/minichart
- Owner: DannyBen
- License: mit
- Created: 2016-08-20T08:53:52.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-25T10:38:44.000Z (about 1 month ago)
- Last Synced: 2024-09-26T05:53:27.831Z (8 days ago)
- Topics: chart, charts, ruby, sparkline, sparklines, svg
- Language: Ruby
- Homepage:
- Size: 150 KB
- Stars: 33
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Minichart - SVG Chart Generator
---
Create SVG mini charts with Ruby
---
## Install
```shell
$ gem install minichart
```
Or with bundler:
```ruby
gem 'minichart'
```
## Usage
Require and optionally include the library:
```ruby
require 'minichart'
include Minichart
```
Initialize a chart with data, and optional options:
```ruby
data = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 9]
chart = AreaChart.new data, color: 'blue'
```
Get the full SVG output by calling `#render`:
```ruby
puts chart.render
#=>
# ...
```
Save it to file, by calling `#save`:
```ruby
chart.save "my-chart.svg"
```
Get its inner SVG string by calling `#to_s`:
```ruby
puts chart.to_s
#=>
```
The objects returned from all the mini chart classes are [Victor::SVG][2] objects, so they support all methods supported by it as well.
## Chart Types
### Line Chart
```ruby
LineChart.new [10, 30, 20, 40, 30], background: '#eee',
height: 50, width: 250, color: 'green'
```
### Bar Chart
```ruby
BarChart.new [10, 30, 20, 40, 30], background: '#eee',
height: 50, width: 250, color: 'green'
```
### Area Chart
```ruby
AreaChart.new [10, 30, 20, 40, 30], background: '#eee',
height: 50, width: 250, color: 'green'
```
### Horizontal Bar Meter
```ruby
positive = HorizontalBarMeter.new 70,
height: 20, width: 250, background: '#9f9',
color: 'green'
negative = HorizontalBarMeter.new -80,
height: 20, width: 250, background: '#f99',
color: 'red'
dual = HorizontalBarMeter.new 80,
height: 20, width: 250, background: '#99f',
color: 'blue', mode: :dual, notches: [0]
```
Meter charts support [additional options](#meter-options).
### Vertical Bar Meter
```ruby
positive = VerticalBarMeter.new 70,
width: 20, height: 250, background: '#9f9', color: 'green'
negative = VerticalBarMeter.new -80,
width: 20, height: 250, background: '#f99', color: 'red'
dual = VerticalBarMeter.new 80,
width: 20, height: 250, background: '#99f', color: 'blue',
mode: :dual, notches: [0]
```
Meter charts support [additional options](#meter-options).
### Horizontal Status Leds
```ruby
HorizontalStatusLeds.new [1,1,-1,0,1,1,1,1,1,-1,-1,1],
background: '#ccc'
```
Led charts support [additional options](#leds-options).
### Vertical Status Leds
```ruby
VerticalStatusLeds.new [1,1,1,1,-1,1,-1,1,0,1],
background: '#ccc'
```
Led charts support [additional options](#leds-options).
## Configuration
Chart options can be set in one of three ways.
### Class-level default options
See or set default options for any chart class by calling its `::options` method:
```ruby
# See all options
p AreaChart.options
#=> {:background=>"white", :height=>100, :width=>300, :stroke=>2,
:style=>{}, :color=>"#66f"}
# Set a single default option
AreaChart.options[:color] = '#333'
# Set multiple options at once
AreaChart.options background: 'black', color: 'green'
```
### Instance initialization options
Set options by providing a hash as the second argument on initialization:
```ruby
chart = AreaChart.new data, height: 120, width: 500
```
### Instance-level options
After initialization, you can still update individual options:
```ruby
chart = AreaChart.new data
chart.options[:background] = 'yellow'
```
## Options Reference
### Basic Options
- **background**: Chart background color.
- **color**: Chart color.
- **height**: Chart height in pixels.
- **width**: Chart width in pixels.
- **stroke**: Line stroke width. This has a different effect in different chart types.
- **style**: CSS Style hash to apply to the entire SVG.
- **padding**: Chart padding in pixels.
### Meter Options
Meter charts support these options in addition to the basic options:
- **mode**: Display mode. Can be `:positive`, `:negative`, `:dual` or `:auto` (default).
The `:auto` mode will switch between `:positive` and `:negative` based on the
value.
- **max**: The absolute maximum value. This number should be positive even for negative
charts.
- **notches**: An array of one or more levels to place a notch marker. Use positive values
only.
- **notch_thickness**: Thickness of the notch markers.
- **notch_color**: Color of the notch markers.
- **clipping_indicator**: If true, show a marker when the value exceeds the range.
- **clipping_indicator_thickness**: Thickness of the clipping indicator.
- **clipping_indicator_color**: Color of the clipping indicator.
### Leds Options
Led charts support these options in addition to the basic options (excluding
the `color` option):
- **positive_color**: Color to use when the value is greater than 0.
- **negative_color**: Color to use when the value is less than 0.
- **neutral_color**: Color to use when the value is 0 or nil.
- **min_opacity**: A value between 0 and 1 representing the minimum opacity that will be applied to values when they are lower than the maximum range.
## Examples
See more examples (code and SVG output) in the [examples folder][1].
## Contributing / Support
If you experience any issue, have a question or a suggestion, or if you wish
to contribute, feel free to [open an issue][issues].
---
[1]: https://github.com/DannyBen/minichart/tree/master/examples#examples
[2]: https://github.com/DannyBen/victor
[issues]: https://github.com/DannyBen/minichart/issues