Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
277 lines (227 sloc) 11.1 KB
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>alexyoung/ico @ GitHub</title>
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
<style type="text/css">
body {
margin-top: 1.0em;
background-color: #ffffff;
font-family: Helvetica, Arial, FreeSans, san-serif;
color: #000000;
}
#container {
margin: 0 auto;
width: 700px;
}
h1 { font-size: 3.8em; color: #000000; margin-bottom: 3px; }
h1 .small { font-size: 0.4em; }
h1 a { text-decoration: none }
h2 { font-size: 1.5em; color: #000000; }
h3 { color: #000000; }
a { color: #000000; }
.description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
.download { float: right; }
pre { background: #000; color: #fff; padding: 15px;}
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
.footer { text-align:center; padding-top:30px; font-style: italic; }
code { padding: 2px 4px; }
/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */
pre .str, code .str { color: #65B042; } /* string - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
pre.prettyprint, code.prettyprint {
background-color: #111111;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
}
pre.prettyprint {
width: 95%;
margin: 1em auto;
padding: 1em;
white-space: pre-wrap;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }
@media print {
pre .str, code .str { color: #060; }
pre .kwd, code .kwd { color: #006; font-weight: bold; }
pre .com, code .com { color: #600; font-style: italic; }
pre .typ, code .typ { color: #404; font-weight: bold; }
pre .lit, code .lit { color: #044; }
pre .pun, code .pun { color: #440; }
pre .pln, code .pln { color: #000; }
pre .tag, code .tag { color: #006; font-weight: bold; }
pre .atn, code .atn { color: #404; }
pre .atv, code .atv { color: #060; }
}
.graph { width: 700px; height: 300px }
</style>
</head>
<body onload="prettyPrint()">
<a href="http://github.com/alexyoung/ico"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<div id="container">
<div class="download">
<a href="http://github.com/alexyoung/ico/zipball/master">
<img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
<a href="http://github.com/alexyoung/ico/tarball/master">
<img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
</div>
<h1><a href="http://github.com/alexyoung/ico">ico</a>
<span class="small">by <a href="http://github.com/alexyoung">alexyoung</a></span></h1>
<h3>Ico</h3>
<p>Ico (GitHub: <a href="https://github.com/alexyoung/ico">alexyoung / ico</a>, License: <em>MIT</em>) is a JavaScript graph library.</p>
<p>The <a href="http://alexyoung.github.com/ico/examples.html">Ico Example Page</a> has a lot of examples that demonstrate Ico's usage.</p>
<h3>Usage</h3>
<p>Graphs are created by instantiated classes. The available classes are:</p>
<ul>
<li><code>Ico.SparkLine</code>: Creates a small line graph intended for use within text</li>
<li><code>Ico.SparkBar</code>: Creates a small bar graph intended for use within text</li>
<li><code>Ico.BarGraph</code>: Creates a bar graph</li>
<li><code>Ico.HorizontalBarGraph</code>: Creates a horizontal bar graph</li>
<li><code>Ico.LineGraph</code>: Creates a line graph</li>
</ul>
<p>Each of these classes can be instantiated with the same arguments. The following examples use jQuery, but jQuery is not required to use Ico.</p>
<pre class="prettyprint lang-js"><code>
// 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 });
</code></pre>
<p>The third argument, <code>options</code>, may vary between graphs.</p>
<h3>Live Example</h3>
<pre class="prettyprint lang-js"><code>
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
}
);
</code></pre>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="ico.min.js"></script>
<div id="linegraph" class="graph"></div>
<script type="text/javascript">
new Ico.LineGraph(document.getElementById('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
}
);
</script>
<h3>Options for <code>Ico.SparkLine</code></h3>
<ul>
<li><code>width</code>: Width of the graph, defaults to the element's width</li>
<li><code>height</code>: Height of the graph, defaults to the element's height</li>
<li><code>highlight</code>: Highlight options <code>highlight: { colour: '#ff0000' }</code> -- used to pick out the last value</li>
<li><code>background_colour</code>: The graph's background colour, defaults to the element's background colour if set</li>
<li><code>colour</code>: The colour for drawing lines</li>
<li><code>acceptable_range</code>: An array of two values, <code>[min, max]</code>, for setting the size of the background rectangle</li>
</ul>
<h3>Options for <code>Ico.SparkBar</code></h3>
<p><code>Ico.SparkBar</code> options are the same as <code>Ico.SparkLine</code>.</p>
<h3>Shared Options for <code>Ico.BarGraph</code>, <code>Ico.HorizontalBarGraph</code>, and <code>Ico.LineGraph</code></h3>
<ul>
<li><code>width</code>: The width of the container element, defaults to the element's width</li>
<li><code>height</code>: The height of the container element, defaults to the element's height</li>
<li><code>background_colour</code>: The graph's background colour, defaults to the element's background colour if set</li>
<li><code>labels</code>: An array of text labels (for each bar or line)</li>
<li><code>show_horizontal_labels</code>: Set to <code>false</code> to hide horizontal labels</li>
<li><code>show_vertical_labels</code>: Set to <code>false</code> to hide vertical labels</li>
<li><code>label_count</code>: The number of numerical labels to display</li>
<li><code>label_step</code>: The value to increment each numerical label</li>
<li><code>start_value</code>: The value to start plotting from (generally 0). This can be used to force 0 in cases where the normaliser starts from another value</li>
<li><code>font_size</code>: The size of the fonts used in the graph</li>
<li><code>meanline</code>: Display a line through the mean value</li>
<li><code>grid</code>: Display a grid to make reading values easier</li>
<li><code>grid_colour</code>: Change the colour of the grid</li>
</ul>
<h3>Options for <code>Ico.BarGraph</code></h3>
<ul>
<li><code>colour</code>: The colour for the bars</li>
<li><code>colours</code>: An array of colours for each bar</li>
<li><code>highlight_colours</code>: An object with the index of a bar (starting from 0) and a colour, like this <code>{ 3: '#ff0000' }</code></li>
<li><code>bar_size</code>: Set the size for a bar in a bar graph</li>
<li><code>max_bar_size</code>: Set the maximum size for a bar in a bar graph</li>
<li><code>bar_labels</code>: Display the actual value of each bar in a bar graph</li>
<li><code>line</code>: Provide an array to plot a line alongside a bar graph</li>
</ul>
<h3>Options for <code>Ico.LineGraph</code></h3>
<ul>
<li><code>stroke_width</code>: Sets the stroke width, defaults to <code>3px</code>. Set to <code>0</code> to get a scatter plot</li>
</ul>
<h3>Grouped Bar Graphs</h3>
<p>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.</p>
<p>In grouped bar graphs, the index for <code>highlight_colours</code> is the index from left to right, starting from zero.</p>
<pre class="prettyprint lang-js"><code>
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']
}
);
</code></pre>
<div id="grouped_bars" class="graph"></div>
<script type="text/javascript">
new Ico.BarGraph(
document.getElementById('grouped_bars'),
[[10, 15], [18, 19], [17, 23], [11, 22]],
{ grid: true, font_size: 10,
colours: ['#ff0099', '#339933'],
labels: ['Winter', 'Spring', 'Summer', 'Autumn']
}
);
</script>
<h3>Options for <code>Ico.HorizontalBarGraph</code></h3>
<ul>
<li><code>bar_size</code>: Set the size for a bar in a bar graph</li>
<li><code>max_bar_size</code>: Set the maximum size for a bar in a bar graph</li>
</ul>
<h3>Options for <code>Ico.LineGraph</code></h3>
<ul>
<li><code>markers</code>: Set to <code>'circle'</code> to display markers at each point on a line graph</li>
<li><code>marker_size</code>: The size of each marker</li>
</ul>
<h3>Data Normalisation</h3>
<p>Data is mapped to plottable values by <code>Ico.Normaliser</code>. 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").</p>
<p>These values can be overridden by setting <code>start_value</code> and <code>label_step</code>. This can help display data that is difficult to plot, but you can raise issues through GitHub to report such data.</p>
</body>
</html>