Fork me on GitHub

ico by alexyoung

Ico

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.

Usage

Graphs are created by instantiated classes. The available classes are:

Each 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.

Live Example


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
  }
);

Options for Ico.SparkLine

Options for Ico.SparkBar

Ico.SparkBar options are the same as Ico.SparkLine.

Shared Options for Ico.BarGraph, Ico.HorizontalBarGraph, and Ico.LineGraph

Options for Ico.BarGraph

Options for Ico.LineGraph

Grouped Bar Graphs

Multidimensional 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']
  }
);

Options for Ico.HorizontalBarGraph

Options for Ico.LineGraph

Data Normalisation

Data 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.