Artetics.com - Start Point For Your Web Site

Bluff is small javascript library that creates canvas charts

To draw the chart we will need bluff javascript files (excanvas is needed for Internet Explorer only as always):

<script language="javascript" src="/js/bluff/js-class.js" type="text/javascript"></script>
<script language="javascript" src="/js/bluff/bluff-min.js" type="text/javascript"></script>
<!--[if IE]><script language="javascript" src="/js/bluff/excanvas.js" type="text/javascript"></script><![endif]-->


Adding canvas element to draw in:

<canvas id="bluffExample"></canvas>

Javascript code for drawing pie chart displaying number of posts by month:

window.onload = function () {
  //Create pie chart
  var bluffGraph = new Bluff.Pie('bluffExample', 400);
  //Use keynote theme. Several other themes can be used
  bluffGraph.theme_keynote();
  bluffGraph.title = 'Number of posts';

  for (i in data.items) {
    var item = data.items[i];
    //Add each data item to pie
    bluffGraph.data(item.label, item.data);
  }
  //Finally draw the chart
  bluffGraph.draw();
}


Result:

Flot is well-known plotting library for jQuery. By default it does not have pie support so we are going to use third-party implementation

Let's include necessary javascript files (excanvas is needed for Internet Explorer only as always):

<!--[if IE]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="/js/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/js/flot/jquery.flot.pie.pack.js"></script>


Div to draw in:

<div id="flotExample" style="width:400px;height:300px"></div>

Javascript code to draw the chart:

  jQuery(function () {
    jQuery.plot(jQuery("#flotExample"), data.items, {
      pie: {
        show: true,
        //UI settings
        pieStrokeLineWidth: 1,
        pieStrokeColor: '#FFF',
        showLabel: true,
        labelOffsetFactor: 4/6,
        labelBackgroundOpacity: 0.55,
        //Show label and percents in chart sectors
        labelFormatter: function(serie){
          return serie.label+'<br/>'+Math.round(serie.percent)+'%';
        }
      },
      legend: {
        show: true,
        position: "ne",
        backgroundOpacity: 0
      }
    })
  });

Result:

GRaphael is charting library for Raphael uses the SVG W3C Recommendation and VML as a base for creating graphics.

Including necessary javascript files:

<script language="javascript" src="/js/graphael/raphael.js" type="text/javascript"></script>
<script language="javascript" src="/js/graphael/g.raphael.js" type="text/javascript"></script>
<script language="javascript" src="/js/graphael/g.pie.js" type="text/javascript"></script>


Div to draw in:

<div id="graphaelExample"></div>

Javascript code to draw the chart:

  //Push our data into two separate arrays
  var labels = [];
  var values = [];
   for (i in data.items) {
     var item = data.items[i];
     labels.push(item.label);
     values.push(item.data);
   }
  //Lines below will draw the chart
  window.onload = function () {     //We will draw in our div
    var r = Raphael("graphaelExample");
    //Text settings
    r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";
    r.g.text(320, 100, "Number of posts").attr({"font-size": 20});

    //Create pie
    var pie = r.g.piechart(320, 240, 100, values, {legend: labels, legendpos: "west"});
      //We will adjust UI when mouse over the chart sector
    pie.hover(function () {
      this.sector.stop();
      this.sector.scale(1.1, 1.1, this.cx, this.cy);
      if (this.label) {
        this.label[0].stop();
        this.label[0].scale(1.5);
        this.label[1].attr({"font-weight": 800});
      }
    }, function () {
      this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
      if (this.label) {
        this.label[0].animate({scale: 1}, 500, "bounce");
        this.label[1].attr({"font-weight": 400});
      }
    });
  };

Result:

Plotkit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support

To draw the chart we will need plotkit javascript files:

<script type="text/javascript" src="/js/plotkit/MochiKit.js"></script>
<!--[if IE]><script type="text/javascript" src="/js/plotkit/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="/js/plotkit/PlotKit_Packed.js"></script>

Element to draw in:

  <canvas id="plotkitExample" height="300" width="300"></canvas>

Javascript to make this all work:

  window.onload = function () {
    var options = {
      //IE fix
      "IECanvasHTC": "../plotkit/iecanvas.htc",
      "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
      "padding": {left: 10, right: 10, top: 10, bottom: 30},
      "xTicks": [{v:0, label:data.items[0].label},
      {v:1, label:data.items[1].label},
      {v:2, label:data.items[2].label}],
      "drawYAxis": false,
      //Radius
      "pieRadius": 0.35
    };
    var layout = new PlotKit.Layout("pie", options);
    //Add our data
    layout.addDataset("sqrt", [[0, data.items[0].data], [1, data.items[1].data], [2, data.items[2].data]]);
    layout.evaluate();
    //We will work with our div
    var canvas = MochiKit.DOM.getElement("plotkitExample");
    //Draw
    var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
    plotter.render();
  };

Result:

Sparklines is jQuery plugin that generates small inline charts.

Include javascript files:

<script language="javascript" src="/js/sparklines/jquery.js" type="text/javascript"></script>
<script language="javascript" src="/js/sparklines/sparklines.js" type="text/javascript"></script>


Container to draw in:

<span id="sparklinesExample"></span>

Javascript code to draw the chart:

  //Put data into string
  var inlineString = '';
  for (i in data.items) {
    var item = data.items[i];
    inlineString += item.data + ',';
  }
  inlineString = inlineString.substring(0, inlineString.length-1);
  //Draw chart
  jQuery(function() {
     jQuery('#sparklinesExample').html(inlineString);
     jQuery('#sparklinesExample').sparkline('html', { type: 'pie', height: '7.0em' });
  });

Result: