KOMPOOS.NL

grafiek - javascript

home » javascripts » grafiek.html

lijn-grafiek-php html | lijn-grafiek-svg html | lijn-grafiek-javascript html

voorbeeld standaard grafiek - basis

uitleg html grafiek

Deze basis grafiek zet je met onderstaande html "op het scherm". Het werkt eenvoudig. De vier parameters van grafiek.drawLine() geven de:

horizontale start-positie (in pixels)
verticale start-positie (in pixels)
horizontale eind-positie (in pixels)
verticale eind-positie (in pixels)

aan, van een grafiek-element. Gebruik deze html als opzetje om jouw eigen grafiek te maken. In de stylesheet (lager op de pagina), kan je de afmetingen, kleur etc. van de grafiek-body bepalen, alsmede de kleur, en dikte, van de grafiek-lijn. De stylesheet moet in de head-sectie van de pagina geplaatst worden. Wat óók in de head-sectie moet komen (ónder de styleheet) is het javascript(je) wat helemaal onderop deze pagina te vinden is.

html van de grafiek


<script>
        var grafiek;
        grafiek = new Maak_grafiek(401, 121); 
        grafiek.drawLine(  0, 90,  20, 80); 
        grafiek.drawLine( 20, 80,  40, 90); 
        grafiek.drawLine( 40, 90,  60, 70);
        grafiek.drawLine( 60, 70,  80, 90);
        grafiek.drawLine( 80, 90, 100, 60);
        grafiek.drawLine(100, 60, 120, 70);
        grafiek.drawLine(120, 70, 140, 60);
</script>

stylesheet van de grafiek procedure


<style type="text/css">
        .grafiek_body{
                height:120px;   
                width:400px;
                color:inherit;
                background:#ffefef;             
                display:block;
                border:solid #808080 1px;
                position:relative;
                margin:20px}
        .grafiek_lijn_verticaal,.grafiek_lijn_horizontaal,.q{
                background:#a00;
                color:inherit;
                position:absolute;
                overflow:hidden;
                height:3px;
                width:3px}
</style>

javascript grafiek voorbeeld


<script>
/*global document: false */
/*global Maak_grafiek: true */
var schuin_invert;
Maak_grafiek = function (width, height) {
    'use strict';
    var deze_grafiek = this, y, x, temp, line,
        grafiek_element = document.createElement("b");
    document.body.appendChild(grafiek_element);
    grafiek_element.className = "grafiek_body";
    grafiek_element.style.width = width;
    grafiek_element.style.height = height;
    this.teken_punt_grafiek = function (x, y) {
        var q = document.createElement("b");
        q.className = "q";
        q.style.left = x + "px";
        q.style.top = y + "px";
        grafiek_element.appendChild(q);
    };
    this.drawLine = function (x1, y1, x2, y2) {
        if (x1 === x2 && y1 === y2) {
            deze_grafiek.teken_punt_grafiek(x1, y1);
            return;
        }
        if (x1 > x2) {
            temp = x1;
            x1 = x2;
            x2 = temp;
            temp = y1;
            y1 = y2;
            y2 = temp;
        }
        if (x1 === x2) {
            if (y1 > y2) {
                temp = y1;
                y1 = y2;
                y2 = temp;
            }
            line = document.createElement("b");
            line.className = "grafiek_lijn_verticaal";
            line.style.top = y1 + "px";
            line.style.left = x1 + "px";
            line.style.height = (y2 - y1 + 1) + "px";
            grafiek_element.appendChild(line);
        } else if (y1 === y2) {
            line = document.createElement("b");
            line.className = "grafiek_lijn_horizontaal";
            line.style.top = y1 + "px";
            line.style.left = x1 + "px";
            line.style.width = (x2 - x1 + 1) + "px";
            grafiek_element.appendChild(line);
        } else {
            var schuin = (y1 - y2) / (x1 - x2);
            if (Math.abs(schuin) <= 1) {
                for (x = x1; x <= x2; x = x + 1) {deze_grafiek.teken_punt_grafiek(x, y1 + ((x - x1) * schuin)); }
            } else {
                if (y1 > y2) {
                    temp = x1;
                    x1 = x2;
                    x2 = temp;
                    temp = y1;
                    y1 = y2;
                    y2 = temp;
                }
                schuin_invert = (x1 - x2) / (y1 - y2);
                for (y = y1; y <= y2; y = y + 1) {deze_grafiek.teken_punt_grafiek(x1 + ((y - y1) * schuin_invert), y); }
            }
        }
    };
};
</script>