Exemplo: Criando Gráfico

walking · Abril 22, 2003

<html>

<head>

<!--

1000s of free ready to use scripts, tutorials, forums.

Author: Grigory - http://mpp.by.ru/

-->

/**

*

* class Point

*

*/

function Point(pos) {

this.setColor = setColor;

this.getColor = getColor;

this.setHeight = setHeight;

this.getHeight = getHeight;

this.setWidth = setWidth;

this.getWidth = getWidth;

this.setTop = setTop;

this.getTop = getTop;

this.setLeft = setLeft;

this.getLeft = getLeft;

this.setCoordinates = setCoordinates;

this.getCoordinates = getCoordinates;

this.getHTML = getHTML;

this.setCenter = setCenter;

this.getCenter = getCenter;

function setLeft(newLeft) {

this.left = newLeft;

}

function getLeft() {

return this.left;

}

function setTop(newTop) {

this.top = newTop;

}

function getTop() {

return this.top;

}

function setColor(newColor) {

this.color = newColor;

}

function getColor() {

return this.color;

}

function setHeight(newHeight) {

this.height = newHeight;

}

function getHeight() {

return this.height;

}

function setWidth(newWidth) {

this.width = newWidth;

}

function getWidth() {

return this.width;

}

function setCenter(isCenter) {

this.center = isCenter==true;

}

function getCenter() {

return this.center;

}

function setCoordinates(newCoordinates) {

this.coordinates = newCoordinates;

with(this) {

setLeft ( Math.floor (getCoordinates()[0]) );

setTop ( Math.floor (getCoordinates()[1]) );

}

function getCoordinates() {

return this.coordinates;

}

function getHTML() {

with (this)

return "<div style='position:absolute;background-Color:" + getColor() +

";left:" + (getCenter() ? getLeft() - Math.floor(getWidth() /2) : getLeft()) +

"px;top:" + (getCenter() ? getTop() - Math.floor(getHeight()/2) : getTop()) +

"px;width:" + getWidth() + "px;height:" + getHeight() + "px;font-size:0px'></div>";

}

with(this) {

if(arguments.length>0) {

setLeft ( typeof(pos)=="object"? pos[0] : arguments[0] );

setTop ( typeof(pos)=="object"? pos[1] : arguments[1] );

}

setColor ("black");

setHeight(1);

setWidth (1);

setCenter (false);

}

</script>

/**

*

* class Line

*

*/

function Line() {

this.getStyleHTML = getStyleHTML;

this.setColor = setColor;

this.getColor = getColor;

this.getHTML = getHTML;

this.setCoordinates = setCoordinates;

this.getCoordinates = getCoordinates;

this.setBounds = setBounds;

this.getBounds = getBounds;

this.setLeft = setLeft;

this.getLeft = getLeft;

this.setTop = setTop;

this.getTop = getTop;

this.setHeight = setHeight;

this.getHeight = getHeight;

this.setWidth = setWidth ;

this.getWidth = getWidth ;

this.setLineWidth = setLineWidth;

this.getLineWidth = getLineWidth;

this.getDistance = getDistance;

this.pt = new Point();

function setLeft(newLeft) {

this.left = newLeft;

}

function getLeft() {

return this.left;

}

function setTop(newTop) {

this.top = newTop;

}

function getTop() {

return this.top;

}

function setHeight(newHeight) {

this.height = newHeight;

}

function getHeight() {

return this.height;

}

function setWidth(newWidth) {

this.width = newWidth;

}

function getWidth() {

return this.width;

}

function getStyleHTML() {

with(this)

return 'style=\"position:absolute' +

';left:' + getLeft() +

'px;top:' + getTop() +

'px;width:' + getWidth() +

'px;height:' + getHeight() +

'px;background-color:' + getColor() +

';font-size:0px\"';

}

function setColor(newColor) {

this.color = newColor;

}

function getColor() {

return this.color;

}

function getDistance(begin,end) {

var dx = end[0] - begin[0];

var dy = end[1] - begin[1];

with(Math)

return sqrt(pow(dx,2) + pow(dy,2));

}

function setLineWidth(newWidth) {

this.lineWidth = newWidth;

this.pt.setWidth (this.getLineWidth());

this.pt.setHeight (this.getLineWidth());

}

function getLineWidth() {

return this.lineWidth;

}

function setBounds (beginX, beginY, endX, endY) {

setCoordinates ([[beginX,beginY],[endX,endY]]);

}

function getBounds () {

return this.getCoorditanes();

}

function setCoordinates(newCoordinates) {

this.coordinates = newCoordinates;

}

function getCoordinates() {

return this.coordinates;

}

function getHTML() {

// it use a function y = kx + b; [x0,y0]-[x1,y1]

with(this) {

x0 = getCoordinates()[0][0];

y0 = getCoordinates()[0][1];

x1 = getCoordinates()[1][0];

y1 = getCoordinates()[1][1];

}

var k = (y1 - y0) / (x1 - x0);

var b = y1 - k * x1;

with(this)

var sb = ["<div " + getStyleHTML() + " >"];

this.pt.setColor(this.getColor());

if(x0==x1)

with(this.pt) {

setHeight (Math.abs(y1 - y0));

setTop (Math.min (y0, y1));

setLeft (Math.min (x0, x1));

sb.push (getHTML());

}

else if(y0==y1)

with(this.pt) {

setWidth (Math.abs (x1 - x0));

setTop (Math.min (y0,y1));

setLeft (Math.min (x0, x1));

sb.push (getHTML());

}

else {

step = Math.abs(k)>1 ? Math.abs(1/k) : 1;

for(var x=Math.min(x0,x1); x<Math.max(x0,x1); x=x+step) {

y = k*x + b;

this.pt.setCoordinates([x,y]);

sb.push(this.pt.getHTML())

}

sb.push ("</div");

return sb.join("");

}

with (this) {

setLineWidth(1);

setColor ("black");

}

</script>

/**

*

* class Chart

*

*/

function Chart() {

this.getWidth = getWidth;

this.setWidth = setWidth;

this.getHeight = getHeight;

this.setHeight = setHeight;

this.visualize = visualize;

this.isVisualized = isVisualized;

this.getHTML = getHTML;

this.applyTo = applyTo;

this.setLineWidth = setLineWidth;

this.getLineWidth = getLineWidth;

this.setLineColor = setLineColor;

this.getLineColor = getLineColor;

this.setPointSize = setPointSize;

this.getPointSize = getPointSize;

this.redraw = redraw;

this.setChartType = setChartType;

this.getChartType = getChartType;

this.setValues = setValues;

this.getValues = getValues;

this.setGridEnabled = setGridEnabled;

this.getGridEnabled = getGridEnabled;

this.setGridLayout = setGridLayout;

this.getGridLayout = getGridLayout;

this.getGridHTML = getGridHTML;

this.setGridColor = setGridColor;

this.getGridColor = getGridColor;

this.setRange = setRange;

this.getRange = getRange;

this.self = null;

function setLineColor(newColor) {

this.lineColor = newColor;

this.redraw();

}

function getLineColor() {

return this.lineColor;

}

function applyTo(parentHTMLObject) {

this.id = parentHTMLObject.id + "_chart";

parentHTMLObject.innerHTML += this.getHTML();

this.visualize();

}

function isVisualized() {

return this.self != null;

}

function getWidth() {

return this.width;

}

function setWidth(newWidth) {

this.width = newWidth;

if(this.isVisualized()) {

this.self.firstChild.style.width = this.getWidth();

}

this.redraw();

}

function getHeight() {

return this.height;

}

function setHeight(newHeight) {

this.height = newHeight;

if(this.isVisualized()) {

this.self.firstChild.style.height = this.getHeight();

}

this.redraw();

}

function setPointSize(newSize) {

this.pointSize = newSize;

this.redraw();

}

function getPointSize() {

return this.pointSize;

}

function setRange(newRange) {

this.range = newRange;

this.redraw();

}

function getRange() {

return this.range;

}

function setGridColor(newColor) {

this.gridColor = newColor;

this.redraw();

}

function getGridColor() {

return this.gridColor;

}

function getGridHTML() {

var str = "";

var lineX = new Line();

var lineY = new Line();

lineX.setColor (this.getGridColor());

lineY.setColor (this.getGridColor());

with(this) {

dx = getWidth () / getGridLayout()[0];

dy = getHeight() / getGridLayout()[1];

for(var i=0; i<getGridLayout()[0]; i++) {

x = dx*i;

lineX.setCoordinates([[x,0],[x,getHeight()]]);

lineX.getHTML();

str += lineX.getHTML();

}

for(var i=0; i<getGridLayout()[1]; i++) {

y = dy*i;

lineY.setCoordinates([[0,y],[getWidth(),y]]);

str += lineY.getHTML();

}

return str;

}

function setGridLayout(newGridLayout) {

this.gridLayout = newGridLayout;

this.redraw();

}

function getGridLayout() {

return this.gridLayout;

}

function setGridEnabled(isEnabled) {

this.gridEnabled = isEnabled==true;

this.redraw();

}

function getGridEnabled() {

return this.gridEnabled;

}

function visualize() {

this.self = document.getElementById(this.id);

self.owner = this;

this.contentWindow = this.self.firstChild.contentWindow;

this.contentWindow.owner = this;

this.contentWindow.onload = new Function ("this.owner.map = this.document.documentElement.lastChild; this.owner.redraw()");

}

function setChartType(newType) {

this.chartType = newType;

this.redraw();

}

function getChartType() {

return this.chartType;

}

function setValues(newValues) {

this.values = newValues;

this.redraw();

}

function getValues() {

return this.values;

}

function setLineWidth(newLineWidth) {

this.lineWidth = newLineWidth;

this.redraw();

}

function getLineWidth() {

return this.lineWidth;

}

function redraw() {

with(this)

if(isVisualized()) {

map.topMargin = 0;

map.leftMargin = 0;

var sb = [this.getGridHTML()];

var ln = new Line();

var pt = new Point();

var bx = - getRange()[0][0];

var by = - getRange()[1][0];

var kx = getWidth() / ( getRange()[0][1] - getRange()[0][0] );

var ky = getHeight() / ( getRange()[1][1] - getRange()[1][0] );

var pset = [];

var x;

var y;

for(var i=0; i<getValues().length; i++) {

x = Math.floor ( (getValues()[0] + bx ) * kx );

y = Math.floor ( getHeight() - ( getValues()[1] + by ) * ky );

pset.push([x,y]);

}

switch(getChartType()) {

case Chart.Scatter :// this.window.alert("this is Scatter");

pt.setCenter(true);

pt.setColor(getLineColor());

for(var i=0; i<pset.length; i++) {

x0 = pset[0];

y0 = pset[1];

pt.setCoordinates([x0, y0]);

pt.setWidth (getLineWidth());

pt.setHeight (getLineWidth());

sb.push(pt.getHTML());

}

break;

case Chart.Polyline :// this.window.alert("this is Polyline");

ln.setColor(getLineColor());

ln.setLineWidth(getLineWidth());

for(var i=0; i<pset.length; i++) {

x0 = pset[0];

y0 = pset[1];

x1 = i==pset.length-1 ? x0 : pset[i+1][0];

y1 = i==pset.length-1 ? y0 : pset[i+1][1];

ln.setCoordinates([[x0,y0],[x1,y1]]);

sb.push (ln.getHTML());

}

break;

case Chart.Polygone :// this.window.alert("this is Polygone");

pt.setWidth (getPointSize());

pt.setHeight (getPointSize());

pt.setCenter (true);

for(var i=0; i<pset.length; i++) {

x0 = pset[0];

y0 = pset[1];

x1 = x0;

y1 = getHeight();

ln.setCoordinates([[x0,y0],[x1,y1]]);

//pt.setCoordinates([x0,y0]);

sb.push (ln.getHTML());

}

break;

case Chart.Gisto :// this.window.alert("Gistogram");

var dx = (getWidth()-getLineWidth()) / pset.length;

ln.setLineWidth (getLineWidth());

for(var i=0; i<pset.length; i++) {

x0 = i*dx;

y0 = getHeight();

x1 = x0;

y1 = pset[1];

ln.setColor (getLineColor());

ln.setCoordinates([[x0,y0],[x1,y1]]);

sb.push (ln.getHTML());

}

break;

default : alert("unknown " + getChartType());

}

map.innerHTML = sb.join("");

}

function getHTML() {

with(this)

return "<div id=" + id + " ><iframe disabled frameborder=yes scrolling=no style='width:" + getWidth() + "px;height:" + getHeight() + "px;'></iframe></div>";

}

// presettings

with(this) {

setChartType(Chart.Polygone);

setValues([]);

setGridLayout([10,4]);

setGridColor("silver");

setLineWidth (3);

setWidth(400);

setHeight(400);

setRange([[0,200],[-100,100]]);

setPointSize(10);

setLineColor("black");

this.window = window;

}

Chart.Scatter = 0;

Chart.Gisto = 1;

Chart.Polyline = 2;

Chart.Polygone = 3;

</script>

</head>

<body>

<table border=1 cellSpacing=-1 cellPdding=-1>

<tr>

<td>How to use it:</td><td style='text-align:center'>Preview Chart component</td>

</tr>

<tr>

<td style='vertical-align:top'>

<pre>< HTML >

< HEAD >

< SCRIPT language=jScript src="Point.js"> < /SCRIPT >

< SCRIPT language=jScript src="Line.js" > < /SCRIPT >

< SCRIPT language=jScript src="Chart.js"> < /SCRIPT >

< /HEAD >

< BODY >

< ELEMENTTAGNAME id=myPlace> </ ELEMENTTAGNAME>

< SCRIPT language=jScript>

var ch = new Chart();

with(ch) {

setChartType(<select onchange="if(this.options[this.selectedIndex].text=='Chart.Gisto') alert('use setLineWidth()'); ch.setChartType(eval(this.options[this.selectedIndex].text));"><option selected>Chart.Scatter</option><option>Chart.Polyline</option><option>Chart.Polygone</option><option>Chart.Gisto</option></select>);

setValues(<select onchange="ch.setValues(ValuesSet[this.selectedIndex])"><option selected>set 0</option><option>set 1</option><option>Set 2</option></select>);

setGridLayout([<input type=text id=gr_ly0 size=1 value=10 onchange="ch.setGridLayout([parseInt(this.value),parseInt(gr_ly1.value)])">,<input id=gr_ly1 type=text size=1 value=4 onchange="ch.setGridLayout([parseInt(gr_ly0.value),parseInt(this.value)])">]);

setGridColor(<select onchange="ch.setGridColor(this.options[this.selectedIndex].text);"><option selected>silver</option><option>black</option><option>navy</option><option>green</option></select>);

setLineWidth (<input type=text value=3 size=1 onchange="ch.setLineWidth(parseInt(this.value));">);

setLineColor(<select onchange="ch.setLineColor(this.options[this.selectedIndex].text);"><option selected>black</option><option>silver</option><option>red</option><option>navy</option><option>green</option></select>);

setWidth(<input type=text size=2 value=400 onchange="ch.setWidth(parseInt(this.value));">);

setHeight(<input type=text size=2 onchange="ch.setHeight(parseInt(this.value));" value=400>);

setRange([[<input type=text size=2 value=0 onchange="ch.range[0][0]=parseInt(this.value);ch.redraw();">,<input type=text size=2 value=200 onchange="ch.range[0][1]=parseInt(this.value);ch.redraw();">],[<input type=text size=2 value=-100 onchange="ch.range[1][0]=parseInt(this.value);ch.redraw();">,<input type=text size=2 value=100 onchange="ch.range[1][1]=parseInt(this.value);ch.redraw();">]]);

applyTo(document.getElementById("myPlace"));

}

< SCRIPT >

< /BODY >

< /HTML ></pre>

</td><td style="vertical-align:top" id=ChartPlace></td>

</tr>

<tr>

<td></td>

</tr>

</table>

<script type=text/javascript language=jScript>

ValuesSet = [];

ValuesSet[0] = [];

for(var i=0; i<200; i++) {

ValuesSet[0].push ([i,100 * Math.sin (i/40)]);

i= i + 20;

}

ValuesSet[1] = [];

for(var i=0; i<200; i++) {

ValuesSet[1].push ([i, 100-i]);

i= i + 20;

}

ValuesSet[2] = [];

for(var i=0; i<200; i++) {

ValuesSet[2].push ([i, 0.5*i]);

i= i + 20;

}

var ch = new Chart();

ch.setValues (ValuesSet[0]);

ch.setChartType (Chart.Scatter);

ch.applyTo(document.getElementById("ChartPlace"));

</script>

<center><a href='http://www.walking.kit.net'>Walking</a></center>

</body>

</html>

babu · Abril 23, 2003

Salve.Nossa, praque tudo isso?

sitenovo · Abril 23, 2003

Olá Walking,tudo bem??Não é por nada, mas seria de bom agrado se você explicasse suas postagens, que acha???só enviar codigo e ficar nisso, ficamos sem enteder e ainda sim, o moderador se achar certo poderá até bloquear você o que nenhum de nós desejamos, ok??Portanto amigo, diga algo, nem que seja p/ dizer, copiem é bom, ou meus scripts criados hj e por ai vai, ok??Contamos com sua compreensão![]sRodney

babu · Abril 23, 2003

Salve.C pelo menos ele colocasse uma descrição, pra qe serve, de onde retirou (se afirmativo), entre outras...

sosnilc · Abril 24, 2003

para graficos tanto client como server eu utilizo o OWC ( Office Web Components ) ..é muito bom ..

Entrar

Arquivado

Exemplo: Criando Gráfico

Recommended Posts

walking 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

babu 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

sitenovo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

babu 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

sosnilc 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante