'); // Close document. wd.document.writeln(''); wd.document.close(); } function onClickClearDataPoints() { window.document.input.data.value = ''; } function getTitle() { title = window.document.input.title.value; } function getLegends() { independentName = window.document.input.independentName.value; independentUnit = window.document.input.independentUnit.value; dependentName = window.document.input.dependentName.value; dependentUnit = window.document.input.dependentUnit.value; } function getFontSize() { fontSize = 3; if(window.document.input.fontSizeGroup[0].checked) fontSize = 1; else if(window.document.input.fontSizeGroup[1].checked) fontSize = 2; else if(window.document.input.fontSizeGroup[2].checked) fontSize = 3; else if(window.document.input.fontSizeGroup[3].checked) fontSize = 4; else if(window.document.input.fontSizeGroup[4].checked) fontSize = 5; else if(window.document.input.fontSizeGroup[5].checked) fontSize = 6; else if(window.document.input.fontSizeGroup[6].checked) fontSize = 7; } function getWorldExtents() { worldXMin = parseFloat(window.document.input.independentMin.value); worldXMax = parseFloat(window.document.input.independentMax.value); worldYMin = parseFloat(window.document.input.dependentMin.value); worldYMax = parseFloat(window.document.input.dependentMax.value); } function setWorldAndDeviceRatios() { devicePerWorldX = (deviceXMax - deviceXMin) / (worldXMax - worldXMin); devicePerWorldY = (deviceYMax - deviceYMin) / (worldYMax - worldYMin); } function worldToDeviceX(x) { return Math.floor(deviceXMin + devicePerWorldX * (x - worldXMin) + 0.5); } function worldToDeviceY(y) { return Math.floor(deviceYMax - devicePerWorldY * (y - worldYMin) + 0.5); } function worldPlot(x, y, character) { var deviceX = worldToDeviceX(x); var deviceY = worldToDeviceY(y); devicePlot(deviceX, deviceY, character); } function devicePlot(x, y, character) { rowString[y] = replaceCharacter(rowString[y], character, x); } function deviceDrawHorizontalLine(x1, x2, y, character) { var x = 0; for(x = x1; x <= x2; x++) devicePlot(x, y, character); } function deviceDrawVerticalLine(x, y1, y2, character) { var y = 0; for(y = y1; y <= y2; y++) devicePlot(x, y, character); } function initialize() { // Set up width of graph. if(window.document.input.widthGroup[0].checked) { numColumns = 60; } else { numColumns = 110; } deviceXMin = leftMargin; deviceXMax = numColumns; deviceYMin = 0; deviceYMax = numRows - bottomMargin; // Create text strings for graph. var r = 0; var c = 0; var blankRowString = ''; for(c = 0; c < numColumns; c++) { blankRowString += ' '; } for(r = 0; r < numRows; r++) { rowString[r] = blankRowString; } // Set tic positions. deltaDeviceIndependentTicX = Math.floor((numColumns - leftMargin) / numIndependentDivisions); deviceIndependentTic1X = leftMargin + 0 * deltaDeviceIndependentTicX; deviceIndependentTic2X = leftMargin + 1 * deltaDeviceIndependentTicX; deviceIndependentTic3X = leftMargin + 2 * deltaDeviceIndependentTicX; deviceIndependentTic4X = leftMargin + 3 * deltaDeviceIndependentTicX; deviceIndependentTic5X = leftMargin + 4 * deltaDeviceIndependentTicX; deviceIndependentTic6X = leftMargin + 5 * deltaDeviceIndependentTicX; deviceIndependentTicY = deviceYMax + 1; deltaDeviceDependentTicY = Math.floor((numRows - bottomMargin) / numDependentDivisions); deviceDependentTicX = 2; deviceDependentTic1Y = deviceYMax - (0 * deltaDeviceDependentTicY); deviceDependentTic2Y = deviceYMax - (1 * deltaDeviceDependentTicY); deviceDependentTic3Y = deviceYMax - (2 * deltaDeviceDependentTicY); deviceDependentTic4Y = deviceYMax - (3 * deltaDeviceDependentTicY); deviceDependentTic5Y = deviceYMax - (4 * deltaDeviceDependentTicY); deviceDependentTic6Y = deviceYMax - (5 * deltaDeviceDependentTicY); } function drawAxes() { var x1 = worldToDeviceX(worldXMin); var x2 = worldToDeviceX(worldXMax); var y = worldToDeviceY(0.0); deviceDrawHorizontalLine(x1, x2, y, '-'); var x = worldToDeviceX(0.0); var y1 = worldToDeviceY(worldYMin); var y2 = worldToDeviceY(worldYMax); deviceDrawVerticalLine(x, y2, y1, '|'); devicePlot(x, y, '+'); } function drawGrid() { // Draw horizontal lines. deviceDrawHorizontalLine(deviceXMin, deviceXMax, deviceDependentTic1Y, '-'); deviceDrawHorizontalLine(deviceXMin, deviceXMax, deviceDependentTic2Y, '-'); deviceDrawHorizontalLine(deviceXMin, deviceXMax, deviceDependentTic3Y, '-'); deviceDrawHorizontalLine(deviceXMin, deviceXMax, deviceDependentTic4Y, '-'); deviceDrawHorizontalLine(deviceXMin, deviceXMax, deviceDependentTic5Y, '-'); deviceDrawHorizontalLine(deviceXMin, deviceXMax, deviceDependentTic6Y, '-'); // Draw vertical lines. deviceDrawVerticalLine(deviceIndependentTic1X, deviceYMin, deviceYMax, '|'); deviceDrawVerticalLine(deviceIndependentTic2X, deviceYMin, deviceYMax, '|'); deviceDrawVerticalLine(deviceIndependentTic3X, deviceYMin, deviceYMax, '|'); deviceDrawVerticalLine(deviceIndependentTic4X, deviceYMin, deviceYMax, '|'); deviceDrawVerticalLine(deviceIndependentTic5X, deviceYMin, deviceYMax, '|'); deviceDrawVerticalLine(deviceIndependentTic6X, deviceYMin, deviceYMax, '|'); } function drawTics() { var x = 0; var y = 0; for(y = deviceYMax; y >= deviceYMin; y -= deltaDeviceDependentTicY) { for(x = deviceXMin; x <= deviceXMax; x += deltaDeviceIndependentTicX) { devicePlot(x, y, '+'); } } } function drawTicValues() { var deltaIndependentTic = (worldXMax - worldXMin) / 5.0; var deltaDependentTic = (worldYMax - worldYMin) / 5.0; independentTic1String = formatDecimalPlaces(worldXMin); independentTic2String = formatDecimalPlaces(worldXMin + deltaIndependentTic); independentTic3String = formatDecimalPlaces(worldXMin + 2 * deltaIndependentTic); independentTic4String = formatDecimalPlaces(worldXMin + 3 * deltaIndependentTic); independentTic5String = formatDecimalPlaces(worldXMin + 4 * deltaIndependentTic); dependentTic1String = formatDecimalPlaces(worldYMin); dependentTic2String = formatDecimalPlaces(worldYMin + deltaDependentTic); dependentTic3String = formatDecimalPlaces(worldYMin + 2 * deltaDependentTic); dependentTic4String = formatDecimalPlaces(worldYMin + 3 * deltaDependentTic); dependentTic5String = formatDecimalPlaces(worldYMin + 4 * deltaDependentTic); rowString[deviceIndependentTicY] = replaceString(rowString[deviceIndependentTicY], independentTic1String, deviceIndependentTic1X); rowString[deviceIndependentTicY] = replaceString(rowString[deviceIndependentTicY], independentTic2String, deviceIndependentTic2X); rowString[deviceIndependentTicY] = replaceString(rowString[deviceIndependentTicY], independentTic3String, deviceIndependentTic3X); rowString[deviceIndependentTicY] = replaceString(rowString[deviceIndependentTicY], independentTic4String, deviceIndependentTic4X); rowString[deviceIndependentTicY] = replaceString(rowString[deviceIndependentTicY], independentTic5String, deviceIndependentTic5X); rowString[deviceDependentTic1Y] = replaceString(rowString[deviceDependentTic1Y], dependentTic1String, deviceDependentTicX); rowString[deviceDependentTic2Y] = replaceString(rowString[deviceDependentTic2Y], dependentTic2String, deviceDependentTicX); rowString[deviceDependentTic3Y] = replaceString(rowString[deviceDependentTic3Y], dependentTic3String, deviceDependentTicX); rowString[deviceDependentTic4Y] = replaceString(rowString[deviceDependentTic4Y], dependentTic4String, deviceDependentTicX); rowString[deviceDependentTic5Y] = replaceString(rowString[deviceDependentTic5Y], dependentTic5String, deviceDependentTicX); } function drawTitle() { var titleWithSpaces = ' ' + title + ' '; var position = Math.floor((numColumns - titleWithSpaces.length) / 2); rowString[0] = replaceString(rowString[0], titleWithSpaces, position); } function drawLegends() { var legend = ''; var position = 0; // Calculate independent legend parameters. legend = independentName + ' (' + independentUnit + ')'; position = Math.floor((numColumns - legend.length) / 2); // Draw independent legend. rowString[deviceYMax + 3] = replaceString(rowString[deviceYMax + 3], legend, position); // Calculate dependent legend parameters. legend = dependentName + ' (' + dependentUnit + ')'; position = Math.floor((numRows - legend.length) / 2); // Draw dependent legend. var i = 0; for(i = 0; i < legend.length; i++) { rowString[position] = replaceCharacter(rowString[position], legend.charAt(i), 0); position++; } } function getData() { var data = ''; var p1 = 0; var p2 = 0; var i = 0; var done = false; data = window.document.input.data.value; numDataPoints = 0; i = 0; p1 = 0; p2 = data.indexOf(',', p1); done = false; do { if(p2 != -1) { dataX[i] = parseFloat(data.substring(p1, p2)); p1 = p2 + 1; p2 = data.indexOf(';', p1); if(p2 != -1) { dataY[i] = parseFloat(data.substring(p1, p2)); numDataPoints++; i++; p1 = p2 + 1; p2 = data.indexOf(',', p1); } else { done = true; } } else { done = true; } } while(!done && i < numPointsMax); } function plotData() { var i = 0; for(i = 0; i < numDataPoints; i++) { worldPlot(dataX[i], dataY[i], '*'); } } function replaceCharacter(originalString, character, position) { var newStringFront = ''; var newStringBack = ''; newStringFront = originalString.substring(0, position); newStringBack = originalString.substring(position + 1, originalString.length); return newStringFront + character + newStringBack; } function replaceString(originalString, replacementString, position) { var stringLength = 0; var newStringFront = ''; var newStringBack = ''; newStringFront = originalString.substring(0, position); newStringBack = originalString.substring(position + replacementString.length, originalString.length); return newStringFront + replacementString + newStringBack; } function formatDecimalPlaces(number) { var numberString = ''; var tempNumberString = ''; var lengthOfNumberString = 0; var decimalPointIndex = 0; var i = 0;; numberString = "" + number; lengthOfNumberString = numberString.length; decimalPointIndex = numberString.indexOf('.'); if(decimalPointIndex == -1) { numberString = numberString + ".00"; } else if((lengthOfNumberString - decimalPointIndex) == 1) { numberString = numberString + "00"; } else if((lengthOfNumberString - decimalPointIndex) == 2) { numberString = numberString + "0"; } else if ((lengthOfNumberString - decimalPointIndex) == 3) { // do nothing, formatted ok } else { tempNumberString = ""; for(i = 0; i <= decimalPointIndex + 2; i++) tempNumberString = tempNumberString + numberString.substring(i, i + 1); numberString = tempNumberString; } return numberString; } Simple Data Grapher | Zona Land Education

Simple Data Graph Maker


Here is a very simple data graph maker. Basically, you enter your legends, maximums, minimums, and data, and then you press the 'Make graph' button. A new browser window will open up with your graph displayed in it. Simply print the page using the services of the new browser window, and you will have a hard copy of your graph.

Close the new browser window when you are done. This page remains displayed in this original browser window.

 

Suggestions and help:

  • Data points are plotted with this character: '*'.
  • Use font size 1. Graphs made with this small font seem to print best on most equipment.
  • The independent axis is the horizontal axis, usually called the x-axis in algebra. (Beware: In physics x usually means position and is often graphed vertically.). The dependent axis is the vertical axis, usually called the y-axis in algebra.
  • The independent axis, like x
  • The dependent axis, like y
  • The syntax for entering data points works like this: If you want to enter point (4.2, 8.5), then on one line in the text box used for data entry write '4.2, 8.5;' without the quotes. That is, type in four point two comma eight point five semicolon. The comma between coordinates and the semicolon at the end are important. Put one data point on one line in the text box.
  • You can graph up to 100 points.
  • Round your minimums and maximums so they easily extend over the range of your data. The difference between each minimum and its corresponding maximum should be evenly divisible by 5 for the graph tic mark values on the axes to look good.
  • This graph maker works with a fixed width text font, and therefore the placement of the points is not perfect; it is rounded to the nearest text row and column. The graphs are hardly useless, however. You will get a good idea of how your data looks, and the graphs are meant to be easy to print on almost all equipment.
  • If you want to see how the whole thing works, just click the 'Make graph' button. The graph maker defaults to a simple position vs. time, or x vs. t, graph.


Font Size
1 2 3 4 5 6 7


Width
Normal Wide


Title


Independent Quantity
Name:
Units:
Minimum:
Maximum:


Dependent Quantity
Name:
Units:
Minimum:
Maximum:


Data points (syntax: independent, dependent;)


Graph will appear in new tab or window. Use your browser's print commands to print the graph.