wykres.txt

Java script - Prosta biblioteka do rysowania wykresów

Witam temat znowu powrócił (wszędzie jest już nowsze IE) ale z nowymi problemami. Skrypt w wersji od Rufek90 działa bardzo dobrze, musiałem pozostać w kodzie w jednym pliku HTML, gdyż IE oczywiście doszukało się próby oszustwa w pliku TXT. Pisze ze działa bardzo dobrze ale oczywiście nie w połaczeniu IE + Tibbo. Na Google Chrome i na Firefoxie wszystko działa bez zarzutu natomiast IE 11 nie generuje wykresu. Przyczyna jest chyba ustalona Tibbo nie jest demonem prędkości i skrypt zaczyna się uruchamiać jeszcze przed załadowaniem całej strony. Myśle tak dlatego, ze gdy zapisze źródło strony (pobranej z tibbo) a następnie uruchomię zawartość tej strony z lokalnego dysku, wówczas jest ok i wykres jest generowany. Czytałem czymś takim jak onload, próbowałem to zastosować ale lipa, może ktoś pomoże jak zmodyfikować ten skrypt aby uruchomił się dopiero po pobraniu całej strony.


& lt; !-- saved from url=(0031)http://10.165.1.246/wykres.html -- & gt;
& lt; html & gt; & lt; head & gt; & lt; meta http-equiv= " Content-Type " content= " text/html; charset=ISO-8859-2 " & gt;
& lt; script type= " text/javascript " & gt;
function poZaladowaniu(){



function MakeDraw() {
///////////////////////// optional
this.prepSurface = function () {
document.write( " & lt; canvas id='canvas " +this.id+ " ' width= " +this.width+ " height= " +this.height+ " & gt; & lt; /canvas & gt; " );
}
/////////////////////////
//////// prepares user interface
this.prepUI = function () {
var canvas=document.getElementById(this.id);
var ctx=canvas.getContext('2d');
ctx.font = (this.fSize+ " px sans-serif " );
return ctx;
}
//////// determines spacing between horizontal and vertical lines
this.spacing = function (orientation,number) {
var canvas=document.getElementById(this.id);

if (orientation == " horizontal " ) {
var spac=((canvas.width-this.offsetL-this.offsetR)/number);
} else {
var spac=(canvas.height-(this.fSize*2))/number;
}

return spac;
}
//////// draws grid
this.drawGrid = function() {
var canvas=document.getElementById(this.id);
var hei = canvas.height-this.fSize*2;
var wid = canvas.width-this.offsetR;
var spacH,spacV;
var precalc;

ctx.fillStyle = this.bgColor;
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.lineWidth = this.lineWidthG;
ctx.strokeStyle = this.gridColor;
ctx.beginPath();


spacH = this.spacing( " horizontal " ,this.data.length);
for(var i=0, len = this.data.length; i & lt; len;i++) {
precalc = i*spacH+this.offsetL;
ctx.moveTo(precalc,1);
ctx.lineTo(precalc,hei);
}

spacV = this.spacing( " vertical " ,this.horizontalNR);
for(var i=0;i & lt; this.horizontalNR;i++) {
precalc = i*spacV;
ctx.moveTo(1,precalc);
ctx.lineTo(wid-spacH,precalc);
}

ctx.stroke();
ctx.closePath();
}
//// stores minimal and maximal value in an array and returns it
this.getDataRange = function() {


var arr=new Array(0,0,0);
arr[0]=arr[1]=this.data[0];
for(var i=1, len = this.data.length; i & lt; len;i++) {
if (this.data[i] & lt; arr[0]) arr[0]=0 ///this.data[i];
if (this.data[i] & gt; arr[1]) arr[1]=15000 ///this.data[i];
}

//arr = 300
return arr;
}
//////// modifies spacing basing on length of labels ( number )
function determineSpacing(number) {
var spacing=0;
do {
number/=10;
spacing++;
} while (number & gt; 1);
return spacing;
}
//////// determines offsets
this.determineOffsets = function() {
var range=this.getDataRange();
if (this.enumerateV) this.offsetL = (determineSpacing(this.dataTrimmer)+2+determineSpacing(Math.max(Math.abs(range[0]),Math.abs(range[1]))))*this.fSize*0.6;
if (this.enumerateP) this.offsetR = (determineSpacing(this.dataTrimmer)+2+determineSpacing(Math.abs(this.data[this.data.length-1])))*this.fSize*0.6;
if (this.enumerateH) this.offsetR = Math.max(this.offsetR,(determineSpacing(this.data.length))*this.fSize*0.6);
}
//////// draws linear graph and enumerates axes/curve
this.drawGraphLinear = function() {
var canvas=document.getElementById(this.id);
var spacHoriz = this.spacing( " horizontal " ,this.data.length);
var spacVertic = this.spacing( " vertical " ,this.horizontalNR);
var hei=canvas.height-2*(spacVertic+this.fSize);

var range=this.getDataRange();
var totalRange=range[1]-range[0];
var verticalCoefficient=hei/totalRange;
var lookupTable = new Array();

for(var i=0, len = this.data.length; i & lt; len;i++) {
lookupTable[i]=hei-(this.data[i]-range[0])*verticalCoefficient+spacVertic;
}

ctx.lineWidth = this.lineWidthP;
ctx.strokeStyle = this.plotColor;
ctx.beginPath();

ctx.moveTo(this.offsetL,lookupTable[0]);
for(var i=1, len = this.data.length; i & lt; len;i++) {
ctx.lineTo(i*spacHoriz+this.offsetL,lookupTable[i]);
}



ctx.stroke();
ctx.closePath();
ctx.fillStyle = this.textColor;

if (this.enumerateP) {
for(var i=0, len = this.data.length; i & lt; len;i++) {
if (this.data[i] & lt; this.data[i+1] & & this.data[i-1] & gt; this.data[i]) {
ctx.fillText(Math.round(this.data[i]*this.dataTrimmer)/this.dataTrimmer,i*spacHoriz+this.offsetL,lookupTable[i]+12);
} else {
ctx.fillText(Math.round(this.data[i]*this.dataTrimmer)/this.dataTrimmer,i*spacHoriz+this.offsetL,lookupTable[i]-7);
}
}
}
if (this.enumerateH) {
var spaceNeeded = this.data.length*this.fSize*determineSpacing(this.data.length);
if (spaceNeeded & lt; canvas.width) {
for(var i=0, len = this.data.length; i & lt; len;i++) {
ctx.fillText(i*2,spacHoriz*i+this.offsetL-2,hei+2*spacVertic+10);
}
} else {
for(var i=0; i & lt; 4;i++) {
j=i*(this.data.length-1)/3;
ctx.fillText(Math.round(j)+1,spacHoriz*j+this.offsetL-2,hei+2*spacVertic+10);
}
}
}
if (this.enumerateV) {
for(var i=0; i & lt; this.horizontalNR-1;i++) {
var nrSpacing=totalRange/(this.horizontalNR-2);
ctx.fillText(Math.round((range[1]-i*nrSpacing)*this.dataTrimmer)/this.dataTrimmer,1,(i+1)*spacVertic-this.fSize*0.5);
}
}
}
////////
this.trimData = function () {
var range = 15000//// this.getDataRange();
var totalRange = 15000 ////range[1]-range[0];
var spac = determineSpacing(100/totalRange);
this.dataTrimmer = Math.round(Math.pow(10,(spac+this.adjustTrimmer-1)));
}
////////
this.data;
this.horizontalNR = 9;
this.fSize=10;
this.lineWidthP=2;
this.lineWidthG=1;
this.dataTrimmer;
this.adjustTrimmer=0;
this.textColor = 'rgba(100,100,100,1)';
this.plotColor = 'rgba(200,100,100,1)';
this.gridColor = 'rgba(0,0,0,0.1)';
this.bgColor = 'rgba(255,255,255,1)';
this.enumerateV = 1;
this.enumerateH = 1;
this.enumerateP = 1;
this.offsetL=0;
this.offsetR=0;
this.id;
this.height;
this.width;
var ctx;



//////////////////////
this.plot= function() {
//////
var canvas=document.getElementById(this.id);
this.width=canvas.width;
this.height=canvas.height;
//////
ctx=this.prepUI();
this.trimData();
this.determineOffsets();
this.drawGrid();
this.drawGraphLinear();
}
//////////////////////
}






























var tablica = [11140,11000,10820,10800,10800,10760,10700,10620,10560,10500,10400,0,0,0,0,0,0,0,0,0,0,0,0,0,];

var myp = new MakeDraw(); // create drawing object
myp.id= " canv " ; // tell the object where would you like to draw
myp.data=tablica; // pass 1dimentional array with data you'd like to draw
myp.plot(); // drawing











var tablica1 = [8780,8700,8980,9100,8960,11320,11320,11320,11320,11320,11300,0,0,0,0,0,0,0,0,0,0,0,0,0,];

var myp1 = new MakeDraw(); // create drawing object
myp1.id= " canv1 " ; // tell the object where would you like to draw
myp1.data=tablica1; // pass 1dimentional array with data you'd like to draw
myp1.plot(); // drawing








var tablica2 = [2560,2496,2412,2394,2502,2528,2544,2544,2544,2544,2544,0,0,0,0,0,0,0,0,0,0,0,0,0,];
var myp2 = new MakeDraw(); // create drawing object
myp2.id= " canv2 " ; // tell the object where would you like to draw
myp2.data=tablica2; // pass 1dimentional array with data you'd like to draw
myp2.plot(); // drawing






}
window.document.body.onload = poZaladowaniu;
& lt; /script & gt;

& lt; /head & gt;














& lt; body onload= " poZaladowaniu(); " & gt;

& lt; meta charset= " UTF-8 " & gt;


& lt; br & gt; silos 1 & lt; br & gt;
& lt; canvas width= " 900 " height= " 400 " id= " canv " & gt; & lt; /canvas & gt;
& lt; br & gt; silos 2 & lt; br & gt;
& lt; canvas width= " 900 " height= " 400 " id= " canv1 " & gt; & lt; /canvas & gt;
& lt; br & gt; silos 3 & lt; br & gt;
& lt; canvas width= " 900 " height= " 400 " id= " canv2 " & gt; & lt; /canvas & gt;










& lt; /body & gt; & lt; /html & gt;


Download file - link to post