alexyoung / ico

JavaScript graph library based on Raphael

Introduction

Ico is a JavaScript graph library that uses Raphael to draw. This means it can draw graphs in multiple browsers (including IE).

Raphael is the only dependency. I’ve tested the examples with Raphael 2.0 and they appear to work correctly, but please report bugs through GitHub.

• Documentation
• Examples

Support

Donations to support future development are welcome and appreciated: Donate

Targeted graph types

• Sparklines
• Line graphs
• Bar graphs

Design considerations and goals

• Clarity: Use of white-space to help lend clarity to graphs, nominal scale vs. ordinal scale
• Simplicity: Minimal use of decorations and lines, reliance on the Gestalt principle of closure
• Conciseness: Avoidance of graph types that don’t efficiently present data (pie charts, radar maps)

These goals are based on recommendations in Stephen Few’s books:

• Show Me the Numbers: Designing Tables and Graphs to Enlighten
• Information Dashboard Design

Which was generally in turn based on Edward Tufte’s work.

Test-Driven

Built with QUnit and Node unit tests.

Todo

• Humanize labels: rather than showing 1,000,000 optionally show “1m”

Examples

See index.html for current API usage. This will change as I evolve the API to support the targeted graph types.

Requirements

• Raphael

License

MIT License.

ico's Issues

SparkLine and SparkBar don't work correctly in IE

Sometimes IE displays the Spark graphs with messed up co-ordinates. It happens in all IE versions.

Ico extends Array.prototype…

This is not a bug, but extending Array.prototype tends to cause unexpected issues with other libraries. If everyone wrote their JavaScript properly, this would not be as big a problem, but for (val in myArray) without checking hasOwnAttribute is a common sight, and Ico’s extentions causes these scripts to fall over and die.

These scripts should be fixed, but if you’re working on a client’s site, you may not be able to do so easily, if at all (it might be outside your control), so it makes it a lot less certain that Ico can easily be implemented on legacy sites.

Line graph build fails if all values match due to step == 0

If you build a line graph with all of the Y values lining up to be the exact same thing, Ico fails in longestLabel() due to the labels variable having a length of 0. Seems this is because the for loop in the makeValueLabels() never runs because step == 0

Horizontal bar graphs with many values have the highest value go outside the bounds.

See the horizontal bar graph with negative and positive values.
http://alexyoung.github.io/ico/examples.html

25th value is not visible, it has negative y value.
(for me: <text fill="#000000" stroke="none" font="10px &quot;Arial&quot;" style="text-anchor: end; font: 10px &quot;Arial&quot;;" text-anchor="end" y="-3.375" x="21"><tspan>25</tspan></text> )

new Ico.HorizontalBarGraph($('horizontal_negative_and_positive'), [-57,-31,-87,66,-30,-77,-88,-75,-20,-48,-56,-91,16,-41,-87,-69,-65,-62,58,-15,-49,-75,-42,-78,-79]);

Update Existing LineGraph

Is there an easy way to update an existing linegraph with new data for implementing real-time/live updating plots?

Misleading/incorrect element selectors in documentation

The project home page shows few graph examples, like:

new Ico.BarGraph($('bargraph'), { one: $random(1, 25) }, { bar_labels: true });

Unfortunatelly, the selector used in examples is incorrect/does not work: element selector returns either empty list or multiple entries while simple element is expected. This confuses the users (like me!) trying to use library at first.

The reason why the actual graphs are shown is because document.getElementById is used instead.
Thus, in examples, use either:

• jQuery: $('#bargraph')[0]
• Javascript: document.getElementById('bargraph')

Multiple Bargraphs

I am using the following to create multiple bar graph

new Ico.BarGraph(document.getElementById('graph_search_image'), {one: [100,200,300,400], two: [120,100,220,500]}, {meanline: true, grid: true,colors: {one: '#aaa', two: '#bbb'},labels: ['jan','feb', 'mar','apr'] });

The graph renders good but I want the bars side-by-side instead of on top of each other, how do I accomplish that, and how do I make the graph load colors I want it to load, (its always random).

Created with Raphaël100200300400500janfebmarapr

Too many y-axis labels on low values

I have a graph with 30 days of data, with only a single day having a value above 0 (namely 3). This produces a rather odd presentation, where the y-axis has labels for every .1 value (i.e. 1.1, 1.2, 1.3, etc.) as you can see in the screenshot below.

Not only are the fractional labels rather irrelevant to the data, there are also too many of them to fit the y-axis, causing them to overlap…

Is there some setting I can set when I know that all my data is integer, so I don't want fractional labels?

Added Node.js examples

It'd be nice if there were a few node.js examples, because I'm not exactly sure how this library outputs using node...

Can't reduce the number of labels without reducing the number of

<script id="values"> [0.0, 104.67294008891, 104.67294008891, 104.18512195868, 103.79775878126, 103.42288682266, 103.0854520389, 102.7817896139, 102.50809363900999, 102.26173306105999, 102.03953678446001, 101.83944119084, 101.65889753082, 101.65102065069, 101.65117829471, 101.48353840805, 101.49458882735001, 101.3376824579, 101.21458932553, 101.09526257448, 100.98770213268, 100.89054654156999, 100.88799969882001, 100.89730443212, 100.72467212522001, 100.72720974527, 100.66779114430999, 100.66858288520999, 100.60811243068, 100.60142321342, 100.53530480165, 100.48557694294999, 100.44019455251001, 100.44470147452, 100.44204035888, 100.44265400889, 100.37036350986, 100.30632655397001, 100.31067354481, 100.30456818321001, 100.30501307585, 100.29890044066, 100.30153331772, 100.10447127371, 99.997978813261, 99.719656983024, 99.531541326132, 99.339062282158, 99.146500186514, 98.95380289933901, 98.761072992847, 98.568205718516, 98.375310524675, 98.182281078347, 97.989222027712, 97.79603741747201, 97.602817982156, 97.409481058072, 97.216109706608, 97.022634277757, 96.82912258426501, 96.635523366546, 96.441879172503, 96.248161147717, 96.054362817913, 95.860481748922, 95.666565151901, 95.47257824752499, 95.2785466662, 95.084454377412, 94.89031036610601, 94.696114265184, 94.501864832198, 94.30757007564901, 94.113221982692, 93.91883360031001, 93.724392056665, 93.567401293308, 93.56352878346101, 93.346776483724, 93.132690070815, 92.918599330353, 92.889719377633, 92.949600579212, 92.905612652891, 92.864471577208, 92.823402252458, 92.782417934351, 92.741434970589, 92.700463277886, 92.659492496682, 92.618601476331, 92.601848114482, 92.589010974603, 92.58070665618699, 92.580970724751, 92.548810927821, 92.487530476311, 92.212626501733, 92.06285377850399, 92.12955903148399, 92.02847531616, 92.047259388943, 92.002855723041, 91.997890299968, 92.009884548589, 92.063591434158, 92.063591434158, 92.290420752358, 92.517206988353, 92.74390656642801, 92.970520456489, 93.197049493313, 93.423494368966, 93.649856081735, 93.876135479091, 94.102333419687, 94.328450623227, 94.55448790425, 94.780446132886, 95.006326849197, 95.232131504395, 95.457861617598, 95.683518529748, 95.90910341765499, 96.134617597257, 96.360062689846, 96.58544030667, 96.810751975616, 97.03599919541, 97.26118327927999, 97.486304491826, 97.711362089154, 97.93635563433199, 98.161284748703, 98.37421734729101, 98.563854502705, 98.731988550371, 98.88089356497, 99.012669870224, 99.12921011488, 99.232215099483, 99.323207491782, 99.403536926044, 99.474414967582, 99.536926349924, 99.592036076174, 99.640604209149, 99.683392283983, 99.721077679819, 99.75425828812, 99.78346649746899, 99.809170578153, 99.831786170225, 99.851679165025, 99.869175129208, 99.884558986137, 99.898083897032, 99.909971945403, 99.920419735471, 99.92959957302901, 99.937664574099, 99.944748460192, 99.95097012612099, 99.95643320691599, 99.961229896508, 99.96544098101, 99.969138338485, 99.972385414055, 99.975238246471, 99.977743512825, 99.979942813055, 99.981874670586, 99.983572553488, 99.98506263990599, 99.98636926241001, 99.98750575157001, 99.98849012644399, 99.989346796068, 99.990093622871, 99.990750014511, 99.99132831850301, 99.99183479920501, 99.992277742775, 99.99266651147501, 99.993007748607, 99.99330666409901, 99.993568216819, 99.993797198013, 99.99399737185401, 99.994172015459, 99.994324072259, 99.994456037828, 99.99455413757, 99.994547171134, 99.95916789225599, 99.95751147087401, 99.92112015252201, 99.883116264317, 99.87450167962, 99.874239195068, 99.869159606479, 99.86875544696599, 99.84735607584, 99.824186329689, 99.801034381195, 99.777892901435, 99.754755579943, 99.73162558861, 99.708504899313, 99.68538764775799, 99.662275639682, 99.63916411649, 99.61606498715399, 99.59296235822, 99.56986173322599, 99.546761223039, 99.523683960779, 99.500596157473, 99.47750488285601, 99.454417957115, 99.525550358076, 99.407458918656, 99.384381085043, 99.361287592279, 99.338210587413, 99.315124193104, 99.292048191959, 99.268970105975, 99.24590485388501, 99.222833641025, 99.199772206655, 99.17670652841299, 99.15364697264401, 99.130588423839, 99.107536045936, 99.08448291873499, 99.061434309369, 99.038384937308, 99.015338543808, 98.99229710464999, 98.969258647679, 98.946219999587, 98.923183638976, 98.900149158697, 98.877116818404, 98.85407791339101, 98.831044455927, 98.807957384654, 98.784904518748, 98.76181252904101, 98.73876588306099, 98.715847316848, 98.692852289475, 98.66985132043, 98.646831544994, 98.62382472623, 98.600802229956, 98.577778716886, 98.554653730819, 98.531487906444, 98.50837512361001, 98.485267120497, 98.462122347833, 98.438983125189, 98.432149708382, 98.409143867993, 98.123212754848, 98.12232252392799, 98.072354950127, 98.098026972301, 98.098026972746, 98.090567470981, 97.989120836544, 97.886819922859, 97.784495233613, 97.682144532391, 97.593311232903, 97.60189897023001, 97.56456103513, 97.56051876116, 97.551762350408, 97.514165960498, 97.492080383225, 97.225076857081, 96.956950235298, 96.761848387846, 96.789464252236, 96.695426903928, 96.713580814438, 96.767370156983, 96.767370156983, 96.994597267057, 97.221715793868, 97.448734737059, 97.675654060607, 97.896949580705, 98.102161516163, 98.28735344702399, 98.454431797949, 98.60514106234301, 98.741076101305, 98.863588337281, 98.97394267188801, 99.073419690406, 99.16313381805601, 99.244046733458, 99.317024058171, 99.382846934738, 99.44221978467, 99.495778318197, 99.544095345838, 99.587688189924, 99.627022407396, 99.662517678022, 99.694551683873, 99.72346621120201, 99.749568084938, 99.773134875467, 99.794415453429, 99.81363497267701, 99.830995265119, 99.846679972251, 99.860853231921, 99.87366514944401, 99.885249360052, 99.895725507359, 99.905202510486, 99.913778929428, 99.921543318701, 99.928574514636, 99.93494446874, 99.940716679447, 99.945949954692, 99.950696197459, 99.95500440266, 99.95891829135401, 99.962484834533, 99.96574850394, 99.968733119543, 99.97145401120801, 99.973936509142, 99.976202019399, 99.97827057813001, 99.980158745797, 99.981883685536, 99.983459683952, 99.984900880002, 99.98621901999199, 99.987427928322, 99.988538007868, 99.98955969201499, 99.990500773305, 99.99136824112401, 99.99153463108999, 99.99153463108999, 99.99164204273, 99.99156266222, 99.834820324814, 99.8365706149, 99.836570614928, 99.835734838298, 99.579139561761, 99.583399856776, 99.388106072511, 99.19541599200899, 99.00277324123, 98.830880862671, 98.83024521053, 98.777943514532] </script>

  <script>
  valuesArray = eval(document.getElementById("values").innerHTML);
  graph = new Ico.LineGraph(document.getElementById( 'graph' ), valuesArray, { meanline: { stroke: '#AA0000' },  colours: { one: '#990099'}, grid: true} );

  </script>

If I have code that looks like the above, as far as I can tell, there is no way to reduce the number of x axis labels/grid lines, without changing how they are plotted. Ideally I would be able to define how many ticks should appear on the x axis and then define them without impacting the plotting.

Raphael 2.0?

Has this library been updated to use Raphael 2.0? Or, does it require the older version? I haven't tested it with the new version of Raphael, but wanted to ask if you were aware of any problems. Thanks.

Line graph from example should be a straight line?

I created a graph from the examples, like this:

new Ico.LineGraph(document.getElementById('chart_1'), [1, 2, 3, 4], { grid: true });

However the line that is drawn isn't straight - screenshot here: http://imgur.com/mYfXE

Aled.

When defining labels, the vertical lines are incorrect

Referencing the demo live example, the linegraph with custom labels is rendering the labels in the incorrect position. The are getting incrementally farther away from the points.

I am trying to add custom labels to my own charts and the vertical lines and am running into the same issue.

Ability to set each bar on a bar graph to a different colour

Right now the entire graph has to be one colour. Would be sweet if I could just pass in an array for colours and have each bar be the corresponding color.

Incorrect graph with all zero values

The graph is shown incorrectly when all the values are zero:

• Line graph: straight line above the graph, no labels
• Bar graph: all full bars
• Etc.

Expected outcome is have flat line/bars at level 0.

var placeholder = document.getElementById('graph');

// var values = [0, 1, 4, 3];  // <-- OK
var values = [0, 0, 0, 0];  // <-- NOK
new Ico.LineGraph(placeholder, values, 
{colour:'#ff0000', labels:['one', 'two', 'three', 'four'], height:300, width: 300}
);

Used versions:

• Ico (latest from master): 15e69ac
• Raphael.js: 2.0.1

feature: line graph stroke width / nostroke option

Also with nostroke enabled, one could make plot similar to scatter plot.

bar going outside the graph when using label_count

Not sure if this is a bug or feature request, but if you use label_count some of the data (bars) will go outside the actual graph.
Would be nice if all data (bars) would show inside the graph.

new Ico.BarGraph($('bargraph'),
{ data: [150, 100, 50, 25]},
{ bar_labels: true, label_count: 10});