Raphy Charts

Beautiful HTML5/SVG Charts with sane defaults for all browsers,
including Internet Explorer. Built on Raphael.js & Apache 2 Licensed


<!-- 
Raphael.js is required to use Raphy Charts. For a quick install use these scripts. 
Note you have to download them, not link directly from raw.github.com: 
-->
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<script src="https://raw.github.com/jcarver989/raphy-charts/master/compiled/charts.min.js"></script>

View on Github Download latest RaphyCharts

Line Chart The granddaddy of all charts. Time series data and multi-axis lines supported out of the box

Action Total Sparkline
Visitors 500k
Signups 250k
Conversions 10k

Usage

First, initialize the chart


 <!-- Assuming this Div exists somewhere on the page: (width & height MUST be set) -->
 <div id='chart1' style='width: 300px; height: 100px;'></div>


// Can pass in the id
var chart = new Charts.LineChart('chart1');

// Or the DOM node 
var node  = document.getElementById('chart1');
var chart = new Charts.LineChart(node);


// If you want to override default options 
var chart = new Charts.LineChart('chart1', {
  show_grid: false,
  label_max: false,
  label_min: false
});

Then add some lines


// Data is an array of arrays where the first slot is the x label and the 2nd the (y) value to graph
chart.add_line({
  data: [[1, 828906],[2, 566933],[3, 584150],[4, 1072143],[5, 1622455],[6, 2466746],[7, 2427789]]
});

// Line charts also support custom tooltips, eg: 
chart.add_line({
  data: [[1, 828906, {tooltip: "my special point"}],[2, 566933],[3, 584150],[4, 1072143],[5, 1622455],[6, 2466746],[7, 2427789]]
});



// x Labels can also be dates, making time series charts easy 
var day1 = new Date(d.getFullYear(), d.getMonth(), 1);
var day2 = new Date(d.getFullYear(), d.getMonth(), 2);

chart.add_line({
  data: [[day1, 828906],[day2, 566933]],

  // line level options passed here
  options: {
    line_color: "#00aadd"
  }
});

Finally Draw the Chart


chart.draw();

Complete Example

A MultiAxis Chart With Gradient Fill


var multi_axis = new Charts.LineChart('multiaxis', {
  show_grid: true,
  show_y_labels: true,
  label_max: false,
  label_min: false,
  multi_axis: true,
  max_y_labels: 4,
  x_padding: 45 
});

multi_axis.add_line({
  data: [[1, 828906],[2, 566933],[3, 584150],[4, 1072143],[5, 1622455],[6, 2466746],[7, 2427789]],
  options: {
    line_color: "#00aadd",
    dot_color: "#00aadd",
    area_color: "230-#88c9dd-rgba(255,255,255,0)",
    area_opacity: 0.2,
    dot_size: 5,
    line_width: 4 
  }
});

multi_axis.add_line({
  data: [[1, 305],[2, 336],[3, 378],[4, 449],[5, 635],[6, 935],[7, 782]],
  options: {
    line_color: "#ffee33",
    dot_color: "#ffee33",
    fill_area: false,
    line_width: 2,
    dot_size: 3
  }
});

multi_axis.draw()

Line Chart Options

Chart

Type Option Description Default Chart/Line
boolean show_grid render a background grid true chart only
boolean multi_axis render chart with 2 y axes false chart only
number x_padding how much to pad the x-axis (px) 45 chart only
number y_padding how much to pad the y-axis 40 chart only
array y_axis_scale force the y-axis range, eg. [0, 100] inferred chart only

Dots

Type Option Description Default Chart/Line
number dot_size size of dots 5 both
css-color dot_color color of dots "#00aadd" both
css-color dot_stroke_color color of dot border "#fff" both
number dot_stroke_size size of dot border 2 both

Lines

Type Option Description Default Chart/Line
number line_width width of line 3 both
css-color line_color color of line "#00aadd" both
number smoothing 0.0 to 1.0, 0 = no smoothing, 1.0= ultra smoothing 0.4 both
boolean fill_area shade the area under a line true both
css-color area_color color of area under a line "#00aadd" both
number area_opacity 0.0 to 1.0 opacity of shading under a line 0.2 both

Bars (for bar time series instead of a line)

Type Option Description Default Chart/Line
string render "bar" or "line" "line" chart only
number bar_width width of bars (px) 20 both

Labels

Type Option Description Default Chart/Line
boolean show_x_labels display x axis labels true chart only
boolean show_y_labels show y axis labels true chart only
boolean label_max label max point of line with tooltip true both
boolean label_min label min point of line with tooltip true both
number max_x_labels max number of x axis labels to show 10 chart only
number max_y_labels max number of y axis labels to show 3 chart only
number x_label_size size of x labels (pixels) 14 chart only
number y_label_size size of y labels (pixels) 14 chart only
string font_family which font to use "Helvetica, Arial, sans-serif" chart only
number label_format format string for date labels "%m%d"

Label Formatting Macros

Example: label_format: "%m/%d/%Y" -> "11/05/2011"

Point Options (eg chart.add_line([[1,2, {tooltip: "foo"}]])

Type Option Description Default
boolean no_dot don't render a dot + tooltip on this point false
boolean show_dot show dot + tooltip as active on page load false
string tooltip custom tooltip label on a particular point the point's y value