Pequeñas bibliotecas basadas en Cnavas JavaScript de la carta-ProtoChart

Funcionamiento

Cree un gráfico circular básico.

<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;




}



}


}

});
}());

Cree un gráfico de barras básico.

<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]);
}());

Cree un gráfico de líneas básico.

<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);
}());