Web App Development

Ico.js (and a bar chart example)

Ico.js is an open-source graphing library for Javascript. It's based on Raphael.

Pros and Cons

Pros:
  • Relatively easy to set up
  • Cross-browser (mostly)
Cons:
  • Numbers sometimes spaced to narrow
  • Black background in IE (fix below)
  • A bit clunky for simple graphs without groupings
Note that the focus is on sparklines, bar charts and line graphs - so no pie charts.

Bar chart example

Ico.js: https://raw.github.com/alexyoung/ico/master/ico.min.js
Rapehael: https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js
 <script src="raphael-min.js">
</script>
<script src="ico.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

<script>
$(document).ready(function(){
var data = [[3],[7],[5],[4]]; // needs grouping for colors to work
var settings = {
font_size: 20,
colours: ["blue"],
labels: ["Trees","Bushes","Flowers","Fungi"]
};
new Ico.BarGraph(
$("#bar-chart")[0],
data,
settings);
});
</script>

<div id="bar-chart" style="height: 200px; width: 400px;">
</div>
This looks a bit overcomplicated, maybe I just don't get how to use it.

Black background in IE

It doesn't work as well in IE8 though. I'm getting this:
IE8 doesn't support SVG which is what the other browsers are using. It uses VML instead. Somehow there is a black box as the first element, you can remove it by inserting this after the Ico.BarGraph call:
    $("#bar-chart shape").first().remove();

Comments


Follow me on Twitter
I'm building monitoring tool for site speed and Core Web Vitals.
➔ Start monitoring your website or run a free site speed test