jump to navigation

Graficas con JavaScript febrero 12, 2007

Posted by superpiwi in Java, Javascript.
trackback

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…

About these ads

Comentarios»

1. raspberry ketone diet dr oz - junio 16, 2013

It’s remarkable to pay a quick visit this web page and reading the views of all mates about this article, while I am also keen of getting knowledge.

2. Eugenia - junio 16, 2013

Hey would you mind letting me know which hosting company you’re utilizing? I’ve loaded
your blog in 3 completely different browsers and
I must say this blog loads a lot faster then most.

Can you recommend a good hosting provider at a reasonable price?
Thank you, I appreciate it!

3. frontier cable and internet packages - julio 12, 2013

Yesterday, while I was at work, my sister stole my iphone and tested to see if it
can survive a thirty foot drop, just so she can be a youtube sensation.
My iPad is now broken and she has 83 views. I know this is
completely off topic but I had to share it with someone!

4. sleeping tablets - julio 14, 2013

Hello, its fastidious article about media print, we all be aware of
media is a enormous source of data.

5. acupuncture facial paralysis - septiembre 27, 2013

Link exchange is nothing else except it is simply placing the other person’s website link on
your page at proper place and other person will also do same
in favor of you.


Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: