Raphy Charts

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

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

Dots

Lines

Bars (for bar time series instead of a line)

Labels

Label Formatting Macros

• %m - month (1-12)
• %d - date (1-31)
• %Y - year (eg. 2011)
• %H - hours (0-24)
• %I - hours (1-12)
• %p - am/pm indicator
• %M - minutes (0-59)

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

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

Bar Chart Your standard bar charts with all the fixin's

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.BarChart('chart1');

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

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

Then add some bars

chart.add({
  label: "doo",
  value: 300
});

chart.add({
  label: "moo",
  value: 800,
  options: {
    bar_color: "#53ba03"
  }
});

Finally draw the chart

chart.draw();

Complete Example

var bars = new Charts.BarChart('barchart', {
  x_label_color: "#333333",
  bar_width: 45,
  rounding: 10,
});

bars.add({
  label: "foo",
  value: 600
});

bars.add({
  label: "moo",
  value: 800,
  options: {
    bar_color: "#53ba03"
  }
});

bars.add({
  label: "doo",
  value: 300
});

bars.draw();

Bar Chart Options

Chart

Bars

Bullet Charts When you need more than a simple bar chart

Bullet Charts are still being developed, it's not recommended for use (yet) as there aren't labels for the values.

Index Chart A specialized chart to show you how well you track against an index

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.IndexChart('chart1');

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

// If you want to override default options 
var chart = new Charts.IndexChart('chart1', {
  rounding: 10
});

Then add some bars

// add(*Label*, *raw value*, *index score*)
// index score of 100 == average

chart.add("Retail", 18316, 65);
chart.add("IT Software",28977,1331);
chart.add("Engineering/Technical",28977,282);

Then add the guider (dotted) lines

// add_guide_line(*Label*, *index value*, *opacity*)
// index score of 100 == average

chart.add_guide_line("Average", 100, 1)
chart.add_guide_line("Above Average", 500, 0.25)
chart.add_guide_line("High", 1000, 0.25)

Label the Raw Values

index.add_raw_label("Uniques")

Finally, draw the chart

chart.draw();

Complete Example

 var node = document.getElementById('indexchart');
 var index = Charts.IndexChart(node);

 index.add("Retail",18316,65)
 index.add("IT Software",28977,1331)
 index.add("Engineering/Technical",28977,282)
 index.add("Education",20839,106)
 index.add("Media & Internet",22488,92)
 index.add("Business Services",19397,85)

 index.add_guide_line("Average", 100, 1)
 index.add_guide_line("Above Average", 500, 0.25)
 index.add_guide_line("High", 1000, 0.25)

 index.draw()

Index Chart Options

Chart

Bars

Progress Chart A chart widget to show a percentage of total

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
// constructor parameters: *dom_id OR node*, *label*, *percentage value*
var chart = new Charts.CircleProgress('chart1', 'Sales', 80);

// Or the DOM node 
var node  = document.getElementById('chart1');
var chart = new Charts.CircleProgress(node, 'Sales', 80);

// If you want to override default options 
var chart = new Charts.CircleProgress('chart1', 'Sales', 80, {
  fill_color: "#222" 
});

Then draw the chart

  chart.draw();

Complete Example

var progress1 = new Charts.CircleProgress(
  'progress-1', 
  'Sales', 
  80,
  {
    font_color: "#fff",
    fill_color: "#222",
    label_color: "#333",
    text_shadow: "rgba(0,0,0,.4)",
    stroke_color: "#6a329e"
  });

  progress1.draw()

Progress Chart Options

Chart

Fly Chart Visualize parts of a whole by clicking on the circles

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.PathMenu('chart1');

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

// If you want to override default options 
var chart = new Charts.PathMenu('chart1', {
  bounce_radius: 1.5 
});

Add some items

menu.add({
  label: "Software",
  value: 5000,
  children: [
    { label: "Cloud Based", value: 1500 },
    { label: "OEM Based",   value: 1500 },
    { label: "Gaming",      value: 2000 }
  ]
})

menu.add({
  label: "Food",
  value: 400,
  children: [
    { label: "Groceries",     value: 100 },
    { label: "Restaurants",   value: 150 },
    { label: "Snacks",        value: 150 }
  ]
})

menu.add({
  label: "Movies",
  value: 1500,
  children: []
});

Then draw the chart

  chart.draw();

Complete Example

var menu = new Charts.PathMenu("fly-1", {});

menu.add({
  label: "Manufacturing",
  value: 3000,
  children: [
    { label: "Automobiles", value: 1500 },
    { label: "Aerospace",   value: 1500 },
  ]
});

menu.add({
  label: "Software",
  value: 5000,
  children: [
    { label: "Cloud Based", value: 1500 },
    { label: "OEM Based",   value: 1500 },
    { label: "Gaming",      value: 2000 }
  ]
})

menu.add({
  label: "Food",
  value: 400,
  children: [
    { label: "Groceries",     value: 100 },
    { label: "Restaurants",   value: 150 },
    { label: "Snacks",        value: 150 }
  ]
})

menu.add({
  label: "Movies",
  value: 1500,
  children: []
});

menu.add({
  label: "Consumer Electronics",
  value: 1500,
  children: []
});


menu.add({
  label: "Real Estate",
  value: 1500,
  children: []
});


menu.add({
  label: "Commercial Banking",
  value: 1500,
  children: []
});

menu.draw();

Options