jump to navigation

Graficas con JavaScript febrero 12, 2007

Posted by superpiwi in Java, Javascript.
8 comments

Mediante PlotKit podemos crear rapidamente nuestras graficas con javascript.

http://media.liquidx.net/js/plotkit-doc/PlotKit.QuickStart.html

Veamos un ejemplo:


<HTML>
<HEAD>
<script type="text/javascript" src="./mochikit/MochiKit.js"></script>
<script type="text/javascript" src="./plotkit/Base.js"></script>
<script type="text/javascript" src="./plotkit/Layout.js"></script>
<script type="text/javascript" src="./plotkit/Canvas.js"></script>
<script type="text/javascript" src="./plotkit/SweetCanvas.js"></script>
</HEAD>
<BODY>

<div>
Pie chart - Resultados obtenidos<br/>
<canvas id="graph" height="280" width="280"></canvas>
</div>

<div>
Pie chart - Resultados obtenidos<br/>
<canvas id="graph2" height="280" width="280"></canvas>
</div><script>

var options = {
"IECanvasHTC": "/plotkit/iecanvas.htc",
"colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[4]),
"padding": {left: 0, right: 0, top: 10, bottom: 30},
"xTicks": [{v:0, label:"NUEVOS"},
{v:1, label:"IGUALES"},
{v:2, label:"DIFER."}],
"drawYAxis": false
};

function drawGraph() {
var layout = new PlotKit.Layout("pie", options);
layout.addDataset("reportdiff", [[0, 1], [1, 10], [2, 10]]);
layout.evaluate();
var canvas = MochiKit.DOM.getElement("graph");
var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
plotter.render();
}

var options2 = {
"IECanvasHTC": "/plotkit/iecanvas.htc",
"colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[5]),
"padding": {left: 0, right: 0, top: 10, bottom: 30},
"xTicks": [{v:0, label:"NUEVOS"},
{v:1, label:"IGUALES"},
{v:2, label:"DIFER."}],
"drawYAxis": false
};

function drawGraph2() {
var layout = new PlotKit.Layout("pie", options2);
layout.addDataset("reportdiff", [[0, 1], [1, 10], [2, 10]]);
layout.evaluate();
var canvas = MochiKit.DOM.getElement("graph2");
var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options2);
plotter.render();
}

MochiKit.DOM.addLoadEvent(drawGraph);
MochiKit.DOM.addLoadEvent(drawGraph2);
</script>
</BODY>

Y el resultado:

graficas.jpg

sencillo, verdad…