Grafico is a graphing library based on Raphaël and Prototype.js. It is originally developed as Ico by Alex Young, but this version was developed by Kilian Valkhof at Wakoopa. Grafico's basic principles are to provide good, clean looking graphs inspired by work of Stephen Few and Edward Tufte, while still being flexible to implement and providing numerous api options to tweak the look of the graphs.
Some key things Grafico supports:
Grafico graphs are initiated via this function call:
var foo = new Grafico.GraphType($(element), data, options);$(element) is a prototype id selector, data is an object or array (depending on the graph) and options is optional and an object.
Line graph with the default rendering (no options):
var linegraph = new Grafico.LineGraph($('linegraph'), { workload: [8, 10, 6, 12, 7, 6, 9] });Line graph with custom options:
var linegraph2 = new Grafico.LineGraph($('linegraph2'), { workload: [0, 0, 8, 10, 6, 12, 7] },
{
grid : true,
plot_padding : 0,
curve_amount : 0,
start_at_zero : false,
stroke_width : 3,
label_rotation : -30,
font_size : 11,
vertical_label_unit : "hr",
colors : {workload: '#4b80b6'},
background_color : "#fff",
label_color : "#444",
grid_color : "#ccf",
markers : "value",
meanline : { 'stroke-width': '2px', stroke: '#000' },
draw_axis : false,
labels : ['mon', '', 'wed', '', 'fri', '', 'sun'],
hide_empty_label_grid : true,
datalabels : {workload:function(idx, value) {
return ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'][idx] + " : " + value;
}},
});Line graph with multiple lines and a watermark:
var linegraph3 = new Grafico.LineGraph($('linegraph3'),
{
workload: [8, 10, 6, 12,7, 6, 9],
your_workload: [6, 8, 4, 8, 12,6, 2],
his_workload: [2, 9, 12,7, 8, 9, 8]
},
{
markers: "circle",
hover_color: "#000",
hover_text_color: "#fff",
watermark: "Screenshot.png",
watermark_location: "middle",
draw_hovers: true,
datalabels: {
workload: "My workload",
your_workload: "Your workload",
his_workload: "His workload"
}
});Line graph with multiple lines and negative values:
var linegraph4 = new Grafico.LineGraph($('linegraph4'),
{
a : [8, -10, 6, 12,7, -6, -9],
b : [6, 8, -4, 8, -12,6, 2],
c : [2, 9, 12,7, 8, -9, 8]
});.
Area graphs only support positive ranges.
Area graph with the default rendering (no options):
var areagraph = new Grafico.AreaGraph($('areagraph'), { workload: [8, 10, 6, 12, 7, 6, 9] });Area graph with custom options:
var areagraph2 = new Grafico.AreaGraph($('areagraph2'),
{ workload: [8, 10, 6, 12, 7, 6, 9] },
{
grid : true,
area_opacity : 0.5,
plot_padding : 0,
font_size : 11,
vertical_label_unit : "hr",
colors : { workload: '#4b80b6' },
background_color : "#fff",
label_color : "#444",
grid_color : "#ccf",
markers : "value",
meanline : { 'stroke-width': '2px', stroke: '#000' },
draw_axis : false,
labels : ['monday', '', 'wednesday', '', 'friday', '', 'sunday'],
datalabels : { workload: 'My workload' },
label_max_size : 4
});Area graph with multiple areas:
var areagraph3 = new Grafico.AreaGraph($('areagraph3'),
{
workload: [8, 10, 6, 12, 7, 6, 9],
your_workload: [6, 8, 4, 8, 12, 6, 2],
his_workload: [2, 9, 12, 7, 8, 9, 8]
});Area graph with multiple areas and custom options:
var areagraph4 = new Grafico.AreaGraph($('areagraph4'),
{
workload: [8, 10, 6, 12, 7, 6, 9],
your_workload: [6, 8, 4, 8, 12, 6, 2],
his_workload: [2, 9, 12, 7, 8, 9, 8]
},
{
markers : "value",
grid : false,
draw_axis : false,
plot_padding : 0,
stroke_width : 5,
show_vertical_labels : false,
show_horizontal_labels : false,
hover_color : "#000",
hover_text_color : "#fff",
datalabels : {
workload: "My workload",
your_workload: "Your workload",
his_workload: "His workload"
}
});Stacked area graphs only support positive ranges.
Stack graph:
var stackgraph = new Grafico.StackGraph($('stackgraph'),
{
workload: [8, 10, 6, 1, 7, 6, 9],
your_workload: [6, 8, 4, 1, 12, 6, 2],
his_workload: [2, 9, 12, 2, 8, 9, 8]
});Stack graph with custom options:
var stackgraph2 = new Grafico.StackGraph($('stackgraph2'),
{
workload: [8, 10, 6, 1, 7, 6, 9],
your_workload: [6, 8, 4, 1, 12, 6, 2],
his_workload: [2, 9, 12, 2, 8, 9, 8]
},
{
markers : "value",
draw_axis : false,
plot_padding : 0,
hover_text_color : "#fff",
background_color : "#fff",
datalabels: {
workload: "My workload",
your_workload: "Your workload",
his_workload: "His workload"
}
});Stack line graph:
var stackgraph3 = new Grafico.StackGraph($('stackgraph3'),
{
workload: [8, 10, 6, 1, 7, 6, 9],
your_workload: [6, 8, 4, 1, 12, 6, 2],
his_workload: [2, 9, 12, 2, 8, 9, 8]
},
{
stacked_fill : false,
markers : "value"
});Stream graphs are a special kind of stack graphs designed to show large amounts of volitile data, especially trends. The implementation is based on this paper.
Simple stream graph:
var streamgraph = new Grafico.StreamGraph($('streamgraph'),
{
workload: [8, 10, 6, 1, 7, 6, 9],
your_workload: [6, 8, 4, 1, 12, 6, 2],
his_workload: [2, 9, 12, 2, 8, 9, 8]
});Example with labels:
var streamgraph2 = new Grafico.StreamGraph($('streamgraph2'),
{
ie6: [10, 9, 5, 3, 2, 1, 1],
firefox: [ 0, 2, 4, 4, 5, 5, 5],
chrome: [ 0, 0, 0, 0, 1, 3, 3]
},
{
datalabels: {
ie: "Internet Explorer",
firefox: "Mozilla Firefox",
chrome: "Google Chrome"
}
});More complex stream graph:
The label for Harry Potter is not shown, as it does not reach the label threshold.
var streamgraph = new Grafico.StreamGraph($('streamgraph3'),
{
movie1: [30, 33, 20, 10, 5, 3, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0],
movie2: [10, 15, 25, 28, 29, 26, 20, 10, 3, 1, 1, 0, 0, 0, 0, 0],
movie3: [ 0, 4, 6, 8, 11, 13, 11, 9, 3, 0, 0, 0, 0, 0, 0, 0],
movie4: [ 0, 0, 0, 1, 4, 9, 19, 28, 35, 44, 45, 45, 35, 18, 6, 3],
movie5: [ 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 8, 20, 26, 29, 30, 31]
},
{
stream_line_smoothing: 'simple',
stream_smart_insertion: true,
stream_label_threshold: 20,
datalabels: {
movie1: "James Bond",
movie2: "Bourne Ultimatum",
movie3: "Harry Potter",
movie4: "Kill Bill",
movie5: "Return of the Mummie"
}
}
});Bar graph:
var bargraph = new Grafico.BarGraph($('bargraph'), [31, 12, 12, 10, 6, 4, 26]);Bar graph with custom options:
var bargraph2 = new Grafico.BarGraph($('bargraph2'),
[31, 12, 12, 10, 6, 4, 26],
{
labels : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
color : '#4b80b6',
meanline : true,
label_rotation : -30,
vertical_label_unit : "%",
bargraph_lastcolor : "#666666",
hover_color : "#006677",
datalabels : {one: ["January", "February", "March", "April", "May", "June", "July"]}
});Bar graph with negative values: Negative (horizontal) bargraphs require raphael 1.4+ in IE
var bargraph = new Grafico.BarGraph($('bargraph3'),
[31, 12, -12, -10, 6, -4, 26],
{
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
color: '#4b80b6',
meanline : true,
hover_color : "#006677",
bargraph_negativecolor : "#660000",
datalabels : {one: ["January", "February", "March", "April", "May", "June", "July"]}
});Stacked bar graphs only support positive ranges.
Stacked Bar graph:
var stackbargraph = new Grafico.StackedBarGraph($('stackbargraph'), {
a: [31, 12, 12, 10, 6, 4, 26],
b: [20, 4, 12, 21, 15, 16, 5]
});Stacked Bar graph with custom options:
var stackedbargraph2 = new Grafico.StackedBarGraph($('stackbargraph2'),
{
workload: [8, 10, 6, 12, 7, 6, 9],
your_workload: [6, 8, 4, 8, 12, 6, 2],
his_workload: [2, 9, 12, 7, 8, 9, 8]
},
{
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
colors: {
workload: '#f60',
your_workload: '#5f3',
his_workload: '#08c'
},
show_ticks: false,
hover_color: "#CC0000",
datalabels: {
workload: ["8hrs", "10hrs", "6hrs", "12hrs", "7hrs", "6hrs", "9hrs"],
your_workload: ["6hrs", "8hrs", "4hrs", "8hrs", "12hrs", "6hrs", "2hrs"],
his_workload: ["2hrs", "9hrs", "12hrs", "7hrs", "8hrs", "9hrs", "8hrs"]
},
});
});no specific options.
Horizontal Bar graph:
var horizgraph = new Grafico.HorizontalBarGraph($('horizgraph'), [30, 12, 12, 10, 6, 4, 26]);Horizontal Bar graph with custom options:
var horizgraph2 = new Grafico.HorizontalBarGraph($('horizgraph2'),
[30, 12, 12, 10, 6, 4, 26],
{
horizontal_rounded : true,
draw_axis : false,
grid : false,
label_rotation : -30,
color : '#4b80b6',
meanline : true,
vertical_label_unit : "%",
bargraph_lastcolor : "#666666",
hover_color : "#006677",
labels : ["January", "February", "March", "April", "May", "June", "July"],
datalabels : {one:["January", "February", "March", "April", "May", "June", "July"]},
label_max_size : 5
});Horizontal Bar graph with negative values
var horizgraph = new Grafico.HorizontalBarGraph($('horizgraph3'),
[30, -12, 12, 10, -6, -4, 26],
{
bargraph_negativecolor:"#f00",
horizontal_rounded:true,
datalabels: {one:["January", "February", "March", "April", "May", "June", "July"]}
});Sparkline:
var sparkline = new Grafico.SparkLine($('sparkline1'), [30, 12, 12, 10, 6, 4, 26]);Sparkline with custom options:
var sparkline2 = new Grafico.SparkLine($('sparkline2'),
[30, 12, 12, 10, 6, 4, 26],
{
stroke_width: 3,
color: '#4b80b6',
highlight: { index: 2, color: "#f00" },
acceptable_range: [10,20],
background_color: "#ddd"
});Sparkline with negative values:
var sparkline = new Grafico.SparkLine($('sparkline3'),
[30, 12, -12, -10, 6, 4, 26]
{
zeroline: true
});Sparkbar:
var sparkbar = new Grafico.SparkBar($('sparkbar1'), [30, 12, 12, 10, 6, 4, 26]);SparkBar with custom options:
var sparkbar2 = new Grafico.SparkBar($('sparkbar2'),
[30, 12, 12, 10, 6, 4, 26],
{
color : '#4b80b6',
acceptable_range : [0,20],
background_color : "#ddd",
bargraph_lastcolor: "#000"
});Sparkbar with negative values:
var sparkbar3 = new Grafico.SparkBar($('sparkbar3'),
[30, -12, 12, -10, -6, -4, 26],
{
zeroline : true,
bargraph_negativecolor : "#660"
});SparkArea:
var sparkarea = new Grafico.SparkArea($('sparkarea1'), [30, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26]);Sparkarea with custom options:
var sparkarea2 = new Grafico.SparkArea($('sparkarea2'),
[30, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26, 12, 12, 10, 6, 4, 26],
{
stroke_width : 1,
color: ['#4b80b6',"#ddd"],
highlight: {index: 20, color: "#f00"},
});