Small Cnavas Based Chart JavaScript Libraries – ProtoChart

Chart Library provides 3 JavaScript libraries that make it easy to render pie charts, line charts and bar charts using html5 canvas element.

How to use it:

Create a basic pie chart.

<script src="js/pie-chart.js"></script>

(function () {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var data = { "Mombasa": 75, "Eldoret": 68, "Mandera": 32,
               "Nairobi": 95, "Lodwar": 20, "Embu": 51};
  var pie_data = createPieChart(canvas, context, data);
  var center = [canvas.width / 2, canvas.height / 2];
  var radius = Math.min(canvas.width, canvas.height) / 2;
  $("canvas").mousemove(function (e) {
    var x = e.pageX - $("canvas").offset().left | 0;
    var y = e.pageY - $("canvas").offset().top | 0;
    var from_center_x = x - center[0];
    var from_center_y = y - center[1];
    var from_center = Math.sqrt(Math.pow(Math.abs(from_center_x), 2) +
                                Math.pow(Math.abs(from_center_y), 2 ));
    if (from_center <= radius) {
      var angle = Math.atan2(from_center_y, from_center_x);
      if (angle < 0) {
          angle = 2 * Math.PI + angle;
      }
      for (var slice in pie_data) {
        if (angle >= pie_data[slice]["start_angle"] &&
            angle <= pie_data[slice]["end_angle"]) {
            var slice_value = $("div.slice_value");
            slice_value.text(pie_data[slice]["key"] + ": " +
                             pie_data[slice]["value"]);
            slice_value.css("border-color", pie_data[slice]["colour"]);
            return;
        }
      }
    }
  });
}());

Create a basic bar chart.

<script src="js/bar-chart.js"></script>

(function () {
  var random = Math.random;
  var context = document.getElementById("bar_chart").getContext("2d");
  var graph = new BarChart(context);
  graph.width = 800;
  graph.height = 400;
  graph.maxValue = 30;
  graph.margin = 2;
  graph.xAxisLabelArr = ["January", "February", "March", "April", "May",
  "June", "July", "August", "September",
  "October", "November", "December"];
  graph.update([random() * 30, random() * 30, random() * 30, random() * 30,
  random() * 30, random() * 30, random() * 30, random() * 30,
  random() * 30, random() * 30, random() * 30, random() * 30]);
}());

Create a basic line chart.

<script src="js/line-chart.js"></script>

(function () {
  var data = {
    title: "GDP at Market Prices (Kshs trillions)",
    xLabel: 'Year', 
    yLabel: 'GDP (trillions)',
    labelFont: '19pt Arial', 
    dataPointFont: '10pt Arial',
    renderTypes: [LineChart.renderType.lines, LineChart.renderType.points],
    dataPoints: [{ x: '2001', y: 1.020022 }, 
                 { x: '2002', y: 1.025584 }, 
                 { x: '2003', y: 1.0556576 }, 
                 { x: '2004', y: 1.109541 },
                 { x: '2005', y: 1.1751333 },
                 { x: '2006', y: 1.2494588 }, 
                 { x: '2007', y: 1.3368738 },
                 { x: '2008', y: 1.3576401 },
                 { x: '2009', y: 1.394387 }, 
                 { x: '2010', y: 1.475302 },
                 { x: '2011', y: 1.540520 }, 
                 { x: '2012', y: 1.610653},
                 { x: '2013', y: 1.686149 }]
    };
  LineChart.render('line_chart', data);
}());