Categorie: Java Script

Java Script

Javascript – h5chart voorbeelden van grafieken

In deze handleiding staan een aantal voorbeelden van grafieken met gebruik van de h5chart bibliotheek. Wat heb je nodig? 1) h5chart Thermometer

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Thermometer voorbeeld</title>
<head>
<!-- Inladen van 'Core' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-graph.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-object.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-core.js"></SCRIPT>
<!-- Inladen van 'Chart' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-thermometer.js"></SCRIPT>
</head>

<canvas id="c" width="100px" height="160px" style="border: 1 px solid blue;"></canvas>

<script>
var canvas = document.getElementById("c");
canvas.initRegionManager();
var l = new Thermometer();
    
l.set( {
    left :          5,
    top  :          5,
    width:          90,
    height:         150,
    min  :          10,
    max  :          25,
    intervals:      10,
    current:        19,
    uid:            getCanvasObjectUid("c"),
    animate:        true
    });
    
l.setLabelStyle({
    mask :          function (val){ return val;} ,
    font :          '11px Arial',
    color:          'grey'
});
    
l.setCurrentStyle({
    mask :          function (val){ return val + " C";} ,
    font :          'bold 14px Arial',
    color:          'grey'
});
    
l.draw("c");
</script>
</html>

<html>

<title>Thermometer voorbeeld</title>

<head>

</head>

var canvas = document.getElementById("c");

canvas.initRegionManager();

var l = new Thermometer();

l.set( {

left : 5,

top : 5,

width: 90,

height: 150,

min : 10,

max : 25,

intervals: 10,

current: 19,

uid: getCanvasObjectUid("c"),

animate: true

});

l.setLabelStyle({

mask : function (val){ return val;} ,

font : '11px Arial',

color: 'grey'

});

l.setCurrentStyle({

mask : function (val){ return val + " C";} ,

font : 'bold 14px Arial',

color: 'grey'

});

l.draw("c");

</script>

</html>

Digitale meter

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Digitale meter voorbeeld</title>
<head>
<!-- Inladen van 'Core' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-graph.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-object.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-core.js"></SCRIPT>
<!-- Inladen van 'Chart' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-digital.js"></SCRIPT>
</head>

<canvas id="c" width="150px" height="50px" style="border: 1 px solid blue;" ></canvas>

<script>
var canvas = document.getElementById("c");
canvas.initRegionManager();

var l=new DigitalMeter();
    
    l.set( {
    left :          0,
    top  :          0,
    width:          150,
    height:         50,
    digits:         4,
    decimals:       1,
    current:        25.3,
    signed:         true,
    background:     true,
    animate:        true,
    uid:            getCanvasObjectUid("c"),
    animateCounter: 20  
});

// Getallen tot 10 weergeven als ROOD = #FA0000
// Knipperen (paar keer) = 'blink : true'
l.serie.add({value:10,color:"#FA0000",blink : true});
// Getallen tot 20 weergeven als GEEL = #F0F000
l.serie.add({value:20,color:"#F0F000"});
// Getallen tot 20 weergeven als GROEN = #00FA00
l.serie.add({value:30,color:"#00FA00"});
    
l.draw("c");
</script>
</html>

<html>

<title>Digitale meter voorbeeld</title>

<head>

</head>

var canvas = document.getElementById("c");

canvas.initRegionManager();

var l=new DigitalMeter();

l.set( {

left : 0,

top : 0,

width: 150,

height: 50,

digits: 4,

decimals: 1,

current: 25.3,

signed: true,

background: true,

animate: true,

uid: getCanvasObjectUid("c"),

animateCounter: 20

});

// Getallen tot 10 weergeven als ROOD = #FA0000

// Knipperen (paar keer) = 'blink : true'

l.serie.add({value:10,color:"#FA0000",blink : true});

// Getallen tot 20 weergeven als GEEL = #F0F000

l.serie.add({value:20,color:"#F0F000"});

// Getallen tot 20 weergeven als GROEN = #00FA00

l.serie.add({value:30,color:"#00FA00"});

l.draw("c");

</script>

</html>

LED

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LED voorbeeld</title>
<head>
<!-- Inladen van 'Core' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-graph.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-object.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-core.js"></SCRIPT>
<!-- Inladen van 'Chart' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-signal.js"></SCRIPT>
</head>

<canvas id="c" width="40px" height="40px" style="border: 1 px solid blue;" ></canvas>

<script>
var canvas = document.getElementById("c");
canvas.initRegionManager();

var l=new Signal();
    
l.set( {
    left :          5,
    top  :          5,
    width:          30,
    height:         30,
    orientation:    'horizontal',
    single:         false,
    current:        20,
    style:          '3D',
    animate:        true,
    uid:            getCanvasObjectUid("c"),
    animateCounter: 5});
    
l.serie.add({value:100,color:"#800000"});
//l.serie.add({value:20,color:"#808000",blink : true});
//l.serie.add({value:30,color:"#008000"});
//l.serie.add({value:40,color:"#008080"});

l.setTooltipStyle({
    mask :          function (val){ return "Current value: " + val;} ,
    font :          '14px Arial',
    color:          'grey'
});
    
l.draw("c");
</script>
</html>

<html>

<title>LED voorbeeld</title>

<head>

</head>

var canvas = document.getElementById("c");

canvas.initRegionManager();

var l=new Signal();

l.set( {

left : 5,

top : 5,

width: 30,

height: 30,

orientation: 'horizontal',

single: false,

current: 20,

style: '3D',

animate: true,

uid: getCanvasObjectUid("c"),

animateCounter: 5});

l.serie.add({value:100,color:"#800000"});

//l.serie.add({value:20,color:"#808000",blink : true});

//l.serie.add({value:30,color:"#008000"});

//l.serie.add({value:40,color:"#008080"});

l.setTooltipStyle({

mask : function (val){ return "Current value: " + val;} ,

font : '14px Arial',

color: 'grey'

});

l.draw("c");

</script>

</html>

Getagd met Grafieken, h5chart, Javascript, voorbeeld

KAKU – Schakelen via internet met menu (PHP en Javascript)

Ik heb hier een PHP script inelkaar gezet voor op je webserver, zodat je kan KAKU kan schakelen waar ook ter wereld via een PHP script. Het script is niets meer of minder dan een parameter doorgeefluik naar KAKUcli, alleen…

Lees meer ›

Getagd met Internet, Javascript, KAKU, KlikAanKlikUit, Online, Schakelen

Javascript – voorloopnullen toevoegen aan een getal

Hieronder staat een stukje javascript om voorloopnullen voor een getal te plaatsen, zo kan een datum ‘2014-6-8’ eruit zien als ‘2014-06-08’ en een tijd ‘0:5:20′ als ’00:05:20′. Er is standaard geen functie in javascript om dit te doen, er zijn…

Lees meer ›

Getagd met Javascript, voorloopnullen

amCharts gegevens uit PHP bestand laden

Ik maak gebruik van deze handleiding om gegevens vanuit een PHP bestand te laden in een Javascript die een GAUGE weergeeft. Wat heb je nodig?: 1) amCharts Ik heb het bestand “samples/angularGauge.html” uit de bibliotheek genomen als voorbeeld voor het…

Lees meer ›

Getagd met amcharts, bestanden uitlezen, Javascript, PHP

Javascript variabelen gebruiken uit een PHP script

In dit voorbeeld laat ik zien hoe je met een Javascript variabelen uit een ander PHP script kan halen: Als voorbeeld nemen we dit PHP script ‘script.php’ met daarin 2 variabelen:

<?php
$tekst = "Hallo Wereld!";
$getal = 100;
?>

<?php

$tekst = "Hallo Wereld!";

$getal = 100;

Nu volgt het javascript dat de 2…

Lees meer ›

Getagd met Javascript, PHP, Uitlezen, variabelen

Javascript – CSV bestanden uitlezen

In dit voorbeeld laat ik zien hoe je een CSV bestand in variabelen kan omzetten met Javascript, de commentaarregels staan tussen het script:

<script type="text/javascript">

document.write('Kolom 1 / Kolom 2<br>');
loadCSV("data.csv");

function loadCSV(file) {
    var request;
    if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari
        request = new XMLHttpRequest();
    } else {
        // Code voor IE6, IE5
        request = new ActiveXObject('Microsoft.XMLHTTP');
    }
    request.open('GET', file, false);
    request.send();
    parseCSV(request.responseText);
}

function parseCSV(data){
    // Vervang UNIX nieuwe lijn karakters.
    data = data.replace (/\r\n/g, "\n");
    // Vervang MAC nieuwe lijn karakters.
    data = data.replace (/\r/g, "\n");
    // Splijt data in rijen.
    var rows = data.split("\n");

    // Loop door alle rijen heen.
    for (var i = 0; i < rows.length; i++) {
        // Sla lege regels over.
        if (rows[i]) {
            // Splijt rij naar kolommen doormiddel van de onderbrekings karakter.
            var column = rows[i].split(";");

            // De kolom is nu een array.
            // Het 1e deel is de Datum.
            var datum = column[0];
            // Het 2e deel is een variabele (getal).
            var waarde = column[1];

            // Voeg het object toe aan de chartData array
            document.write(datum + ' / ' + waarde + '<br>');
        }
    }
}

</script>

document.write('Kolom 1 / Kolom 2<br>');

loadCSV("data.csv");

function loadCSV(file) {

var request;

if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari

request = new XMLHttpRequest();

} else {

// Code voor IE6, IE5

request = new ActiveXObject('Microsoft.XMLHTTP');

}

request.open('GET', file, false);

request.send();

parseCSV(request.responseText);

}

function parseCSV(data){

// Vervang UNIX nieuwe lijn karakters.

data = data.replace (/\r\n/g, "\n");

// Vervang MAC nieuwe lijn karakters.

data = data.replace (/\r/g, "\n");

// Splijt data in rijen.

var rows = data.split("\n");

// Loop door alle rijen heen.

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

// Sla lege regels over.

if (rows[i]) {

// Splijt rij naar kolommen doormiddel van de onderbrekings karakter.

var column = rows[i].split(";");

// De kolom is nu een array.

// Het 1e deel is de Datum.

var datum = column[0];

// Het 2e deel is een variabele (getal).

var waarde = column[1];

// Voeg het object toe aan de chartData array

document.write(datum + ' / ' + waarde + '<br>');

}

</script>

Getagd met CSV, Javascript, Uitlezen

amCharts gegevens uit CSV bestand laden

Er staat een mooie handleiding bij amcharts op de website voor het uitlezen van de gefiekgegevens uit een CSV bestand, hier is mijn versie en ervaring: Wat heb je nodig?: 1) amCharts Ik heb het bestand “samples\_JSON_lineWithScrollAndZoom.html” uit de bibliotheek…

Lees meer ›

Getagd met amcharts, bestanden uitlezen, CSV, Javascript

Bestanden downloaden met Javascript via PHP

Dit is een truucje om via een Javascript met het aanroepen van een PHP script toch bestanden te downloaden van externe bronnen!, daarom is dit script ook bedoelt om op/via een webserver te draaien.

<html>

<head>
<script src="jquery.js"></script>
<title>Java CORS voorbeeld</title>
</head>

<body>
 
<script>
$(document).ready(function(){
    var fileurl = 'http://www.website.nl';
    var filename = 'bestand.ext';
 
    //Voer het bestand 'download.php' uit en wacht totdat het klaar is met downloaden (jQuery/Ajax).
    $.ajax({
        async: false,
        type: 'GET',
        url: 'download.php?url=' + fileurl + '&filename='+ filename,
        success: function(data) {}
    });
});
</script>
 
</body>
</html>

<html>

<head>

<title>Java CORS voorbeeld</title>

</head>

<body>

$(document).ready(function(){

var fileurl = 'http://www.website.nl';

var filename = 'bestand.ext';

//Voer het bestand 'download.php' uit en wacht totdat het klaar is met downloaden (jQuery/Ajax).

$.ajax({

async: false,

type: 'GET',

url: 'download.php?url=' + fileurl + '&filename='+ filename,

success: function(data) {}

});

</script>

</body>

</html>

<?php
file_put_contents($_GET['filename'], file_get_contents($_GET['url']));
?>

<?php

file_put_contents($_GET['filename'], file_get_contents($_GET['url']));

Voorbeeld gebruik: http://mijnwebsite.nl/download.php?url=http://website.nl/bestand.xml&filename=bestand.xml

Getagd met Downloaden, Java, Javascript, PHP

Plugwise Smile P1 – Data uitlezen met scripts

Hieronder vind je een aantal scripts om de data uit de PlugWise Smile te halen, dit is een XML dump welke je kan uitlezen en de waarden in een variabele te stoppen. Info: Plugwise Smile P1 locatie data gegevens. Firmware…

Lees meer ›

Getagd met Data, Plugwise, Smile P1, Uitlezen