Ico (GitHub: alexyoung / ico, License: MIT) is a JavaScript graph library.
The Ico Example Page has a lot of examples that demonstrate Ico's usage.
Graphs are created by instantiated classes. The available classes are:
Ico.SparkLine: Creates a small line graph intended for use within textIco.SparkBar: Creates a small bar graph intended for use within textIco.BarGraph: Creates a bar graphIco.HorizontalBarGraph: Creates a horizontal bar graphIco.LineGraph: Creates a line graphEach of these classes can be instantiated with the same arguments. The following examples use jQuery, but jQuery is not required to use Ico.
// Basic signature
new Ico.SparkLine(element, data, options);
// Real examples
new Ico.SparkLine($('#sparkline'),
[21, 41, 32, 1, 10, 5, 32, 10, 23],
{ width: 30, height: 14, background_colour: '#ccc' }
);
new Ico.BarGraph($('#bargraph'), { one: [44, 12, 17, 30, 11] }, { bar_labels: true });
The third argument, options, may vary between graphs.
new Ico.LineGraph($('#linegraph'), {
one: [30, 5, 1, 10, 15, 18, 20, 25, 1],
two: [10, 9, 3, 30, 1, 10, 5, 33, 33],
three: [5, 4, 10, 1, 30, 11, 33, 12, 22]
}, {
markers: 'circle',
colours: { one: '#990000', two: '#009900', three: '#000099'},
labels: ['one', 'two', 'three', 'four',
'five', 'six', 'seven', 'eight', 'nine'],
meanline: true,
grid: true
}
);
Ico.SparkLinewidth: Width of the graph, defaults to the element's widthheight: Height of the graph, defaults to the element's heighthighlight: Highlight options highlight: { colour: '#ff0000' } -- used to pick out the last valuebackground_colour: The graph's background colour, defaults to the element's background colour if setcolour: The colour for drawing linesacceptable_range: An array of two values, [min, max], for setting the size of the background rectangleIco.SparkBarIco.SparkBar options are the same as Ico.SparkLine.
Ico.BarGraph, Ico.HorizontalBarGraph, and Ico.LineGraphwidth: The width of the container element, defaults to the element's widthheight: The height of the container element, defaults to the element's heightbackground_colour: The graph's background colour, defaults to the element's background colour if setlabels: An array of text labels (for each bar or line)show_horizontal_labels: Set to false to hide horizontal labelsshow_vertical_labels: Set to false to hide vertical labelslabel_count: The number of numerical labels to displaylabel_step: The value to increment each numerical labelstart_value: The value to start plotting from (generally 0). This can be used to force 0 in cases where the normaliser starts from another valuefont_size: The size of the fonts used in the graphmeanline: Display a line through the mean valuegrid: Display a grid to make reading values easiergrid_colour: Change the colour of the gridIco.BarGraphcolour: The colour for the barscolours: An array of colours for each barhighlight_colours: An object with the index of a bar (starting from 0) and a colour, like this { 3: '#ff0000' }bar_size: Set the size for a bar in a bar graphmax_bar_size: Set the maximum size for a bar in a bar graphbar_labels: Display the actual value of each bar in a bar graphline: Provide an array to plot a line alongside a bar graphIco.LineGraphstroke_width: Sets the stroke width, defaults to 3px. Set to 0 to get a scatter plotMultidimensional arrays will be rendered as 'grouped' bar graphs. Notice that two colours are specified, one for each bar in the group. This is still a work in progress and hasn't been tested thoroughly yet.
In grouped bar graphs, the index for highlight_colours is the index from left to right, starting from zero.
new Ico.BarGraph(
$('grouped_bars'),
[[10, 15], [18, 19], [17, 23], [11, 22]],
{ grid: true, font_size: 10,
colours: ['#ff0099', '#339933'],
labels: ['Winter', 'Spring', 'Summer', 'Autumn']
}
);
Ico.HorizontalBarGraphbar_size: Set the size for a bar in a bar graphmax_bar_size: Set the maximum size for a bar in a bar graphIco.LineGraphmarkers: Set to 'circle' to display markers at each point on a line graphmarker_size: The size of each markerData is mapped to plottable values by Ico.Normaliser. In addition, this class attempts to calculate a sensible value to start plotting from on the X axis, and also calculates the width for each item (the "step").
These values can be overridden by setting start_value and label_step. This can help display data that is difficult to plot, but you can raise issues through GitHub to report such data.