Skip to content
Browse files

Converted tests to qunit, removed Jakefile.js and replaced with a Mak…

…efile
  • Loading branch information...
1 parent 02e6e74 commit 2b13d1b6ffebff2ca8c380e32efc707a3a1bb650 Alex Young committed Aug 24, 2011
View
2 .gitignore
@@ -1,4 +1,4 @@
*.swo
*.swp
.DS_Store
-reuters.html
+node_modules/
View
3 .gitmodules
@@ -1,3 +0,0 @@
-[submodule "test/riot"]
- path = test/riot
- url = git://github.com/alexyoung/riotjs.git
View
86 Jakefile.js
@@ -1,86 +0,0 @@
-var sys = require('sys'),
- path = require('path'),
- fs = require('fs'),
- jsmin = require('jsmin').jsmin,
- exec = require('child_process').exec,
- files;
-
-files = ('src/start.js src/helpers.js src/normaliser.js src/base.js '
- + 'src/graphs/base.js src/graphs/bar.js src/graphs/horizontal_bar.js '
- + 'src/graphs/line.js src/graphs/sparkline.js src/graphs/sparkbar.js '
- + 'src/end.js').split(' ');
-
-desc('Builds build/turing.js.');
-task('concat', [], function() {
- var filesLeft = files.length,
- pathName = '.',
- outFile = fs.openSync('ico.js', 'w+');
- files.forEach(function(fileName) {
- var fileName = path.join(pathName, fileName),
- contents = fs.readFileSync(fileName);
- fs.writeSync(outFile, contents.toString());
- });
- fs.closeSync(outFile);
-});
-
-desc('Minifies with uglify-js');
-task('min', ['concat'], function() {
- // uglify-js
- var uglify = require('uglify-js'),
- jsp = uglify.parser,
- pro = uglify.uglify,
- ast = jsp.parse(fs.readFileSync('ico.js').toString()),
- outFile = fs.openSync('ico-min.js', 'w+');
- ast = pro.ast_mangle(ast);
- ast = pro.ast_squeeze(ast);
- fs.writeSync(outFile, pro.gen_code(ast));
-});
-
-function lint(file) {
- var JSHINT = require('jshint').JSHINT,
- result = JSHINT(fs.readFileSync(file).toString(), {});
- if (result) {
- console.log(file + ': Lint passed');
- } else {
- console.log(file + ' ERRORS:');
- console.log(JSHINT.errors);
- }
-}
-
-desc('Lint');
-task('lint', [], function() {
- files.forEach(function(file) {
- if (file.match(/(start|end)\.js/)) return;
- lint(file);
- });
-
- lint('ico.js');
-});
-
-desc('Documentation');
-task('docs', [], function() {
- exec('dox --title Ico src/*.js src/graphs/*.js --intro docs/intro.md > docs/index.html');
- exec('cp ico-min.js docs/');
- exec('cp raphael.js docs/');
-});
-
-desc('Run tests');
-task('tests', [], function() {
- require.paths.unshift('./test/turing-test/lib/');
-
- fs.readdir('test', function(err, files) {
- files.forEach(function(file) {
- if (file.match(/^[^.](.*)test\.js$/)) {
- try {
- console.log('\n*** ' + file + '\n');
- require('./test/' + file);
- } catch(e) {
- }
- }
- });
- });
-});
-
-desc('Main build task');
-task('build', ['concat', 'min', 'docs'], function() {});
-
View
18 Makefile
@@ -0,0 +1,18 @@
+SRC = src/start.js src/helpers.js src/normaliser.js src/base.js src/graphs/base.js src/graphs/bar.js src/graphs/horizontal_bar.js src/graphs/line.js src/graphs/sparkline.js src/graphs/sparkbar.js src/end.js
+
+docs: build
+ ./node_modules/.bin/dox --title Ico src/*.js --intro docs/intro.md > docs/index.html
+
+lint: build
+ ./node_modules/.bin/jslint --onevar false ico.js
+
+build: $(SRC)
+ @cat $^ > ico.js
+
+min: build
+ ./node_modules/.bin/uglifyjs --no-mangle ico.js > ico.min.js
+
+test: build
+ ./node_modules/.bin/expresso
+
+.PHONY: lint docs test
View
836 docs/index.html
@@ -442,841 +442,5 @@
</code></pre>
</td>
-</tr><tr class="filename"><td><h2 id="src/graphs/bar.js"><a href="#">bar</a></h2></td><td>src/graphs/bar.js</td></tr><tr class="code">
-<td class="docs">
-<p>The BarGraph class.</p>
-
-<h2>Example</h2>
-
-<pre><code> new Ico.LineGraph($('linegraph_2'),
- [100, 10, 90, 20, 80, 30],
- { meanline: { stroke: '#AA0000' },
- grid: true } );</code></pre>
-
-<p> </p>
-</td>
-<td class="code">
-<pre><code><span class="class">Ico</span>.<span class="class">BarGraph</span> = <span class="keyword">function</span>() { <span class="this">this</span>.<span class="variable">initialize</span>.<span class="variable">apply</span>(<span class="this">this</span>, <span class="variable">arguments</span>); };
-<span class="class">Object</span>.<span class="variable">extend</span>(<span class="class">Ico</span>.<span class="class">BarGraph</span>.<span class="variable">prototype</span>, <span class="class">Ico</span>.<span class="class">BaseGraph</span>.<span class="variable">prototype</span>);
-<span class="class">Object</span>.<span class="variable">extend</span>(<span class="class">Ico</span>.<span class="class">BarGraph</span>.<span class="variable">prototype</span>, {</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p>Sensible defaults for BarGraph.
- </p>
-</td>
-<td class="code">
-<pre><code><span class="variable">chartDefaults</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> { <span class="variable">plot_padding</span>: <span class="number integer">0</span> };
- },</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p>Ensures the normalises is always 0.
- </p>
-</td>
-<td class="code">
-<pre><code><span class="variable">normaliserOptions</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> { <span class="variable">start_value</span>: <span class="number integer">0</span> };
- },</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p>Options specific to BarGraph.
- </p>
-</td>
-<td class="code">
-<pre><code><span class="variable">setChartSpecificOptions</span>: <span class="keyword">function</span>() {
- <span class="this">this</span>.<span class="variable">bar_padding</span> = <span class="number integer">5</span>;
- <span class="this">this</span>.<span class="variable">bar_width</span> = <span class="this">this</span>.<span class="variable">calculateBarWidth</span>();
- <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">plot_padding</span> = (<span class="this">this</span>.<span class="variable">bar_width</span> / <span class="number integer">2</span>);
- <span class="this">this</span>.<span class="variable">step</span> = <span class="this">this</span>.<span class="variable">calculateStep</span>();
- <span class="this">this</span>.<span class="variable">grid_start_offset</span> = <span class="this">this</span>.<span class="variable">bar_padding</span> - <span class="number integer">1</span>;
- <span class="this">this</span>.<span class="variable">start_y</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">y_padding_bottom</span>;
- },</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p>Calculates the width of each bar.</p>
-
-<h2></h2>
-
-<ul><li><p><strong>returns</strong>: <em>Integer</em> The bar width</p></li></ul>
-</td>
-<td class="code">
-<pre><code><span class="variable">calculateBarWidth</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> (<span class="this">this</span>.<span class="variable">graph_width</span> / <span class="this">this</span>.<span class="variable">data_size</span>) - <span class="this">this</span>.<span class="variable">bar_padding</span>;
- },</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p>Calculates step used to move from one bar to another.</p>
-
-<h2></h2>
-
-<ul><li><p><strong>returns</strong>: <em>Float</em> The start value </p></li></ul>
-</td>
-<td class="code">
-<pre><code><span class="variable">calculateStep</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> (<span class="this">this</span>.<span class="variable">graph_width</span> - (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">plot_padding</span> * <span class="number integer">2</span>) - (<span class="this">this</span>.<span class="variable">bar_padding</span> * <span class="number integer">2</span>)) / <span class="variable">validStepDivider</span>(<span class="this">this</span>.<span class="variable">data_size</span>);
- },</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p>Generates paths for Raphael.</p>
-
-<h2></h2>
-
-<ul><li><p><strong>param</strong>: <em>Integer</em> index The index of the data value to plot</p></li><li><p><strong>param</strong>: <em>String</em> pathString The pathString so far</p></li><li><p><strong>param</strong>: <em>Integer</em> x The x-coord to plot </p></li><li><p><strong>param</strong>: <em>Integer</em> y The y-coord to plot </p></li><li><p><strong>param</strong>: <em>String</em> colour A string that represents a colour</p></li><li><p><strong>returns</strong>: <em>String</em> The resulting path string </p></li></ul>
-</td>
-<td class="code">
-<pre><code><span class="variable">drawPlot</span>: <span class="keyword">function</span>(<span class="variable">index</span>, <span class="variable">pathString</span>, <span class="variable">x</span>, <span class="variable">y</span>, <span class="variable">colour</span>) {
- <span class="variable">x</span> = <span class="variable">x</span> + <span class="this">this</span>.<span class="variable">bar_padding</span>;
- <span class="variable">pathString</span> += <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="this">this</span>.<span class="variable">start_y</span>;
- <span class="variable">pathString</span> += <span class="string">'L'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="variable">y</span>;
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">path</span>(<span class="variable">pathString</span>).<span class="variable">attr</span>({<span class="variable">stroke</span>: <span class="variable">colour</span>, <span class="string">'stroke-width'</span>: <span class="this">this</span>.<span class="variable">bar_width</span> + <span class="string">'px'</span>});
- <span class="variable">pathString</span> = <span class="string">''</span>;
- <span class="variable">x</span> = <span class="variable">x</span> + <span class="this">this</span>.<span class="variable">step</span>;
- <span class="variable">pathString</span> += <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="this">this</span>.<span class="variable">start_y</span>;
- <span class="keyword">return</span> <span class="variable">pathString</span>;
- },</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Change the standard options to correctly offset against the bars </p>
-</td>
-<td class="code">
-<pre><code><span class="variable">drawHorizontalLabels</span>: <span class="keyword">function</span>() {
- <span class="keyword">var</span> <span class="variable">x_start</span> = <span class="this">this</span>.<span class="variable">bar_padding</span> + <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">plot_padding</span>;
- <span class="this">this</span>.<span class="variable">drawMarkers</span>(<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">labels</span>, [<span class="number integer">1</span>, <span class="number integer">0</span>], <span class="this">this</span>.<span class="variable">step</span>, <span class="variable">x_start</span>, [<span class="number integer">0</span>, (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">font_size</span> + <span class="number integer">7</span>) * -<span class="number integer">1</span>]);
- }
-});
-
-</code></pre>
-</td>
-</tr><tr class="filename"><td><h2 id="src/graphs/base.js"><a href="#">base</a></h2></td><td>src/graphs/base.js</td></tr><tr class="code">
-<td class="docs">
-<p>Ico.BaseGraph is extended by most of the other graphs. It
-uses a simple pattern with methods that can be overridden.
- </p>
-</td>
-<td class="code">
-<pre><code><span class="class">Ico</span>.<span class="class">BaseGraph</span> = <span class="keyword">function</span>() { <span class="this">this</span>.<span class="variable">initialize</span>.<span class="variable">apply</span>(<span class="this">this</span>, <span class="variable">arguments</span>); };
-<span class="class">Object</span>.<span class="variable">extend</span>(<span class="class">Ico</span>.<span class="class">BaseGraph</span>.<span class="variable">prototype</span>, <span class="class">Ico</span>.<span class="class">Base</span>);
-<span class="class">Object</span>.<span class="variable">extend</span>(<span class="class">Ico</span>.<span class="class">BaseGraph</span>.<span class="variable">prototype</span>, {</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Data is expected to be a list, the list names are used as labels </p>
-</td>
-<td class="code">
-<pre><code><span class="variable">initialize</span>: <span class="keyword">function</span>(<span class="variable">element</span>, <span class="variable">data</span>, <span class="variable">options</span>) {
- <span class="this">this</span>.<span class="variable">element</span> = <span class="variable">element</span>;
-
- <span class="this">this</span>.<span class="variable">data_sets</span> = <span class="this">this</span>.<span class="variable">buildDataSets</span>(<span class="variable">data</span>, <span class="variable">options</span>);
- <span class="this">this</span>.<span class="variable">flat_data</span> = <span class="this">this</span>.<span class="variable">flatten</span>(<span class="variable">data</span>);
-
- <span class="this">this</span>.<span class="variable">data_size</span> = <span class="this">this</span>.<span class="variable">longestDataSetLength</span>();</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> If one colour is specified, map it to a compatible set </p>
-</td>
-<td class="code">
-<pre><code><span class="keyword">if</span> (<span class="variable">options</span> &<span class="variable">amp</span>;&<span class="variable">amp</span>; <span class="variable">options</span>.<span class="variable">colour</span>) {
- <span class="variable">options</span>.<span class="variable">colours</span> = {};
- <span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">key</span> <span class="keyword">in</span> <span class="this">this</span>.<span class="variable">data_sets</span>) {
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">data_sets</span>.<span class="variable">hasOwnProperty</span>(<span class="variable">key</span>))
- <span class="variable">options</span>.<span class="variable">colours</span>[<span class="variable">key</span>] = <span class="variable">options</span>.<span class="variable">colour</span>;
- }
- }
-
- <span class="this">this</span>.<span class="variable">options</span> = {
- <span class="variable">width</span>: <span class="variable">parseInt</span>(<span class="variable">getStyle</span>(<span class="variable">element</span>, <span class="string">'width'</span>), <span class="number integer">10</span>),
- <span class="variable">height</span>: <span class="variable">parseInt</span>(<span class="variable">getStyle</span>(<span class="variable">element</span>, <span class="string">'height'</span>), <span class="number integer">10</span>),
- <span class="variable">labels</span>: <span class="this">this</span>.<span class="variable">makeRange</span>(<span class="number integer">1</span>, <span class="this">this</span>.<span class="variable">data_size</span> + <span class="number integer">1</span>), <span class="comment">// Label data</span>
- <span class="variable">plot_padding</span>: <span class="number integer">10</span>, <span class="comment">// Padding for the graph line/bar plots</span>
- <span class="variable">font_size</span>: <span class="number integer">10</span>, <span class="comment">// Label font size</span>
- <span class="variable">show_horizontal_labels</span>: <span class="variable">true</span>,
- <span class="variable">show_vertical_labels</span>: <span class="variable">true</span>,
- <span class="variable">background_colour</span>: <span class="variable">getStyle</span>(<span class="variable">element</span>, <span class="string">'backgroundColor'</span>) || <span class="string">'#ffffff'</span>,
- <span class="variable">label_colour</span>: <span class="string">'#666'</span>, <span class="comment">// Label text colour</span>
- <span class="variable">markers</span>: <span class="variable">false</span>, <span class="comment">// false, circle</span>
- <span class="variable">marker_size</span>: <span class="number integer">5</span>,
- <span class="variable">meanline</span>: <span class="variable">false</span>,
- <span class="variable">grid</span>: <span class="variable">false</span>,
- <span class="variable">grid_colour</span>: <span class="string">'#ccc'</span>,
- <span class="variable">y_padding_top</span>: <span class="number integer">20</span>,
- <span class="variable">draw</span>: <span class="variable">true</span>
- };
- <span class="class">Object</span>.<span class="variable">extend</span>(<span class="this">this</span>.<span class="variable">options</span>, <span class="this">this</span>.<span class="variable">chartDefaults</span>() || { });
- <span class="class">Object</span>.<span class="variable">extend</span>(<span class="this">this</span>.<span class="variable">options</span>, <span class="variable">options</span> || { });
-
- <span class="this">this</span>.<span class="variable">normaliser</span> = <span class="keyword">new</span> <span class="class">Ico</span>.<span class="class">Normaliser</span>(<span class="this">this</span>.<span class="variable">flat_data</span>, <span class="this">this</span>.<span class="variable">normaliserOptions</span>());
- <span class="this">this</span>.<span class="variable">label_step</span> = <span class="this">this</span>.<span class="variable">normaliser</span>.<span class="variable">step</span>;
- <span class="this">this</span>.<span class="variable">range</span> = <span class="this">this</span>.<span class="variable">normaliser</span>.<span class="variable">range</span>;
- <span class="this">this</span>.<span class="variable">start_value</span> = <span class="this">this</span>.<span class="variable">normaliser</span>.<span class="variable">start_value</span>;</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Padding around the graph area to make room for labels </p>
-</td>
-<td class="code">
-<pre><code><span class="this">this</span>.<span class="variable">x_padding_left</span> = <span class="number integer">10</span> + <span class="this">this</span>.<span class="variable">paddingLeftOffset</span>();
- <span class="this">this</span>.<span class="variable">x_padding_right</span> = <span class="number integer">20</span>;
- <span class="this">this</span>.<span class="variable">x_padding</span> = <span class="this">this</span>.<span class="variable">x_padding_left</span> + <span class="this">this</span>.<span class="variable">x_padding_right</span>;
- <span class="this">this</span>.<span class="variable">y_padding_top</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">y_padding_top</span>;
- <span class="this">this</span>.<span class="variable">y_padding_bottom</span> = <span class="number integer">20</span> + <span class="this">this</span>.<span class="variable">paddingBottomOffset</span>();
- <span class="this">this</span>.<span class="variable">y_padding</span> = <span class="this">this</span>.<span class="variable">y_padding_top</span> + <span class="this">this</span>.<span class="variable">y_padding_bottom</span>;
-
- <span class="this">this</span>.<span class="variable">graph_width</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">width</span> - (<span class="this">this</span>.<span class="variable">x_padding</span>);
- <span class="this">this</span>.<span class="variable">graph_height</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - (<span class="this">this</span>.<span class="variable">y_padding</span>);
-
- <span class="this">this</span>.<span class="variable">step</span> = <span class="this">this</span>.<span class="variable">calculateStep</span>();</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Calculate how many labels are required </p>
-</td>
-<td class="code">
-<pre><code><span class="this">this</span>.<span class="variable">y_label_count</span> = <span class="class">Math</span>.<span class="variable">ceil</span>(<span class="this">this</span>.<span class="variable">range</span> / <span class="this">this</span>.<span class="variable">label_step</span>);
- <span class="keyword">if</span> ((<span class="this">this</span>.<span class="variable">normaliser</span>.<span class="variable">min</span> + (<span class="this">this</span>.<span class="variable">y_label_count</span> * <span class="this">this</span>.<span class="variable">normaliser</span>.<span class="variable">step</span>)) &<span class="variable">lt</span>; <span class="this">this</span>.<span class="variable">normaliser</span>.<span class="variable">max</span>) {
- <span class="this">this</span>.<span class="variable">y_label_count</span> += <span class="number integer">1</span>;
- }
- <span class="this">this</span>.<span class="variable">value_labels</span> = <span class="this">this</span>.<span class="variable">makeValueLabels</span>(<span class="this">this</span>.<span class="variable">y_label_count</span>);
- <span class="this">this</span>.<span class="variable">top_value</span> = <span class="this">this</span>.<span class="variable">value_labels</span>[<span class="this">this</span>.<span class="variable">value_labels</span>.<span class="variable">length</span> - <span class="number integer">1</span>];</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Grid control options </p>
-</td>
-<td class="code">
-<pre><code><span class="this">this</span>.<span class="variable">grid_start_offset</span> = -<span class="number integer">1</span>;</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Drawing </p>
-</td>
-<td class="code">
-<pre><code><span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">draw</span>) {
- <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">colours</span> === <span class="string">'undefined'</span>) {
- <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">colours</span> = <span class="this">this</span>.<span class="variable">makeRandomColours</span>();
- }
-
- <span class="this">this</span>.<span class="variable">paper</span> = <span class="class">Raphael</span>(<span class="this">this</span>.<span class="variable">element</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">width</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span>);
- <span class="this">this</span>.<span class="variable">background</span> = <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">rect</span>(<span class="number integer">0</span>, <span class="number integer">0</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">width</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span>);
- <span class="this">this</span>.<span class="variable">background</span>.<span class="variable">attr</span>({<span class="variable">fill</span>: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">background_colour</span>, <span class="variable">stroke</span>: <span class="string">'none'</span> });
-
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">meanline</span> === <span class="variable">true</span>) {
- <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">meanline</span> = { <span class="string">'stroke-width'</span>: <span class="string">'2px'</span>, <span class="variable">stroke</span>: <span class="string">'#BBBBBB'</span> };
- }
-
- <span class="this">this</span>.<span class="variable">setChartSpecificOptions</span>();
- <span class="this">this</span>.<span class="variable">lastPoint</span> = { <span class="variable">x</span>: <span class="number integer">0</span>, <span class="variable">y</span>: <span class="number integer">0</span> };
- <span class="this">this</span>.<span class="variable">draw</span>();
- }
- },
-
- <span class="variable">buildDataSets</span>: <span class="keyword">function</span>(<span class="variable">data</span>, <span class="variable">options</span>) {
- <span class="keyword">return</span> (<span class="keyword">typeof</span> <span class="variable">data</span>.<span class="variable">length</span> !== <span class="string">'undefined'</span>) ? { <span class="string">'one'</span>: <span class="variable">data</span> } : <span class="variable">data</span>;
- },
-
- <span class="variable">normaliserOptions</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> {};
- },
-
- <span class="variable">chartDefaults</span>: <span class="keyword">function</span>() {</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Define in child class </p>
-</td>
-<td class="code">
-<pre><code><span class="keyword">return</span> {};
- },
-
- <span class="variable">drawPlot</span>: <span class="keyword">function</span>(<span class="variable">index</span>, <span class="variable">pathString</span>, <span class="variable">x</span>, <span class="variable">y</span>, <span class="variable">colour</span>) {</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Define in child class </p>
-</td>
-<td class="code">
-<pre><code>},
-
- <span class="variable">calculateStep</span>: <span class="keyword">function</span>() {</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Define in child classes </p>
-</td>
-<td class="code">
-<pre><code>},
-
- <span class="variable">makeRandomColours</span>: <span class="keyword">function</span>() {
- <span class="keyword">var</span> <span class="variable">colours</span> = {};
- <span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">key</span> <span class="keyword">in</span> <span class="this">this</span>.<span class="variable">data_sets</span>) {
- <span class="keyword">if</span> (!<span class="variable">colours</span>.<span class="variable">hasOwnProperty</span>(<span class="variable">key</span>))
- <span class="variable">colours</span>[<span class="variable">key</span>] = <span class="class">Raphael</span>.<span class="variable">hsb2rgb</span>(<span class="class">Math</span>.<span class="variable">random</span>(), <span class="number integer">1</span>, <span class="number float">0.75</span>).<span class="variable">hex</span>;
- }
- <span class="keyword">return</span> <span class="variable">colours</span>;
- },
-
- <span class="variable">longestDataSetLength</span>: <span class="keyword">function</span>() {
- <span class="keyword">var</span> <span class="variable">length</span> = <span class="number integer">0</span>;
- <span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">key</span> <span class="keyword">in</span> <span class="this">this</span>.<span class="variable">data_sets</span>) {
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">data_sets</span>.<span class="variable">hasOwnProperty</span>(<span class="variable">key</span>)) {
- <span class="variable">length</span> = <span class="this">this</span>.<span class="variable">data_sets</span>[<span class="variable">key</span>].<span class="variable">length</span> &<span class="variable">gt</span>; <span class="variable">length</span> ? <span class="this">this</span>.<span class="variable">data_sets</span>[<span class="variable">key</span>].<span class="variable">length</span> : <span class="variable">length</span>;
- }
- }
- <span class="keyword">return</span> <span class="variable">length</span>;
- },
-
- <span class="variable">roundValue</span>: <span class="keyword">function</span>(<span class="variable">value</span>, <span class="variable">length</span>) {
- <span class="keyword">var</span> <span class="variable">multiplier</span> = <span class="class">Math</span>.<span class="variable">pow</span>(<span class="number integer">10</span>, <span class="variable">length</span>);
- <span class="variable">value</span> *= <span class="variable">multiplier</span>;
- <span class="variable">value</span> = <span class="class">Math</span>.<span class="variable">round</span>(<span class="variable">value</span>) / <span class="variable">multiplier</span>;
- <span class="keyword">return</span> <span class="variable">value</span>;
- },
-
- <span class="variable">roundValues</span>: <span class="keyword">function</span>(<span class="variable">data</span>, <span class="variable">length</span>) {
- <span class="keyword">var</span> <span class="variable">roundedData</span> = [];
- <span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">i</span> = <span class="number integer">0</span>; <span class="variable">i</span> &<span class="variable">lt</span>; <span class="variable">data</span>.<span class="variable">length</span>; <span class="variable">i</span>++) {
- <span class="variable">roundedData</span>.<span class="variable">push</span>(<span class="this">this</span>.<span class="variable">roundValue</span>(<span class="variable">data</span>[<span class="variable">i</span>], <span class="variable">length</span>));
- }
- <span class="keyword">return</span> <span class="variable">roundedData</span>;
- },
-
- <span class="variable">longestLabel</span>: <span class="keyword">function</span>(<span class="variable">values</span>) {
- <span class="keyword">var</span> <span class="variable">labels</span> = <span class="class">Array</span>.<span class="variable">prototype</span>.<span class="variable">slice</span>.<span class="variable">call</span>(<span class="variable">values</span> || <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">labels</span>, <span class="number integer">0</span>);
- <span class="keyword">return</span> <span class="variable">labels</span>.<span class="variable">sort</span>(<span class="keyword">function</span>(<span class="variable">a</span>, <span class="variable">b</span>) { <span class="keyword">return</span> <span class="variable">a</span>.<span class="variable">toString</span>().<span class="variable">length</span> &<span class="variable">lt</span>; <span class="variable">b</span>.<span class="variable">toString</span>().<span class="variable">length</span>; })[<span class="number integer">0</span>].<span class="variable">toString</span>().<span class="variable">length</span>;
- },
-
- <span class="variable">paddingLeftOffset</span>: <span class="keyword">function</span>() {</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Find the longest label and multiply it by the font size </p>
-</td>
-<td class="code">
-<pre><code><span class="keyword">var</span> <span class="variable">data</span> = <span class="this">this</span>.<span class="variable">roundValues</span>(<span class="this">this</span>.<span class="variable">flat_data</span>, <span class="number integer">2</span>),
- <span class="variable">longest_label_length</span> = <span class="number integer">0</span>;
-
- <span class="variable">longest_label_length</span> = <span class="variable">data</span>.<span class="variable">sort</span>(<span class="keyword">function</span>(<span class="variable">a</span>, <span class="variable">b</span>) {
- <span class="keyword">return</span> <span class="variable">a</span>.<span class="variable">toString</span>().<span class="variable">length</span> &<span class="variable">lt</span>; <span class="variable">b</span>.<span class="variable">toString</span>().<span class="variable">length</span>;
- })[<span class="number integer">0</span>].<span class="variable">toString</span>().<span class="variable">length</span>;
-
- <span class="variable">longest_label_length</span> = <span class="variable">longest_label_length</span> &<span class="variable">gt</span>; <span class="number integer">2</span> ? <span class="variable">longest_label_length</span> - <span class="number integer">1</span> : <span class="variable">longest_label_length</span>;
- <span class="keyword">return</span> <span class="number integer">10</span> + (<span class="variable">longest_label_length</span> * <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">font_size</span>);
- },
-
- <span class="variable">paddingBottomOffset</span>: <span class="keyword">function</span>() {</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Find the longest label and multiply it by the font size </p>
-</td>
-<td class="code">
-<pre><code><span class="keyword">return</span> <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">font_size</span>;
- },
-
- <span class="variable">normalise</span>: <span class="keyword">function</span>(<span class="variable">value</span>) {
- <span class="keyword">var</span> <span class="variable">total</span> = <span class="this">this</span>.<span class="variable">start_value</span> === <span class="number integer">0</span> ? <span class="this">this</span>.<span class="variable">top_value</span> : <span class="this">this</span>.<span class="variable">range</span>;
- <span class="keyword">return</span> ((<span class="variable">value</span> / <span class="variable">total</span>) * (<span class="this">this</span>.<span class="variable">graph_height</span>));
- },
-
- <span class="variable">draw</span>: <span class="keyword">function</span>() {
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">grid</span>) {
- <span class="this">this</span>.<span class="variable">drawGrid</span>();
- }
-
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">meanline</span>) {
- <span class="this">this</span>.<span class="variable">drawMeanLine</span>(<span class="this">this</span>.<span class="variable">normaliseData</span>(<span class="this">this</span>.<span class="variable">flat_data</span>));
- }
-
- <span class="this">this</span>.<span class="variable">drawAxis</span>();
-
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">show_vertical_labels</span>) {
- <span class="this">this</span>.<span class="variable">drawVerticalLabels</span>();
- }
-
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">show_horizontal_labels</span>) {
- <span class="this">this</span>.<span class="variable">drawHorizontalLabels</span>();
- }
-
- <span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">key</span> <span class="keyword">in</span> <span class="this">this</span>.<span class="variable">data_sets</span>) {
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">data_sets</span>.<span class="variable">hasOwnProperty</span>(<span class="variable">key</span>)) {
- <span class="keyword">var</span> <span class="variable">data</span> = <span class="this">this</span>.<span class="variable">data_sets</span>[<span class="variable">key</span>];
- <span class="this">this</span>.<span class="variable">drawLines</span>(<span class="variable">key</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">colours</span>[<span class="variable">key</span>], <span class="this">this</span>.<span class="variable">normaliseData</span>(<span class="variable">data</span>));
- }
- }
-
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">start_value</span> !== <span class="number integer">0</span>) {
- <span class="this">this</span>.<span class="variable">drawFocusHint</span>();
- }
- },
-
- <span class="variable">drawGrid</span>: <span class="keyword">function</span>() {
- <span class="keyword">var</span> <span class="variable">pathString</span> = <span class="string">''</span>, <span class="variable">i</span>;
-
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">show_vertical_labels</span>) {
- <span class="keyword">var</span> <span class="variable">y</span> = <span class="this">this</span>.<span class="variable">graph_height</span> + <span class="this">this</span>.<span class="variable">y_padding_top</span>;
- <span class="keyword">for</span> (<span class="variable">i</span> = <span class="number integer">0</span>; <span class="variable">i</span> &<span class="variable">lt</span>; <span class="this">this</span>.<span class="variable">y_label_count</span>; <span class="variable">i</span>++) {
- <span class="variable">y</span> = <span class="variable">y</span> - (<span class="this">this</span>.<span class="variable">graph_height</span> / <span class="this">this</span>.<span class="variable">y_label_count</span>);
- <span class="variable">pathString</span> += <span class="string">'M'</span> + <span class="this">this</span>.<span class="variable">x_padding_left</span> + <span class="string">','</span> + <span class="variable">y</span>;
- <span class="variable">pathString</span> += <span class="string">'L'</span> + (<span class="this">this</span>.<span class="variable">x_padding_left</span> + <span class="this">this</span>.<span class="variable">graph_width</span>) + <span class="string">','</span> + <span class="variable">y</span>;
- }
- }
-
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">show_horizontal_labels</span>) {
- <span class="keyword">var</span> <span class="variable">x</span> = <span class="this">this</span>.<span class="variable">x_padding_left</span> + <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">plot_padding</span> + <span class="this">this</span>.<span class="variable">grid_start_offset</span>,
- <span class="variable">x_labels</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">labels</span>.<span class="variable">length</span>;
-
- <span class="keyword">for</span> (<span class="variable">i</span> = <span class="number integer">0</span>; <span class="variable">i</span> &<span class="variable">lt</span>; <span class="variable">x_labels</span>; <span class="variable">i</span>++) {
- <span class="variable">pathString</span> += <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="this">this</span>.<span class="variable">y_padding_top</span>;
- <span class="variable">pathString</span> += <span class="string">'L'</span> + <span class="variable">x</span> +<span class="string">','</span> + (<span class="this">this</span>.<span class="variable">y_padding_top</span> + <span class="this">this</span>.<span class="variable">graph_height</span>);
- <span class="variable">x</span> = <span class="variable">x</span> + <span class="this">this</span>.<span class="variable">step</span>;
- }
-
- <span class="variable">x</span> = <span class="variable">x</span> - <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">plot_padding</span> - <span class="number integer">1</span>;
- <span class="variable">pathString</span> += <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="this">this</span>.<span class="variable">y_padding_top</span>;
- <span class="variable">pathString</span> += <span class="string">'L'</span> + <span class="variable">x</span> + <span class="string">','</span> + (<span class="this">this</span>.<span class="variable">y_padding_top</span> + <span class="this">this</span>.<span class="variable">graph_height</span>);
- }
-
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">path</span>(<span class="variable">pathString</span>).<span class="variable">attr</span>({ <span class="variable">stroke</span>: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">grid_colour</span>, <span class="string">'stroke-width'</span>: <span class="string">'1px'</span>});
- },
-
- <span class="variable">drawLines</span>: <span class="keyword">function</span>(<span class="keyword">label</span>, <span class="variable">colour</span>, <span class="variable">data</span>) {
- <span class="keyword">var</span> <span class="variable">coords</span> = <span class="this">this</span>.<span class="variable">calculateCoords</span>(<span class="variable">data</span>),
- <span class="variable">pathString</span> = <span class="string">''</span>;
-
- <span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">i</span> = <span class="number integer">0</span>; <span class="variable">i</span> &<span class="variable">lt</span>; <span class="variable">coords</span>.<span class="variable">length</span>; <span class="variable">i</span>++) {
- <span class="keyword">var</span> <span class="variable">x</span> = <span class="variable">coords</span>[<span class="variable">i</span>][<span class="number integer">0</span>] || <span class="number integer">0</span>,
- <span class="variable">y</span> = <span class="variable">coords</span>[<span class="variable">i</span>][<span class="number integer">1</span>] || <span class="number integer">0</span>;
- <span class="variable">pathString</span> = <span class="this">this</span>.<span class="variable">drawPlot</span>(<span class="variable">i</span>, <span class="variable">pathString</span>, <span class="variable">x</span>, <span class="variable">y</span>, <span class="variable">colour</span>);
- }
-
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">path</span>(<span class="variable">pathString</span>).<span class="variable">attr</span>({<span class="variable">stroke</span>: <span class="variable">colour</span>, <span class="string">'stroke-width'</span>: <span class="string">'3px'</span>});
- },
-
- <span class="variable">calculateCoords</span>: <span class="keyword">function</span>(<span class="variable">data</span>) {
- <span class="keyword">var</span> <span class="variable">x</span> = <span class="this">this</span>.<span class="variable">x_padding_left</span> + <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">plot_padding</span> - <span class="this">this</span>.<span class="variable">step</span>,
- <span class="variable">y_offset</span> = (<span class="this">this</span>.<span class="variable">graph_height</span> + <span class="this">this</span>.<span class="variable">y_padding_top</span>) + <span class="this">this</span>.<span class="variable">normalise</span>(<span class="this">this</span>.<span class="variable">start_value</span>),
- <span class="variable">y</span> = <span class="number integer">0</span>,
- <span class="variable">coords</span> = [];
- <span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">i</span> = <span class="number integer">0</span>; <span class="variable">i</span> &<span class="variable">lt</span>; <span class="variable">data</span>.<span class="variable">length</span>; <span class="variable">i</span>++) {
- <span class="variable">y</span> = <span class="variable">y_offset</span> - <span class="variable">data</span>[<span class="variable">i</span>];
- <span class="variable">x</span> = <span class="variable">x</span> + <span class="this">this</span>.<span class="variable">step</span>;
- <span class="variable">coords</span>.<span class="variable">push</span>([<span class="variable">x</span>, <span class="variable">y</span>]);
- }
- <span class="keyword">return</span> <span class="variable">coords</span>;
- },
-
- <span class="variable">drawFocusHint</span>: <span class="keyword">function</span>() {
- <span class="keyword">var</span> <span class="variable">length</span> = <span class="number integer">5</span>,
- <span class="variable">x</span> = <span class="this">this</span>.<span class="variable">x_padding_left</span> + (<span class="variable">length</span> / <span class="number integer">2</span>) - <span class="number integer">1</span>,
- <span class="variable">y</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">y_padding_bottom</span>,
- <span class="variable">pathString</span> = <span class="string">''</span>;
-
- <span class="variable">pathString</span> += <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="variable">y</span>;
- <span class="variable">pathString</span> += <span class="string">'L'</span> + (<span class="variable">x</span> - <span class="variable">length</span>) + <span class="string">','</span> + (<span class="variable">y</span> - <span class="variable">length</span>);
- <span class="variable">pathString</span> += <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + (<span class="variable">y</span> - <span class="variable">length</span>);
- <span class="variable">pathString</span> += <span class="string">'L'</span> + (<span class="variable">x</span> - <span class="variable">length</span>) + <span class="string">','</span> + (<span class="variable">y</span> - (<span class="variable">length</span> * <span class="number integer">2</span>));
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">path</span>(<span class="variable">pathString</span>).<span class="variable">attr</span>({<span class="variable">stroke</span>: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">label_colour</span>, <span class="string">'stroke-width'</span>: <span class="number integer">2</span>});
- },
-
- <span class="variable">drawMeanLine</span>: <span class="keyword">function</span>(<span class="variable">data</span>) {
- <span class="keyword">var</span> <span class="variable">offset</span> = <span class="variable">data</span>.<span class="variable">sum</span>() / <span class="variable">data</span>.<span class="variable">length</span>,
- <span class="variable">pathString</span> = <span class="string">''</span>;
-
- <span class="variable">pathString</span> += <span class="string">'M'</span> + (<span class="this">this</span>.<span class="variable">x_padding_left</span> - <span class="number integer">1</span>) + <span class="string">','</span> + (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">y_padding_bottom</span> - <span class="variable">offset</span>);
- <span class="variable">pathString</span> += <span class="string">'L'</span> + (<span class="this">this</span>.<span class="variable">graph_width</span> + <span class="this">this</span>.<span class="variable">x_padding_left</span>) + <span class="string">','</span> + (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">y_padding_bottom</span> - <span class="variable">offset</span>);
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">path</span>(<span class="variable">pathString</span>).<span class="variable">attr</span>(<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">meanline</span>);
- },
-
- <span class="variable">drawAxis</span>: <span class="keyword">function</span>() {
- <span class="keyword">var</span> <span class="variable">pathString</span> = <span class="string">''</span>;
-
- <span class="variable">pathString</span> += <span class="string">'M'</span> + (<span class="this">this</span>.<span class="variable">x_padding_left</span> - <span class="number integer">1</span>) + <span class="string">','</span> + (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">y_padding_bottom</span>);
- <span class="variable">pathString</span> += <span class="string">'L'</span> + (<span class="this">this</span>.<span class="variable">graph_width</span> + <span class="this">this</span>.<span class="variable">x_padding_left</span>) + <span class="string">','</span> + (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">y_padding_bottom</span>);
- <span class="variable">pathString</span> += <span class="string">'M'</span> + (<span class="this">this</span>.<span class="variable">x_padding_left</span> - <span class="number integer">1</span>) + <span class="string">','</span> + (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">y_padding_bottom</span>);
- <span class="variable">pathString</span> += <span class="string">'L'</span> + (<span class="this">this</span>.<span class="variable">x_padding_left</span> - <span class="number integer">1</span>) + <span class="string">','</span> + (<span class="this">this</span>.<span class="variable">y_padding_top</span>);
-
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">path</span>(<span class="variable">pathString</span>).<span class="variable">attr</span>({ <span class="variable">stroke</span>: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">label_colour</span> });
- },
-
- <span class="variable">makeValueLabels</span>: <span class="keyword">function</span>(<span class="variable">steps</span>) {
- <span class="keyword">var</span> <span class="variable">step</span> = <span class="this">this</span>.<span class="variable">label_step</span>,
- <span class="keyword">label</span> = <span class="this">this</span>.<span class="variable">start_value</span>,
- <span class="variable">labels</span> = [];
-
- <span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">i</span> = <span class="number integer">0</span>; <span class="variable">i</span> &<span class="variable">lt</span>; <span class="variable">steps</span>; <span class="variable">i</span>++) {
- <span class="keyword">label</span> = <span class="this">this</span>.<span class="variable">roundValue</span>((<span class="keyword">label</span> + <span class="variable">step</span>), <span class="number integer">2</span>);
- <span class="variable">labels</span>.<span class="variable">push</span>(<span class="keyword">label</span>);
- }
- <span class="keyword">return</span> <span class="variable">labels</span>;
- },</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Axis label markers </p>
-</td>
-<td class="code">
-<pre><code><span class="variable">drawMarkers</span>: <span class="keyword">function</span>(<span class="variable">labels</span>, <span class="variable">direction</span>, <span class="variable">step</span>, <span class="variable">start_offset</span>, <span class="variable">font_offsets</span>, <span class="variable">extra_font_options</span>) {
- <span class="keyword">function</span> <span class="variable">x_offset</span>(<span class="variable">value</span>) {
- <span class="keyword">return</span> <span class="variable">value</span> * <span class="variable">direction</span>[<span class="number integer">0</span>];
- }
-
- <span class="keyword">function</span> <span class="variable">y_offset</span>(<span class="variable">value</span>) {
- <span class="keyword">return</span> <span class="variable">value</span> * <span class="variable">direction</span>[<span class="number integer">1</span>];
- }</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Start at the origin </p>
-</td>
-<td class="code">
-<pre><code><span class="keyword">var</span> <span class="variable">x</span> = <span class="this">this</span>.<span class="variable">x_padding_left</span> - <span class="number integer">1</span> + <span class="variable">x_offset</span>(<span class="variable">start_offset</span>),
- <span class="variable">y</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">y_padding_bottom</span> + <span class="variable">y_offset</span>(<span class="variable">start_offset</span>),
- <span class="variable">pathString</span> = <span class="string">''</span>,
- <span class="variable">font_options</span> = {&<span class="variable">quot</span>;<span class="variable">font</span>&<span class="variable">quot</span>;: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">font_size</span> + <span class="string">'px &quot;Arial&quot;'</span>, <span class="variable">stroke</span>: &<span class="variable">quot</span>;<span class="variable">none</span>&<span class="variable">quot</span>;, <span class="variable">fill</span>: &<span class="variable">quot</span>;#<span class="number integer">000</span>&<span class="variable">quot</span>;};
- <span class="class">Object</span>.<span class="variable">extend</span>(<span class="variable">font_options</span>, <span class="variable">extra_font_options</span> || {});
-
- <span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">i</span> = <span class="number integer">0</span>; <span class="variable">i</span> &<span class="variable">lt</span>; <span class="variable">labels</span>.<span class="variable">length</span>; <span class="variable">i</span>++) {
- <span class="variable">pathString</span> += <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="variable">y</span>;
- <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="variable">labels</span>[<span class="variable">i</span>] !== <span class="string">'undefined'</span> &<span class="variable">amp</span>;&<span class="variable">amp</span>; (<span class="variable">labels</span>[<span class="variable">i</span>] + <span class="string">''</span>).<span class="variable">length</span> &<span class="variable">gt</span>; <span class="number integer">0</span>) {
- <span class="variable">pathString</span> += <span class="string">'L'</span> + (<span class="variable">x</span> + <span class="variable">y_offset</span>(<span class="number integer">5</span>)) + <span class="string">','</span> + (<span class="variable">y</span> + <span class="variable">x_offset</span>(<span class="number integer">5</span>));
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">text</span>(<span class="variable">x</span> + <span class="variable">font_offsets</span>[<span class="number integer">0</span>], <span class="variable">y</span> - <span class="variable">font_offsets</span>[<span class="number integer">1</span>], <span class="variable">labels</span>[<span class="variable">i</span>]).<span class="variable">attr</span>(<span class="variable">font_options</span>).<span class="variable">toFront</span>();
- }
- <span class="variable">x</span> = <span class="variable">x</span> + <span class="variable">x_offset</span>(<span class="variable">step</span>);
- <span class="variable">y</span> = <span class="variable">y</span> + <span class="variable">y_offset</span>(<span class="variable">step</span>);
- }
-
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">path</span>(<span class="variable">pathString</span>).<span class="variable">attr</span>({ <span class="variable">stroke</span>: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">label_colour</span> });
- },
-
- <span class="variable">drawVerticalLabels</span>: <span class="keyword">function</span>() {
- <span class="keyword">var</span> <span class="variable">y_step</span> = <span class="this">this</span>.<span class="variable">graph_height</span> / <span class="this">this</span>.<span class="variable">y_label_count</span>;
- <span class="this">this</span>.<span class="variable">drawMarkers</span>(<span class="this">this</span>.<span class="variable">value_labels</span>, [<span class="number integer">0</span>, -<span class="number integer">1</span>], <span class="variable">y_step</span>, <span class="variable">y_step</span>, [-<span class="number integer">8</span>, -<span class="number integer">2</span>], { &<span class="variable">quot</span>;<span class="variable">text</span>-<span class="variable">anchor</span>&<span class="variable">quot</span>;: <span class="string">'end'</span> });
- },
-
- <span class="variable">drawHorizontalLabels</span>: <span class="keyword">function</span>() {
- <span class="this">this</span>.<span class="variable">drawMarkers</span>(<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">labels</span>, [<span class="number integer">1</span>, <span class="number integer">0</span>], <span class="this">this</span>.<span class="variable">step</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">plot_padding</span>, [<span class="number integer">0</span>, (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">font_size</span> + <span class="number integer">7</span>) * -<span class="number integer">1</span>]);
- }
-});
-
-</code></pre>
-</td>
-</tr><tr class="filename"><td><h2 id="src/graphs/horizontal_bar.js"><a href="#">horizontal_bar</a></h2></td><td>src/graphs/horizontal_bar.js</td></tr><tr class="code">
-<td class="docs">
-<p>Draws horizontal bar graphs.</p>
-
-<h2>Example</h2>
-
-<pre><code> new Ico.HorizontalBarGraph(element,
- [2, 5, 1, 10, 15, 33, 20, 25, 1],
- { font_size: 14 }); </code></pre>
-
-<p> </p>
-</td>
-<td class="code">
-<pre><code><span class="class">Ico</span>.<span class="class">HorizontalBarGraph</span> = <span class="keyword">function</span>() { <span class="this">this</span>.<span class="variable">initialize</span>.<span class="variable">apply</span>(<span class="this">this</span>, <span class="variable">arguments</span>); };
-<span class="class">Object</span>.<span class="variable">extend</span>(<span class="class">Ico</span>.<span class="class">HorizontalBarGraph</span>.<span class="variable">prototype</span>, <span class="class">Ico</span>.<span class="class">BaseGraph</span>.<span class="variable">prototype</span>);
-<span class="class">Object</span>.<span class="variable">extend</span>(<span class="class">Ico</span>.<span class="class">HorizontalBarGraph</span>.<span class="variable">prototype</span>, {
- <span class="variable">setChartSpecificOptions</span>: <span class="keyword">function</span>() {
- <span class="comment">// Approximate the width required by the labels</span>
- <span class="this">this</span>.<span class="variable">y_padding_top</span> = <span class="number integer">0</span>;
- <span class="this">this</span>.<span class="variable">x_padding_left</span> = <span class="number integer">20</span> + <span class="this">this</span>.<span class="variable">longestLabel</span>() * (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">font_size</span> / <span class="number integer">2</span>);
- <span class="this">this</span>.<span class="variable">bar_padding</span> = <span class="number integer">5</span>;
- <span class="this">this</span>.<span class="variable">bar_width</span> = <span class="this">this</span>.<span class="variable">calculateBarHeight</span>();
- <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">plot_padding</span> = <span class="number integer">0</span>;
- <span class="this">this</span>.<span class="variable">step</span> = <span class="this">this</span>.<span class="variable">calculateStep</span>();
- },
-
- <span class="variable">normalise</span>: <span class="keyword">function</span>(<span class="variable">value</span>) {
- <span class="keyword">var</span> <span class="variable">offset</span> = <span class="this">this</span>.<span class="variable">x_padding_left</span>;
- <span class="keyword">return</span> ((<span class="variable">value</span> / <span class="this">this</span>.<span class="variable">range</span>) * (<span class="this">this</span>.<span class="variable">graph_width</span> - <span class="variable">offset</span>));
- },</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Height </p>
-</td>
-<td class="code">
-<pre><code><span class="variable">calculateBarHeight</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> (<span class="this">this</span>.<span class="variable">graph_height</span> / <span class="this">this</span>.<span class="variable">data_size</span>) - <span class="this">this</span>.<span class="variable">bar_padding</span>;
- },
-
- <span class="variable">calculateStep</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">y_padding_bottom</span>) / <span class="variable">validStepDivider</span>(<span class="this">this</span>.<span class="variable">data_size</span>);
- },
-
- <span class="variable">drawLines</span>: <span class="keyword">function</span>(<span class="keyword">label</span>, <span class="variable">colour</span>, <span class="variable">data</span>) {
- <span class="keyword">var</span> <span class="variable">x</span> = <span class="this">this</span>.<span class="variable">x_padding_left</span> + (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">plot_padding</span> * <span class="number integer">2</span>),
- <span class="variable">y</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">y_padding_bottom</span> - (<span class="this">this</span>.<span class="variable">step</span> / <span class="number integer">2</span>),
- <span class="variable">pathString</span> = <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="variable">y</span>,
- <span class="variable">i</span>;
-
- <span class="keyword">for</span> (<span class="variable">i</span> = <span class="number integer">0</span>; <span class="variable">i</span> &<span class="variable">lt</span>; <span class="variable">data</span>.<span class="variable">length</span>; <span class="variable">i</span>++) {
- <span class="variable">pathString</span> += <span class="string">'L'</span> + (<span class="variable">x</span> + <span class="variable">data</span>[<span class="variable">i</span>] - <span class="this">this</span>.<span class="variable">normalise</span>(<span class="this">this</span>.<span class="variable">start_value</span>)) + <span class="string">','</span> + <span class="variable">y</span>;
- <span class="variable">y</span> = <span class="variable">y</span> - <span class="this">this</span>.<span class="variable">step</span>;
- <span class="variable">pathString</span> += <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="variable">y</span>;
- }
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">path</span>(<span class="variable">pathString</span>).<span class="variable">attr</span>({<span class="variable">stroke</span>: <span class="variable">colour</span>, <span class="string">'stroke-width'</span>: <span class="this">this</span>.<span class="variable">bar_width</span> + <span class="string">'px'</span>});
- },</code></pre>
-</td>
-</tr>
-<tr class="code">
-<td class="docs">
-<p> Horizontal version </p>
-</td>
-<td class="code">
-<pre><code><span class="variable">drawFocusHint</span>: <span class="keyword">function</span>() {
- <span class="keyword">var</span> <span class="variable">length</span> = <span class="number integer">5</span>,
- <span class="variable">x</span> = <span class="this">this</span>.<span class="variable">x_padding_left</span> + (<span class="this">this</span>.<span class="variable">step</span> * <span class="number integer">2</span>),
- <span class="variable">y</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">y_padding_bottom</span>,
- <span class="variable">pathString</span> = <span class="string">''</span>;
-
- <span class="variable">pathString</span> += <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="variable">y</span>;
- <span class="variable">pathString</span> += <span class="string">'L'</span> + (<span class="variable">x</span> - <span class="variable">length</span>) + <span class="string">','</span> + (<span class="variable">y</span> + <span class="variable">length</span>);
- <span class="variable">pathString</span> += <span class="string">'M'</span> + (<span class="variable">x</span> - <span class="variable">length</span>) + <span class="string">','</span> + <span class="variable">y</span>;
- <span class="variable">pathString</span> += <span class="string">'L'</span> + (<span class="variable">x</span> - (<span class="variable">length</span> * <span class="number integer">2</span>)) + <span class="string">','</span> + (<span class="variable">y</span> + <span class="variable">length</span>);
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">path</span>(<span class="variable">pathString</span>).<span class="variable">attr</span>({<span class="variable">stroke</span>: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">label_colour</span>, <span class="string">'stroke-width'</span>: <span class="number integer">2</span>});
- },
-
- <span class="variable">drawVerticalLabels</span>: <span class="keyword">function</span>() {
- <span class="keyword">var</span> <span class="variable">y_start</span> = (<span class="this">this</span>.<span class="variable">step</span> / <span class="number integer">2</span>) - (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">plot_padding</span> * <span class="number integer">2</span>);
- <span class="this">this</span>.<span class="variable">drawMarkers</span>(<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">labels</span>, [<span class="number integer">0</span>, -<span class="number integer">1</span>], <span class="this">this</span>.<span class="variable">step</span>, <span class="variable">y_start</span>, [-<span class="number integer">8</span>, (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">font_size</span> / <span class="number integer">8</span>)], { <span class="string">'text-anchor'</span>: <span class="string">'end'</span> });
- },
-
- <span class="variable">drawHorizontalLabels</span>: <span class="keyword">function</span>() {
- <span class="keyword">var</span> <span class="variable">x_step</span> = <span class="this">this</span>.<span class="variable">graph_width</span> / <span class="this">this</span>.<span class="variable">y_label_count</span>,
- <span class="variable">x_labels</span> = <span class="this">this</span>.<span class="variable">makeValueLabels</span>(<span class="this">this</span>.<span class="variable">y_label_count</span>);
- <span class="this">this</span>.<span class="variable">drawMarkers</span>(<span class="variable">x_labels</span>, [<span class="number integer">1</span>, <span class="number integer">0</span>], <span class="variable">x_step</span>, <span class="variable">x_step</span>, [<span class="number integer">0</span>, (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">font_size</span> + <span class="number integer">7</span>) * -<span class="number integer">1</span>]);
- }
-});
-
-</code></pre>
-</td>
-</tr><tr class="filename"><td><h2 id="src/graphs/line.js"><a href="#">line</a></h2></td><td>src/graphs/line.js</td></tr><tr class="code">
-<td class="docs">
-<p>Draws line graphs.</p>
-
-<h2>Example</h2>
-
-<pre><code> new Ico.LineGraph(element, [10, 5, 22, 44, 4]); </code></pre>
-
-<p> </p>
-</td>
-<td class="code">
-<pre><code><span class="class">Ico</span>.<span class="class">LineGraph</span> = <span class="keyword">function</span>() { <span class="this">this</span>.<span class="variable">initialize</span>.<span class="variable">apply</span>(<span class="this">this</span>, <span class="variable">arguments</span>); };
-<span class="class">Object</span>.<span class="variable">extend</span>(<span class="class">Ico</span>.<span class="class">LineGraph</span>.<span class="variable">prototype</span>, <span class="class">Ico</span>.<span class="class">BaseGraph</span>.<span class="variable">prototype</span>);
-<span class="class">Object</span>.<span class="variable">extend</span>(<span class="class">Ico</span>.<span class="class">LineGraph</span>.<span class="variable">prototype</span>, {
- <span class="variable">normalise</span>: <span class="keyword">function</span>(<span class="variable">value</span>) {
- <span class="keyword">var</span> <span class="variable">total</span> = <span class="this">this</span>.<span class="variable">start_value</span> === <span class="number integer">0</span> ? <span class="this">this</span>.<span class="variable">top_value</span> : <span class="this">this</span>.<span class="variable">top_value</span> - <span class="this">this</span>.<span class="variable">start_value</span>;
- <span class="keyword">return</span> ((<span class="variable">value</span> / <span class="variable">total</span>) * (<span class="this">this</span>.<span class="variable">graph_height</span>));
- },
-
- <span class="variable">chartDefaults</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> { <span class="variable">plot_padding</span>: <span class="number integer">10</span> };
- },
-
- <span class="variable">setChartSpecificOptions</span>: <span class="keyword">function</span>() {
- <span class="comment">// Approximate the width required by the labels</span>
- <span class="this">this</span>.<span class="variable">x_padding_left</span> = <span class="number integer">30</span> + <span class="this">this</span>.<span class="variable">longestLabel</span>(<span class="this">this</span>.<span class="variable">value_labels</span>) * (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">font_size</span> / <span class="number integer">2</span>);
-
- <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">curve_amount</span> === <span class="string">'undefined'</span>) {
- <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">curve_amount</span> = <span class="number integer">10</span>;
- }
- },
-
- <span class="variable">normaliserOptions</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> { <span class="variable">start_value</span>: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">start_value</span> };
- },
-
- <span class="variable">calculateStep</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> (<span class="this">this</span>.<span class="variable">graph_width</span> - (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">plot_padding</span> * <span class="number integer">2</span>)) / <span class="variable">validStepDivider</span>(<span class="this">this</span>.<span class="variable">data_size</span>);
- },
-
- <span class="variable">startPlot</span>: <span class="keyword">function</span>(<span class="variable">pathString</span>, <span class="variable">x</span>, <span class="variable">y</span>, <span class="variable">colour</span>) {
- <span class="this">this</span>.<span class="variable">lastPoint</span> = { <span class="variable">x</span>: <span class="variable">x</span>, <span class="variable">y</span>: <span class="variable">y</span> };
- <span class="keyword">return</span> <span class="variable">pathString</span> + <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="variable">y</span>;
- },
-
- <span class="variable">drawPlot</span>: <span class="keyword">function</span>(<span class="variable">index</span>, <span class="variable">pathString</span>, <span class="variable">x</span>, <span class="variable">y</span>, <span class="variable">colour</span>) {
- <span class="keyword">var</span> <span class="variable">w</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">curve_amount</span>;
-
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">markers</span> === <span class="string">'circle'</span>) {
- <span class="keyword">var</span> <span class="variable">circle</span> = <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">circle</span>(<span class="variable">x</span>, <span class="variable">y</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">marker_size</span>);
- <span class="variable">circle</span>.<span class="variable">attr</span>({ <span class="string">'stroke-width'</span>: <span class="string">'1px'</span>, <span class="variable">stroke</span>: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">background_colour</span>, <span class="variable">fill</span>: <span class="variable">colour</span> });
- }
-
- <span class="keyword">if</span> (<span class="variable">index</span> === <span class="number integer">0</span>) {
- <span class="keyword">return</span> <span class="this">this</span>.<span class="variable">startPlot</span>(<span class="variable">pathString</span>, <span class="variable">x</span>, <span class="variable">y</span>, <span class="variable">colour</span>);
- }
-
- <span class="keyword">if</span> (<span class="variable">w</span>) {
- <span class="variable">pathString</span> += [<span class="string">'C'</span>, <span class="this">this</span>.<span class="variable">lastPoint</span>.<span class="variable">x</span> + <span class="variable">w</span>, <span class="this">this</span>.<span class="variable">lastPoint</span>.<span class="variable">y</span>, <span class="variable">x</span> - <span class="variable">w</span>, <span class="variable">y</span>, <span class="variable">x</span>, <span class="variable">y</span>];
- } <span class="keyword">else</span> {
- <span class="variable">pathString</span> += <span class="string">'L'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="variable">y</span>;
- }
-
- <span class="this">this</span>.<span class="variable">lastPoint</span> = { <span class="variable">x</span>: <span class="variable">x</span>, <span class="variable">y</span>: <span class="variable">y</span> };
- <span class="keyword">return</span> <span class="variable">pathString</span>;
- }
-});
-
-</code></pre>
-</td>
-</tr><tr class="filename"><td><h2 id="src/graphs/sparkbar.js"><a href="#">sparkbar</a></h2></td><td>src/graphs/sparkbar.js</td></tr><tr class="code">
-<td class="docs">
-<p>Draws spark bar graphs.</p>
-
-<h2>Example</h2>
-
-<pre><code> new Ico.SparkBar($('sparkline_2'),
- [1, 5, 10, 15, 20, 15, 10, 15, 30, 15, 10],
- { width: 30, height: 14, background_colour: '#ccc' });</code></pre>
-
-<p> </p>
-</td>
-<td class="code">
-<pre><code><span class="class">Ico</span>.<span class="class">SparkBar</span> = <span class="keyword">function</span>() { <span class="this">this</span>.<span class="variable">initialize</span>.<span class="variable">apply</span>(<span class="this">this</span>, <span class="variable">arguments</span>); };
-<span class="class">Object</span>.<span class="variable">extend</span>(<span class="class">Ico</span>.<span class="class">SparkBar</span>.<span class="variable">prototype</span>, <span class="class">Ico</span>.<span class="class">SparkLine</span>.<span class="variable">prototype</span>);
-<span class="class">Object</span>.<span class="variable">extend</span>(<span class="class">Ico</span>.<span class="class">SparkBar</span>.<span class="variable">prototype</span>, {
- <span class="variable">calculateStep</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">width</span> / <span class="variable">validStepDivider</span>(<span class="this">this</span>.<span class="variable">data</span>.<span class="variable">length</span>);
- },
-
- <span class="variable">drawLines</span>: <span class="keyword">function</span>(<span class="keyword">label</span>, <span class="variable">colour</span>, <span class="variable">data</span>) {
- <span class="keyword">var</span> <span class="variable">width</span> = <span class="this">this</span>.<span class="variable">step</span> &<span class="variable">gt</span>; <span class="number integer">2</span> ? <span class="this">this</span>.<span class="variable">step</span> - <span class="number integer">1</span> : <span class="this">this</span>.<span class="variable">step</span>,
- <span class="variable">x</span> = <span class="variable">width</span>,
- <span class="variable">pathString</span> = <span class="string">''</span>,
- <span class="variable">i</span> = <span class="number integer">0</span>;
- <span class="keyword">for</span> (<span class="variable">i</span> = <span class="number integer">0</span>; <span class="variable">i</span> &<span class="variable">lt</span>; <span class="variable">data</span>.<span class="variable">length</span>; <span class="variable">i</span>++) {
- <span class="variable">pathString</span> += <span class="string">'M'</span> + <span class="variable">x</span> + <span class="string">','</span> + (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="variable">data</span>[<span class="variable">i</span>]);
- <span class="variable">pathString</span> += <span class="string">'L'</span> + <span class="variable">x</span> + <span class="string">','</span> + <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span>;
- <span class="variable">x</span> = <span class="variable">x</span> + <span class="this">this</span>.<span class="variable">step</span>;
- }
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">path</span>(<span class="variable">pathString</span>).<span class="variable">attr</span>({ <span class="variable">stroke</span>: <span class="variable">colour</span>, <span class="string">'stroke-width'</span>: <span class="variable">width</span> });
- }
-});
-
-</code></pre>
-</td>
-</tr><tr class="filename"><td><h2 id="src/graphs/sparkline.js"><a href="#">sparkline</a></h2></td><td>src/graphs/sparkline.js</td></tr><tr class="code">
-<td class="docs">
-<p>Draws spark line graphs.</p>
-
-<h2>Example</h2>
-
-<pre><code> new Ico.SparkLine(element,
- [21, 41, 32, 1, 10, 5, 32, 10, 23],
- { width: 30, height: 14,
- background_colour: '#ccc' });</code></pre>
-
-<p> </p>
-</td>
-<td class="code">
-<pre><code><span class="class">Ico</span>.<span class="class">SparkLine</span> = <span class="keyword">function</span>() { <span class="this">this</span>.<span class="variable">initialize</span>.<span class="variable">apply</span>(<span class="this">this</span>, <span class="variable">arguments</span>); };
-<span class="class">Ico</span>.<span class="class">SparkLine</span>.<span class="variable">prototype</span> = {
- <span class="variable">initialize</span>: <span class="keyword">function</span>(<span class="variable">element</span>, <span class="variable">data</span>, <span class="variable">options</span>) {
- <span class="this">this</span>.<span class="variable">element</span> = <span class="variable">element</span>;
- <span class="this">this</span>.<span class="variable">data</span> = <span class="variable">data</span>;
- <span class="this">this</span>.<span class="variable">options</span> = {
- <span class="variable">width</span>: <span class="variable">parseInt</span>(<span class="variable">getStyle</span>(<span class="variable">element</span>, <span class="string">'width'</span>), <span class="number integer">10</span>),
- <span class="variable">height</span>: <span class="variable">parseInt</span>(<span class="variable">getStyle</span>(<span class="variable">element</span>, <span class="string">'height'</span>), <span class="number integer">10</span>),
- <span class="variable">highlight</span>: <span class="variable">false</span>,
- <span class="variable">background_colour</span>: <span class="variable">getStyle</span>(<span class="variable">element</span>, <span class="string">'backgroundColor'</span>) || <span class="string">'#ffffff'</span>,
- <span class="variable">colour</span>: <span class="string">'#036'</span>
- };
- <span class="class">Object</span>.<span class="variable">extend</span>(<span class="this">this</span>.<span class="variable">options</span>, <span class="variable">options</span> || { });
-
- <span class="this">this</span>.<span class="variable">step</span> = <span class="this">this</span>.<span class="variable">calculateStep</span>();
- <span class="this">this</span>.<span class="variable">paper</span> = <span class="class">Raphael</span>(<span class="this">this</span>.<span class="variable">element</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">width</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span>);
-
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">acceptable_range</span>) {
- <span class="this">this</span>.<span class="variable">background</span> = <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">rect</span>(<span class="number integer">0</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">normalise</span>(<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">acceptable_range</span>[<span class="number integer">1</span>]),
- <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">width</span>,
- <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="this">this</span>.<span class="variable">normalise</span>(<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">acceptable_range</span>[<span class="number integer">0</span>]));
- } <span class="keyword">else</span> {
- <span class="this">this</span>.<span class="variable">background</span> = <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">rect</span>(<span class="number integer">0</span>, <span class="number integer">0</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">width</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span>);
- }
-
- <span class="this">this</span>.<span class="variable">background</span>.<span class="variable">attr</span>({<span class="variable">fill</span>: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">background_colour</span>, <span class="variable">stroke</span>: <span class="string">'none'</span> });
- <span class="this">this</span>.<span class="variable">draw</span>();
- },
-
- <span class="variable">calculateStep</span>: <span class="keyword">function</span>() {
- <span class="keyword">return</span> <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">width</span> / <span class="variable">validStepDivider</span>(<span class="this">this</span>.<span class="variable">data</span>.<span class="variable">length</span>);
- },
-
- <span class="variable">normalise</span>: <span class="keyword">function</span>(<span class="variable">value</span>) {
- <span class="keyword">return</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> / <span class="this">this</span>.<span class="variable">data</span>.<span class="variable">max</span>()) * <span class="variable">value</span>;
- },
-
- <span class="variable">draw</span>: <span class="keyword">function</span>() {
- <span class="keyword">var</span> <span class="variable">data</span> = <span class="this">this</span>.<span class="variable">normaliseData</span>(<span class="this">this</span>.<span class="variable">data</span>);
- <span class="this">this</span>.<span class="variable">drawLines</span>(<span class="string">''</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">colour</span>, <span class="variable">data</span>);
-
- <span class="keyword">if</span> (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">highlight</span>) {
- <span class="this">this</span>.<span class="variable">showHighlight</span>(<span class="variable">data</span>);
- }
- },
-
- <span class="variable">drawLines</span>: <span class="keyword">function</span>(<span class="keyword">label</span>, <span class="variable">colour</span>, <span class="variable">data</span>) {
- <span class="keyword">var</span> <span class="variable">pathString</span> = <span class="string">''</span>,
- <span class="variable">x</span> = <span class="number integer">0</span>,
- <span class="variable">values</span> = <span class="variable">data</span>.<span class="variable">slice</span>(<span class="number integer">1</span>),
- <span class="variable">i</span> = <span class="number integer">0</span>;
-
- <span class="variable">pathString</span> = <span class="string">'M0,'</span> + (<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="variable">data</span>[<span class="number integer">0</span>]);
- <span class="keyword">for</span> (<span class="variable">i</span> = <span class="number integer">1</span>; <span class="variable">i</span> &<span class="variable">lt</span>; <span class="variable">data</span>.<span class="variable">length</span>; <span class="variable">i</span>++) {
- <span class="variable">x</span> = <span class="variable">x</span> + <span class="this">this</span>.<span class="variable">step</span>;
- <span class="variable">pathString</span> += <span class="string">'L'</span> + <span class="variable">x</span> +<span class="string">','</span> + <span class="class">Ico</span>.<span class="variable">round</span>(<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="variable">data</span>[<span class="variable">i</span>], <span class="number integer">2</span>);
- }
- <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">path</span>(<span class="variable">pathString</span>).<span class="variable">attr</span>({<span class="variable">stroke</span>: <span class="variable">colour</span>});
- <span class="this">this</span>.<span class="variable">lastPoint</span> = { <span class="variable">x</span>: <span class="number integer">0</span>, <span class="variable">y</span>: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="variable">data</span>[<span class="number integer">0</span>] };
- },
-
- <span class="variable">showHighlight</span>: <span class="keyword">function</span>(<span class="variable">data</span>) {
- <span class="keyword">var</span> <span class="variable">size</span> = <span class="number integer">2</span>,
- <span class="variable">x</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">width</span> - <span class="variable">size</span>,
- <span class="variable">i</span> = <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">highlight</span>.<span class="variable">index</span> || <span class="variable">data</span>.<span class="variable">length</span> - <span class="number integer">1</span>,
- <span class="variable">y</span> = <span class="variable">data</span>[<span class="variable">i</span>] + (<span class="class">Math</span>.<span class="variable">round</span>(<span class="variable">size</span> / <span class="number integer">2</span>));
-
- <span class="keyword">if</span> (<span class="keyword">typeof</span>(<span class="this">this</span>.<span class="variable">options</span>.<span class="variable">highlight</span>.<span class="variable">index</span>) !== <span class="string">'undefined'</span>) {
- <span class="variable">x</span> = <span class="this">this</span>.<span class="variable">step</span> * <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">highlight</span>.<span class="variable">index</span>;
- }
-
- <span class="keyword">var</span> <span class="variable">circle</span> = <span class="this">this</span>.<span class="variable">paper</span>.<span class="variable">circle</span>(<span class="variable">x</span>, <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">height</span> - <span class="variable">y</span>, <span class="variable">size</span>);
- <span class="variable">circle</span>.<span class="variable">attr</span>({ <span class="variable">stroke</span>: <span class="variable">false</span>, <span class="variable">fill</span>: <span class="this">this</span>.<span class="variable">options</span>.<span class="variable">highlight</span>.<span class="variable">colour</span>});
- }
-};
-<span class="class">Object</span>.<span class="variable">extend</span>(<span class="class">Ico</span>.<span class="class">SparkLine</span>.<span class="variable">prototype</span>, <span class="class">Ico</span>.<span class="class">Base</span>);
-
-</code></pre>
-</td>
</tr> </body>
</html></tbody></table>
View
43 ico.js
@@ -9,7 +9,7 @@
*/
(function(global) {
var Ico = {
- VERSION: '0.3.0',
+ VERSION: '0.3.1',
/**
* Rounds a float to the specified number of decimal places.
@@ -43,6 +43,8 @@ function validStepDivider(value) {
* @returns {Object} The style value
*/
function getStyle(el, styleProp) {
+ if (typeof window === 'undefined') return;
+
var style;
if (el.currentStyle) {
style = el.currentStyle[styleProp];
@@ -505,16 +507,6 @@ Object.extend(Ico.BaseGraph.prototype, {
}
this.paper.path(pathString).attr({stroke: colour, 'stroke-width': '3px'});
-
- // JSYANG: Draw the markers on TOP of the path, so mouseovers don't fail.
- for (var i = 0; i < coords.length; i++) {
- var x = coords[i][0] || 0,
- y = coords[i][1] || 0;
- if (this.options.markers === 'circle') {
- var circle = this.paper.circle(x, y, this.options.marker_size);
- circle.attr({ 'stroke-width': '1px', stroke: this.options.background_colour, fill: colour });
- }
- }
},
calculateCoords: function(data) {
@@ -633,7 +625,7 @@ Object.extend(Ico.BarGraph.prototype, {
* Sensible defaults for BarGraph.
*/
chartDefaults: function() {
- return { plot_padding: 0, bar_padding: 5};
+ return { plot_padding: 0 };
},
/**
@@ -647,10 +639,11 @@ Object.extend(Ico.BarGraph.prototype, {
* Options specific to BarGraph.
*/
setChartSpecificOptions: function() {
+ this.bar_padding = 5;
this.bar_width = this.calculateBarWidth();
this.options.plot_padding = (this.bar_width / 2);
this.step = this.calculateStep();
- this.grid_start_offset = this.options.bar_padding - 1;
+ this.grid_start_offset = this.bar_padding - 1;
this.start_y = this.options.height - this.y_padding_bottom;
},
@@ -660,7 +653,7 @@ Object.extend(Ico.BarGraph.prototype, {
* @returns {Integer} The bar width
*/
calculateBarWidth: function() {
- return (this.graph_width / this.data_size) - this.options.bar_padding;
+ return (this.graph_width / this.data_size) - this.bar_padding;
},
/**
@@ -669,7 +662,7 @@ Object.extend(Ico.BarGraph.prototype, {
* @returns {Float} The start value
*/
calculateStep: function() {
- return (this.graph_width - (this.options.plot_padding * 2) - (this.options.bar_padding * 2)) / validStepDivider(this.data_size);
+ return (this.graph_width - (this.options.plot_padding * 2) - (this.bar_padding * 2)) / validStepDivider(this.data_size);
},
/**
@@ -683,7 +676,7 @@ Object.extend(Ico.BarGraph.prototype, {
* @returns {String} The resulting path string
*/
drawPlot: function(index, pathString, x, y, colour) {
- x = x + this.options.bar_padding;
+ x = x + this.bar_padding;
pathString += 'M' + x + ',' + this.start_y;
pathString += 'L' + x + ',' + y;
this.paper.path(pathString).attr({stroke: colour, 'stroke-width': this.bar_width + 'px'});
@@ -695,7 +688,7 @@ Object.extend(Ico.BarGraph.prototype, {
/* Change the standard options to correctly offset against the bars */
drawHorizontalLabels: function() {
- var x_start = this.options.bar_padding + this.options.plot_padding;
+ var x_start = this.bar_padding + this.options.plot_padding;
this.drawMarkers(this.options.labels, [1, 0], this.step, x_start, [0, (this.options.font_size + 7) * -1]);
}
});
@@ -713,17 +706,13 @@ Object.extend(Ico.BarGraph.prototype, {
Ico.HorizontalBarGraph = function() { this.initialize.apply(this, arguments); };
Object.extend(Ico.HorizontalBarGraph.prototype, Ico.BaseGraph.prototype);
Object.extend(Ico.HorizontalBarGraph.prototype, {
- /**
- * Sensible defaults for HorizontalBarGraph.
- */
- chartDefaults: function() {
- return { plot_padding: 0, bar_padding: 5};
- },
setChartSpecificOptions: function() {
// Approximate the width required by the labels
this.y_padding_top = 0;
this.x_padding_left = 20 + this.longestLabel() * (this.options.font_size / 2);
+ this.bar_padding = 5;
this.bar_width = this.calculateBarHeight();
+ this.options.plot_padding = 0;
this.step = this.calculateStep();
},
@@ -734,7 +723,7 @@ Object.extend(Ico.HorizontalBarGraph.prototype, {
/* Height */
calculateBarHeight: function() {
- return (this.graph_height / this.data_size) - this.options.bar_padding;
+ return (this.graph_height / this.data_size) - this.bar_padding;
},
calculateStep: function() {
@@ -826,12 +815,10 @@ Object.extend(Ico.LineGraph.prototype, {
drawPlot: function(index, pathString, x, y, colour) {
var w = this.options.curve_amount;
- /* JSYANG
if (this.options.markers === 'circle') {
var circle = this.paper.circle(x, y, this.options.marker_size);
circle.attr({ 'stroke-width': '1px', stroke: this.options.background_colour, fill: colour });
}
- */
if (index === 0) {
return this.startPlot(pathString, x, y, colour);
@@ -972,5 +959,9 @@ Object.extend(Ico.SparkBar.prototype, {
* Assign the Ico object as a global property.
*/
global.Ico = Ico;
+
+ if (typeof exports !== 'undefined') {
+ module.exports = Ico;
+ }
})(typeof window === 'undefined' ? this : window);
View
7 ico.min.js
@@ -0,0 +1,7 @@
+/*!
+ * Ico
+ * Copyright (C) 2009-2011 Alex R. Young
+ * MIT Licensed
+ *//**
+ * The Ico object.
+ */(function(global){var Ico={VERSION:"0.3.1",round:function(num,dec){var result=Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);return result}};function validStepDivider(value){return value>1?value-1:1}function getStyle(el,styleProp){if(typeof window=="undefined")return;var style;return el.currentStyle?style=el.currentStyle[styleProp]:window.getComputedStyle&&(style=document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp)),style&&style.length===0&&(style=null),style}Array.prototype.sum=function(){for(var i=0,sum=0;i<this.length;sum+=this[i++]);return sum},typeof Array.prototype.max=="undefined"&&(Array.prototype.max=function(){return Math.max.apply({},this)}),typeof Array.prototype.min=="undefined"&&(Array.prototype.min=function(){return Math.min.apply({},this)}),Array.prototype.mean=function(){return this.sum()/this.length},Array.prototype.variance=function(){var mean=this.mean(),variance=0;for(var i=0;i<this.length;i++)variance+=Math.pow(this[i]-mean,2);return variance/(this.length-1)},Array.prototype.standard_deviation=function(){return Math.sqrt(this.variance())},typeof Object.extend=="undefined"&&(Object.extend=function(destination,source){for(var property in source)source.hasOwnProperty(property)&&(destination[property]=source[property]);return destination}),Ico.Normaliser=function(data,options){this.options={start_value:null},typeof options!="undefined"&&(this.options=options),this.min=data.min(),this.max=data.max(),this.standard_deviation=data.standard_deviation(),this.range=0,this.step=this.labelStep(this.max-this.min),this.start_value=this.calculateStart(),this.process()},Ico.Normaliser.prototype={calculateStart:function(){var min=typeof this.options.start_value!="undefined"&&this.min>=0?this.options.start_value:this.min,start_value=this.round(min,1);return this.min>0&&start_value>this.min?0:start_value},round:function(value,offset){offset=offset||1;var roundedValue=value;if(this.standard_deviation>.1){var multiplier=Math.pow(10,-offset);roundedValue=Math.round(value*multiplier)/multiplier;if(roundedValue>this.min)return this.round(value-this.step)}return roundedValue},process:function(){this.range=this.max-this.start_value,this.step=this.labelStep(this.range)},labelStep:function(value){return Math.pow(10,Math.round(Math.log(value)/Math.LN10)-1)}},Ico.Base={normaliseData:function(data){var values=[],i=0;for(i=0;i<data.length;i++)values.push(this.normalise(data[i]));return values},flatten:function(data){var flat_data=[];if(typeof data.length=="undefined"){if(typeof data!="object")return[];for(var key in data)data.hasOwnProperty(key)&&(flat_data=flat_data.concat(this.flatten(data[key])))}for(var i=0;i<data.length;i++)typeof data[i].length=="number"?flat_data=flat_data.concat(this.flatten(data[i])):flat_data.push(data[i]);return flat_data},makeRange:function(start,end){var values=[],i;for(i=start;i<end;i++)values.push(i);return values}},Ico.BaseGraph=function(){this.initialize.apply(this,arguments)},Object.extend(Ico.BaseGraph.prototype,Ico.Base),Object.extend(Ico.BaseGraph.prototype,{initialize:function(element,data,options){this.element=element,this.data_sets=this.buildDataSets(data,options),this.flat_data=this.flatten(data),this.data_size=this.longestDataSetLength();if(options&&options.colour){options.colours={};for(var key in this.data_sets)this.data_sets.hasOwnProperty(key)&&(options.colours[key]=options.colour)}this.options={width:parseInt(getStyle(element,"width"),10),height:parseInt(getStyle(element,"height"),10),labels:this.makeRange(1,this.data_size+1),plot_padding:10,font_size:10,show_horizontal_labels:!0,show_vertical_labels:!0,background_colour:getStyle(element,"backgroundColor")||"#ffffff",label_colour:"#666",markers:!1,marker_size:5,meanline:!1,grid:!1,grid_colour:"#ccc",y_padding_top:20,draw:!0},Object.extend(this.options,this.chartDefaults()||{}),Object.extend(this.options,options||{}),this.normaliser=new Ico.Normaliser(this.flat_data,this.normaliserOptions()),this.label_step=this.normaliser.step,this.range=this.normaliser.range,this.start_value=this.normaliser.start_value,this.x_padding_left=10+this.paddingLeftOffset(),this.x_padding_right=20,this.x_padding=this.x_padding_left+this.x_padding_right,this.y_padding_top=this.options.y_padding_top,this.y_padding_bottom=20+this.paddingBottomOffset(),this.y_padding=this.y_padding_top+this.y_padding_bottom,this.graph_width=this.options.width-this.x_padding,this.graph_height=this.options.height-this.y_padding,this.step=this.calculateStep(),this.y_label_count=Math.ceil(this.range/this.label_step),this.normaliser.min+this.y_label_count*this.normaliser.step<this.normaliser.max&&(this.y_label_count+=1),this.value_labels=this.makeValueLabels(this.y_label_count),this.top_value=this.value_labels[this.value_labels.length-1],this.grid_start_offset=-1,this.options.draw&&(typeof this.options.colours=="undefined"&&(this.options.colours=this.makeRandomColours()),this.paper=Raphael(this.element,this.options.width,this.options.height),this.background=this.paper.rect(0,0,this.options.width,this.options.height),this.background.attr({fill:this.options.background_colour,stroke:"none"}),this.options.meanline===!0&&(this.options.meanline={"stroke-width":"2px",stroke:"#BBBBBB"}),this.setChartSpecificOptions(),this.lastPoint={x:0,y:0},this.draw())},buildDataSets:function(data,options){return typeof data.length!="undefined"?{one:data}:data},normaliserOptions:function(){return{}},chartDefaults:function(){return{}},drawPlot:function(index,pathString,x,y,colour){},calculateStep:function(){},makeRandomColours:function(){var colours={};for(var key in this.data_sets)colours.hasOwnProperty(key)||(colours[key]=Raphael.hsb2rgb(Math.random(),1,.75).hex);return colours},longestDataSetLength:function(){var length=0;for(var key in this.data_sets)this.data_sets.hasOwnProperty(key)&&(length=this.data_sets[key].length>length?this.data_sets[key].length:length);return length},roundValue:function(value,length){var multiplier=Math.pow(10,length);return value*=multiplier,value=Math.round(value)/multiplier,value},roundValues:function(data,length){var roundedData=[];for(var i=0;i<data.length;i++)roundedData.push(this.roundValue(data[i],length));return roundedData},longestLabel:function(values){var labels=Array.prototype.slice.call(values||this.options.labels,0);return labels.sort(function(a,b){return a.toString().length<b.toString().length})[0].toString().length},paddingLeftOffset:function(){var data=this.roundValues(this.flat_data,2),longest_label_length=0;return longest_label_length=data.sort(function(a,b){return a.toString().length<b.toString().length})[0].toString().length,longest_label_length=longest_label_length>2?longest_label_length-1:longest_label_length,10+longest_label_length*this.options.font_size},paddingBottomOffset:function(){return this.options.font_size},normalise:function(value){var total=this.start_value===0?this.top_value:this.range;return value/total*this.graph_height},draw:function(){this.options.grid&&this.drawGrid(),this.options.meanline&&this.drawMeanLine(this.normaliseData(this.flat_data)),this.drawAxis(),this.options.show_vertical_labels&&this.drawVerticalLabels(),this.options.show_horizontal_labels&&this.drawHorizontalLabels();for(var key in this.data_sets)if(this.data_sets.hasOwnProperty(key)){var data=this.data_sets[key];this.drawLines(key,this.options.colours[key],this.normaliseData(data))}this.start_value!==0&&this.drawFocusHint()},drawGrid:function(){var pathString="",i;if(this.options.show_vertical_labels){var y=this.graph_height+this.y_padding_top;for(i=0;i<this.y_label_count;i++)y=y-this.graph_height/this.y_label_count,pathString+="M"+this.x_padding_left+","+y,pathString+="L"+(this.x_padding_left+this.graph_width)+","+y}if(this.options.show_horizontal_labels){var x=this.x_padding_left+this.options.plot_padding+this.grid_start_offset,x_labels=this.options.labels.length;for(i=0;i<x_labels;i++)pathString+="M"+x+","+this.y_padding_top,pathString+="L"+x+","+(this.y_padding_top+this.graph_height),x=x+this.step;x=x-this.options.plot_padding-1,pathString+="M"+x+","+this.y_padding_top,pathString+="L"+x+","+(this.y_padding_top+this.graph_height)}this.paper.path(pathString).attr({stroke:this.options.grid_colour,"stroke-width":"1px"})},drawLines:function(label,colour,data){var coords=this.calculateCoords(data),pathString="";for(var i=0;i<coords.length;i++){var x=coords[i][0]||0,y=coords[i][1]||0;pathString=this.drawPlot(i,pathString,x,y,colour)}this.paper.path(pathString).attr({stroke:colour,"stroke-width":"3px"})},calculateCoords:function(data){var x=this.x_padding_left+this.options.plot_padding-this.step,y_offset=this.graph_height+this.y_padding_top+this.normalise(this.start_value),y=0,coords=[];for(var i=0;i<data.length;i++)y=y_offset-data[i],x=x+this.step,coords.push([x,y]);return coords},drawFocusHint:function(){var length=5,x=this.x_padding_left+length/2-1,y=this.options.height-this.y_padding_bottom,pathString="";pathString+="M"+x+","+y,pathString+="L"+(x-length)+","+(y-length),pathString+="M"+x+","+(y-length),pathString+="L"+(x-length)+","+(y-length*2),this.paper.path(pathString).attr({stroke:this.options.label_colour,"stroke-width":2})},drawMeanLine:function(data){var offset=data.sum()/data.length,pathString="";pathString+="M"+(this.x_padding_left-1)+","+(this.options.height-this.y_padding_bottom-offset),pathString+="L"+(this.graph_width+this.x_padding_left)+","+(this.options.height-this.y_padding_bottom-offset),this.paper.path(pathString).attr(this.options.meanline)},drawAxis:function(){var pathString="";pathString+="M"+(this.x_padding_left-1)+","+(this.options.height-this.y_padding_bottom),pathString+="L"+(this.graph_width+this.x_padding_left)+","+(this.options.height-this.y_padding_bottom),pathString+="M"+(this.x_padding_left-1)+","+(this.options.height-this.y_padding_bottom),pathString+="L"+(this.x_padding_left-1)+","+this.y_padding_top,this.paper.path(pathString).attr({stroke:this.options.label_colour})},makeValueLabels:function(steps){var step=this.label_step,label=this.start_value,labels=[];for(var i=0;i<steps;i++)label=this.roundValue(label+step,2),labels.push(label);return labels},drawMarkers:function(labels,direction,step,start_offset,font_offsets,extra_font_options){function x_offset(value){return value*direction[0]}function y_offset(value){return value*direction[1]}var x=this.x_padding_left-1+x_offset(start_offset),y=this.options.height-this.y_padding_bottom+y_offset(start_offset),pathString="",font_options={font:this.options.font_size+'px "Arial"',stroke:"none",fill:"#000"};Object.extend(font_options,extra_font_options||{});for(var i=0;i<labels.length;i++)pathString+="M"+x+","+y,typeof labels[i]!="undefined"&&(labels[i]+"").length>0&&(pathString+="L"+(x+y_offset(5))+","+(y+x_offset(5)),this.paper.text(x+font_offsets[0],y-font_offsets[1],labels[i]).attr(font_options).toFront()),x=x+x_offset(step),y=y+y_offset(step);this.paper.path(pathString).attr({stroke:this.options.label_colour})},drawVerticalLabels:function(){var y_step=this.graph_height/this.y_label_count;this.drawMarkers(this.value_labels,[0,-1],y_step,y_step,[-8,-2],{"text-anchor":"end"})},drawHorizontalLabels:function(){this.drawMarkers(this.options.labels,[1,0],this.step,this.options.plot_padding,[0,(this.options.font_size+7)*-1])}}),Ico.BarGraph=function(){this.initialize.apply(this,arguments)},Object.extend(Ico.BarGraph.prototype,Ico.BaseGraph.prototype),Object.extend(Ico.BarGraph.prototype,{chartDefaults:function(){return{plot_padding:0}},normaliserOptions:function(){return{start_value:0}},setChartSpecificOptions:function(){this.bar_padding=5,this.bar_width=this.calculateBarWidth(),this.options.plot_padding=this.bar_width/2,this.step=this.calculateStep(),this.grid_start_offset=this.bar_padding-1,this.start_y=this.options.height-this.y_padding_bottom},calculateBarWidth:function(){return this.graph_width/this.data_size-this.bar_padding},calculateStep:function(){return(this.graph_width-this.options.plot_padding*2-this.bar_padding*2)/validStepDivider(this.data_size)},drawPlot:function(index,pathString,x,y,colour){return x=x+this.bar_padding,pathString+="M"+x+","+this.start_y,pathString+="L"+x+","+y,this.paper.path(pathString).attr({stroke:colour,"stroke-width":this.bar_width+"px"}),pathString="",x=x+this.step,pathString+="M"+x+","+this.start_y,pathString},drawHorizontalLabels:function(){var x_start=this.bar_padding+this.options.plot_padding;this.drawMarkers(this.options.labels,[1,0],this.step,x_start,[0,(this.options.font_size+7)*-1])}}),Ico.HorizontalBarGraph=function(){this.initialize.apply(this,arguments)},Object.extend(Ico.HorizontalBarGraph.prototype,Ico.BaseGraph.prototype),Object.extend(Ico.HorizontalBarGraph.prototype,{setChartSpecificOptions:function(){this.y_padding_top=0,this.x_padding_left=20+this.longestLabel()*(this.options.font_size/2),this.bar_padding=5,this.bar_width=this.calculateBarHeight(),this.options.plot_padding=0,this.step=this.calculateStep()},normalise:function(value){var offset=this.x_padding_left;return value/this.range*(this.graph_width-offset)},calculateBarHeight:function(){return this.graph_height/this.data_size-this.bar_padding},calculateStep:function(){return(this.options.height-this.y_padding_bottom)/validStepDivider(this.data_size)},drawLines:function(label,colour,data){var x=this.x_padding_left+this.options.plot_padding*2,y=this.options.height-this.y_padding_bottom-this.step/2,pathString="M"+x+","+y,i;for(i=0;i<data.length;i++)pathString+="L"+(x+data[i]-this.normalise(this.start_value))+","+y,y=y-this.step,pathString+="M"+x+","+y;this.paper.path(pathString).attr({stroke:colour,"stroke-width":this.bar_width+"px"})},drawFocusHint:function(){var length=5,x=this.x_padding_left+this.step*2,y=this.options.height-this.y_padding_bottom,pathString="";pathString+="M"+x+","+y,pathString+="L"+(x-length)+","+(y+length),pathString+="M"+(x-length)+","+y,pathString+="L"+(x-length*2)+","+(y+length),this.paper.path(pathString).attr({stroke:this.options.label_colour,"stroke-width":2})},drawVerticalLabels:function(){var y_start=this.step/2-this.options.plot_padding*2;this.drawMarkers(this.options.labels,[0,-1],this.step,y_start,[-8,this.options.font_size/8],{"text-anchor":"end"})},drawHorizontalLabels:function(){var x_step=this.graph_width/this.y_label_count,x_labels=this.makeValueLabels(this.y_label_count);this.drawMarkers(x_labels,[1,0],x_step,x_step,[0,(this.options.font_size+7)*-1])}}),Ico.LineGraph=function(){this.initialize.apply(this,arguments)},Object.extend(Ico.LineGraph.prototype,Ico.BaseGraph.prototype),Object.extend(Ico.LineGraph.prototype,{normalise:function(value){var total=this.start_value===0?this.top_value:this.top_value-this.start_value;return value/total*this.graph_height},chartDefaults:function(){return{plot_padding:10}},setChartSpecificOptions:function(){this.x_padding_left=30+this.longestLabel(this.value_labels)*(this.options.font_size/2),typeof this.options.curve_amount=="undefined"&&(this.options.curve_amount=10)},normaliserOptions:function(){return{start_value:this.options.start_value}},calculateStep:function(){return(this.graph_width-this.options.plot_padding*2)/validStepDivider(this.data_size)},startPlot:function(pathString,x,y,colour){return this.lastPoint={x:x,y:y},pathString+"M"+x+","+y},drawPlot:function(index,pathString,x,y,colour){var w=this.options.curve_amount;if(this.options.markers==="circle"){var circle=this.paper.circle(x,y,this.options.marker_size);circle.attr({"stroke-width":"1px",stroke:this.options.background_colour,fill:colour})}return index===0?this.startPlot(pathString,x,y,colour):(w?pathString+=["C",this.lastPoint.x+w,this.lastPoint.y,x-w,y,x,y]:pathString+="L"+x+","+y,this.lastPoint={x:x,y:y},pathString)}}),Ico.SparkLine=function(){this.initialize.apply(this,arguments)},Ico.SparkLine.prototype={initialize:function(element,data,options){this.element=element,this.data=data,this.options={width:parseInt(getStyle(element,"width"),10),height:parseInt(getStyle(element,"height"),10),highlight:!1,background_colour:getStyle(element,"backgroundColor")||"#ffffff",colour:"#036"},Object.extend(this.options,options||{}),this.step=this.calculateStep(),this.paper=Raphael(this.element,this.options.width,this.options.height),this.options.acceptable_range?this.background=this.paper.rect(0,this.options.height-this.normalise(this.options.acceptable_range[1]),this.options.width,this.options.height-this.normalise(this.options.acceptable_range[0])):this.background=this.paper.rect(0,0,this.options.width,this.options.height),this.background.attr({fill:this.options.background_colour,stroke:"none"}),this.draw()},calculateStep:function(){return this.options.width/validStepDivider(this.data.length)},normalise:function(value){return this.options.height/this.data.max()*value},draw:function(){var data=this.normaliseData(this.data);this.drawLines("",this.options.colour,data),this.options.highlight&&this.showHighlight(data)},drawLines:function(label,colour,data){var pathString="",x=0,values=data.slice(1),i=0;pathString="M0,"+(this.options.height-data[0]);for(i=1;i<data.length;i++)x=x+this.step,pathString+="L"+x+","+Ico.round(this.options.height-data[i],2);this.paper.path(pathString).attr({stroke:colour}),this.lastPoint={x:0,y:this.options.height-data[0]}},showHighlight:function(data){var size=2,x=this.options.width-size,i=this.options.highlight.index||data.length-1,y=data[i]+Math.round(size/2);typeof this.options.highlight.index!="undefined"&&(x=this.step*this.options.highlight.index);var circle=this.paper.circle(x,this.options.height-y,size);circle.attr({stroke:!1,fill:this.options.highlight.colour})}},Object.extend(Ico.SparkLine.prototype,Ico.Base),Ico.SparkBar=function(){this.initialize.apply(this,arguments)},Object.extend(Ico.SparkBar.prototype,Ico.SparkLine.prototype),Object.extend(Ico.SparkBar.prototype,{calculateStep:function(){return this.options.width/validStepDivider(this.data.length)},drawLines:function(label,colour,data){var width=this.step>2?this.step-1:this.step,x=width,pathString="",i=0;for(i=0;i<data.length;i++)pathString+="M"+x+","+(this.options.height-data[i]),pathString+="L"+x+","+this.options.height,x=x+this.step;this.paper.path(pathString).attr({stroke:colour,"stroke-width":width})}}),global.Ico=Ico,typeof exports!="undefined"&&(module.exports=Ico)})(typeof window=="undefined"?this:window)
View
22 package.json
@@ -0,0 +1,22 @@
+{ "name": "ico"
+, "description": "A graph plotting library"
+, "version": "0.3.1"
+, "url": "http://turingjs.com/"
+, "author": "Alex R. Young <alex@helicoid.net>"
+, "engines": ["node >= 0.4.0"]
+, "main": "./lib/index.js"
+, "devDependencies": {
+ "dox": "latest"
+ , "jake": "latest"
+ , "jsmin": "latest"
+ , "jslint": "latest"
+ , "uglify-js": "latest"
+ , "expresso": "latest"
+ , "node-raphael": "latest"
+ }
+, "repository": {
+ "type" : "git"
+ , "url" : "https://github.com/alexyoung/ico.git"
+ }
+}
+
View
4 src/end.js
@@ -2,5 +2,9 @@
* Assign the Ico object as a global property.
*/
global.Ico = Ico;
+
+ if (typeof exports !== 'undefined') {
+ module.exports = Ico;
+ }
})(typeof window === 'undefined' ? this : window);
View
2 src/helpers.js
@@ -17,6 +17,8 @@ function validStepDivider(value) {
* @returns {Object} The style value
*/
function getStyle(el, styleProp) {
+ if (typeof window === 'undefined') return;
+
var style;
if (el.currentStyle) {
style = el.currentStyle[styleProp];