Minichart - SVG Chart Generator

Create SVG mini charts with Ruby

demo

Install
Usage
Chart Types
Configuration
Options Reference
Examples

Install

$ gem install minichart

Or with bundler:

gem 'minichart'

Usage

Require and optionally include the library:

require 'minichart'
include Minichart

Initialize a chart with data, and optional options:

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:

puts chart.render
#=> <?xml version="1.0" standalone="no"?>
#   <svg> ... </svg>

Save it to file, by calling #save:

chart.save "my-chart.svg"

Get its inner SVG string by calling #to_s:

puts chart.to_s
#=> <polyline fill="blue" stroke="blue" stroke-width="2" points="..."/>

The objects returned from all the mini chart classes are Victor::SVG objects, so they support all methods supported by it as well.

Chart Types

Line Chart

LineChart.new [10, 30, 20, 40, 30], background: '#eee',
  height: 50, width: 250, color: 'green'

Bar Chart

BarChart.new [10, 30, 20, 40, 30], background: '#eee',
  height: 50, width: 250, color: 'green'

Area Chart

AreaChart.new [10, 30, 20, 40, 30], background: '#eee',
  height: 50, width: 250, color: 'green'

Horizontal Bar Meter

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.

Vertical Bar Meter

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.

Horizontal Status Leds

HorizontalStatusLeds.new [1,1,-1,0,1,1,1,1,1,-1,-1,1],
  background: '#ccc'

Led charts support additional options.

Vertical Status Leds

VerticalStatusLeds.new [1,1,1,1,-1,1,-1,1,0,1],
  background: '#ccc'

Led charts support additional 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:

# 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:

chart = AreaChart.new data, height: 120, width: 500

Instance-level options

After initialization, you can still update individual options:

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 additon 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

Leds charts support these options in additon 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.

Examples

See more examples (code and SVG output) in the examples folder.

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.