diff --git a/demos/barchartfromfile.html b/demos/barchartfromfile.html new file mode 100644 index 0000000..1c9ec5a --- /dev/null +++ b/demos/barchartfromfile.html @@ -0,0 +1,89 @@ + + + + + + barchart + + + + + + + + + + + + + +

+
+ + + +
+ New graph
+ + + Choose graph style: +
+ No data values on axis

+ Data values 1 axis

+ Data values 2 axises
+ +
+ + Select a text file: + +
+
+ + + + + + + + +
+ sss +
+ + diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..8d27f69 --- /dev/null +++ b/src/style.css @@ -0,0 +1,54 @@ +#wrapper { + margin: 0 auto; + position: absolute; + width: 100px; + background: #EFF5FB; + padding: 2px; +} + +#fileDisplayArea { +} + +body { + margin: 0; + padding: 0; +} + + +div.left { + font-size: 18px; + margin: 2px 0 2px 0; + padding: 2px; +} + +#wrapper { + margin: 0 auto; + position: absolute; + width: 100px; + background: #EFF5FB; + padding: 2px; +} + +#fileDisplayArea { +} + +body { + margin: 0; + padding: 0; +} + + + +div.left{ + font-size: 18px; + margin: 2px 0 2px 0; + padding: 2px; +} + + +div.leftadvanced { + font-size: 12px; + margin: 2px 0 2px 0; + padding: 2px; +} + diff --git a/src/text.js b/src/text.js new file mode 100644 index 0000000..db6019a --- /dev/null +++ b/src/text.js @@ -0,0 +1,29 @@ +window.onload = function() { + + var fileInput = document.getElementById('fileInput'); + //var fileDisplayArea = document.getElementById('fileDisplayArea'); + + fileInput.addEventListener('change', function(e) { + var file = fileInput.files[0]; + var textType = /text.*/; +// if (file.type.match(textType)) { + + var reader = new FileReader(); + + reader.onload = function(e) { + //fileDisplayArea.innerText = reader.result; + window.myinit = reader.result; + newBarChart = new THREEGRAPHS.BarChartFromFile ( reader.result ); + newBarChart.init(); + + + } + + reader.readAsText(file); +// } else { +// fileDisplayArea.innerText = "File not supported!"; +// } + // hei4(window.myinit); + + }); +} diff --git a/src/threegraphs.js b/src/threegraphs.js index d8e726f..637c45e 100644 --- a/src/threegraphs.js +++ b/src/threegraphs.js @@ -77,29 +77,37 @@ THREEGRAPHS.Utils.prototype.colorLuminance = function ( hex, lum ) { /** * A function to get the max value in a 2-dimensional array */ - THREEGRAPHS.Utils.prototype.getMaxArr = function ( arr ){ var maxVal = arr[0][0]; + // TOM-ERIK START for( var i=0; i maxVal) maxVal = arr[i][j]; + if( !isNaN(arr[i][j]) && ( arr[i][j] > parseInt(maxVal )) ){ + maxVal = arr[i][j]; + } } } return maxVal; }; +// TOM-ERIK STOP /** * Function to get the max value in a 2-dimensional array */ - + THREEGRAPHS.Utils.prototype.getMinArr = function ( arr ){ var minVal = arr[0][0]; for( var i=0; irowsarray[0].split(',').length ) { +window.separatorchar = ';' +} else { +window.separatorchar = ','; +} + +var numberofcolumnsshowedasbars = rowsarray[0].split(window.separatorchar).length; + +} // end try +catch(err) { + try { + document.getElementById("errormessage").innerHTML = 'Error: ' + err.message; //err.message; + } + catch(err){ + console.log ( 'consider adding div id=demo to see error messages'); + } +} +// one less since first rows used used as axis values +if(window.datacellvalueonaxis == 'twoaxis') { +numberofcolumnsshowedasbars = numberofcolumnsshowedasbars - 1; +} + +//default is no data on axises +if ( window.datacellvalueonaxis == null || window.datacellvalueonaxis == isNaN) { + window.datacellvalueonaxis = 'zeroaxis' +} +var numberofrowsshowedasbars = 0; +if ( window.datacellvalueonaxis == 'twoaxis' || window.datacellvalueonaxis == 'oneaxis'){ + numberofrowsshowedasbars = rowsarray.length - 1 +} else { + numberofrowsshowedasbars = rowsarray.length +} + +var schema = { +cols: +new Array(numberofcolumnsshowedasbars), +rows: +new Array (numberofrowsshowedasbars) +}; + +var currentcolor = 0; +//initalizing empty schema with default values +for ( linecounter = 0 ; linecounter < numberofrowsshowedasbars ; linecounter ++ ) { + for ( columncounter = 0 ; columncounter < numberofcolumnsshowedasbars ; columncounter ++ ) { + schema.cols[columncounter] = { name:"col" + (columncounter + 1 ), color:colors[currentcolor++] }; + schema.rows[linecounter] = { name: "row " + (linecounter + 1), values: new Array (numberofcolumnsshowedasbars) }; + if ( currentcolor > colors.length ) { + currentcolor = 0; + } + } +} + + // decide number of columns + var numberoffieldsfirstline = 0; + if ( rowsarray[0].split(window.separatorchar) == null ) { + numberoffieldsfirstline = 0; + } else { + numberoffieldsfirstline = rowsarray[0].split(window.separatorchar).length; + } + +// end test format + +for ( linecounter = 0 ; linecounter < rowsarray.length ; linecounter ++ ) { + + // empty line + try { + rowsarray[linecounter] = rowsarray[linecounter].replace(String.fromCharCode(13),""); + if ( rowsarray[linecounter].length == 0 ) { + continue; + } + + // test format anc continue after logging error + if ( numberoffieldsfirstline != rowsarray[linecounter].split(window.separatorchar).length ) { + try { + document.getElementById("errormessage").innerHTML = document.getElementById("errormessage").innerHTML + + "wrong number of values on line" + (linecounter + 2) + ". Exptected " + + numberoffieldsfirstline + " values but found " + + rowsarray[linecounter].split(window.separatorchar).length + ". Ignoring line."; //err.message; + } + catch(err){ + console.log ( 'consider adding div id=demo to see error messages'); + } + } + + var valuesfromcurrentline = rowsarray[linecounter].split(window.separatorchar); + + // remove all " + for ( var k = 0 ; k < numberofcolumnsshowedasbars ; k++ ) { + if ( valuesfromcurrentline[k] != undefined) { + valuesfromcurrentline[k] = valuesfromcurrentline[k].split('"').join(''); + } + } + + if (window.datacellvalueonaxis == 'twoaxis') { + console.log('twoaxis'); + for ( columncounter = 0 ; columncounter < valuesfromcurrentline.length ; columncounter ++ ) { + // value used on axis + if (linecounter == 0 && columncounter==0) { + prefix = valuesfromcurrentline[0]; + } + // value used on the other axis + else if( linecounter == 0 ) { + schema.cols[columncounter-1].name= valuesfromcurrentline[columncounter]; + } + else if ( linecounter > 0 && columncounter == 0 ) { + schema.rows[linecounter-1].name = prefix + ' ' + valuesfromcurrentline[columncounter]; + } + else if (linecounter > 0 && isNaN ( valuesfromcurrentline[columncounter] ) ) { + schema.rows[linecounter-1].values[columncounter-1] = 0; + } + else { + schema.rows[linecounter-1].values[columncounter-1] = valuesfromcurrentline[columncounter]; + } + } + } + else if ( window.datacellvalueonaxis == 'oneaxis' ) { + console.log('oneaxis'); + for ( columncounter = 0 ; columncounter < valuesfromcurrentline.length ; columncounter ++ ) { + if ( linecounter > 0 && (columncounter == 0)) { + schema.rows[linecounter-1].name = 'row ' + linecounter + } + + if (linecounter == 0 ) { + schema.cols[columncounter].name=valuesfromcurrentline[columncounter]; + } else if ( linecounter > 0 && isNaN (valuesfromcurrentline[columncounter] )) { + schema.rows[linecounter-1].values[columncounter] = 0; + } + else { + schema.rows[linecounter-1].values[columncounter] = valuesfromcurrentline[columncounter]; + } + } + } + else { + console.log('zeroaxis'); + for ( columncounter = 0 ; columncounter < valuesfromcurrentline.length ; columncounter ++ ) { + schema.rows[linecounter].name = 'row ' + (linecounter + 1 ); + if ( isNaN( valuesfromcurrentline[columncounter])) + { + schema.rows[linecounter].values[columncounter] = 0; + } else { + schema.rows[linecounter].values[columncounter] = valuesfromcurrentline[columncounter]; + } + } + } + } + catch(err) { + try { + document.getElementById("errormessage").innerHTML = document.getElementById("errormessage").innerHTML + 'Error readning line: ' + err.message; //err.message; + } + catch(err) { + console.log ( 'consider adding div id=demo to see error messages'); + } + throw new Error ('Something unexpected happened. Check datafile' + err.message); + } + +} // end for loop + + this.schema = schema || 0; + this.dataValues = []; + var j_or_j_inversed = 0; + for ( var i=0; i= 0; i--) { + exCanEl[i].parentNode.removeChild(exCanEl[i]); + } + + + // Getting the projector for picking objects + this.projector = new THREE.Projector(); + + // Creating new scene + this.scene = new THREE.Scene(); + + // Setting the camera + this.camera = new THREE.PerspectiveCamera( 60, + window.innerWidth/window.innerHeight, + 1, + 5000 ); + this.camera.position.x = this.camPos.x; + this.camera.position.y = this.camPos.y; + this.camera.position.z = this.camPos.z; + + }, + + initWebGLScene: function() { // Initiates a WEBGL Scene + + // Setting the renderer (with shadows) + if ( !this.canvas ) { + this.renderer = new THREE.WebGLRenderer( { antialias: true } ); + }else{ + this.renderer = new THREE.WebGLRenderer( { antialias: true, + canvas: this.canvas } ); + } + this.renderer.setSize( window.innerWidth, window.innerHeight ); + + // Switch off the shadows for safari due to the three.js bug with it + if ( navigator.userAgent.indexOf('Safari') == -1 ) { + this.renderer.shadowMapEnabled = true; + this.renderer.shadowMapSoft = true; + } + + if ( !this.domContainer ) { + this.domContainer = document.createElement( 'div' ); + document.body.appendChild( this.domContainer ); + } else { + this.domContainer = document.getElementById ( this.domContainer ); + } + + this.domContainer.appendChild( this.renderer.domElement ); + + //*** Adding the grounds + // material for the grounds + var gridTex = THREE.ImageUtils.loadTexture( + THREEGRAPHS.Settings.staticUrl+"/grid_pattern1.jpg"); + gridTex.wrapS = gridTex.wrapT = THREE.RepeatWrapping; + gridTex.repeat.set( 5, 5 ); + + var gridTex2 = THREE.ImageUtils.loadTexture( + THREEGRAPHS.Settings.staticUrl+"/grid_pattern2.jpg"); + gridTex2.wrapS = gridTex2.wrapT = THREE.RepeatWrapping; + gridTex2.repeat.set( this.schema.rows.length, this.schema.cols.length ); + + var materialX = new THREE.MeshPhongMaterial({ + ambient : 0x444444, + color : 0x777777, + shininess : 70, + specular : 0x888888, + shading : THREE.SmoothShading, + side: THREE.DoubleSide, + map:gridTex2 + }); + + var materialYZ = new THREE.MeshPhongMaterial({ + ambient : 0x444444, + color : 0x999999, + shininess : 70, + specular : 0x888888, + shading : THREE.SmoothShading, + side: THREE.DoubleSide, + map:gridTex + }); + + var sqStep = THREEGRAPHS.Settings.squareStep; + var valH = THREEGRAPHS.Settings.valHeight + + // Creating the ground-x + var geometry = new THREE.PlaneGeometry( sqStep*this.schema.rows.length, + sqStep*this.schema.cols.length ); + + var groundX = new THREE.Mesh( geometry, materialX ); + groundX.rotation.x -= Math.PI/2; + groundX.castShadow = false; + groundX.receiveShadow = true; + groundX.position.y = THREEGRAPHS.Settings.yDeviation; + this.scene.add( groundX ); + + // Creating the ground-y + var geometry = new THREE.PlaneGeometry( + sqStep*this.schema.rows.length, + valH); + + var groundY = new THREE.Mesh( geometry, materialYZ ); + groundY.castShadow = false; + groundY.receiveShadow = true; + groundY.position.z = THREEGRAPHS.Settings.zDeviation; + this.scene.add( groundY ); + + // craating the groynd-z + var geometry = new THREE.PlaneGeometry( + sqStep*this.schema.cols.length, + valH ); + + var groundZ = new THREE.Mesh( geometry, materialYZ ); + groundZ.rotation.y -= Math.PI/2; + groundZ.castShadow = false; + groundZ.receiveShadow = true; + groundZ.position.x = THREEGRAPHS.Settings.xDeviation; + this.scene.add( groundZ ); + ////////////////// + + //*** Adding texts for the scales + for( var i=0; i