Java Script Archieven - Pagina 2 van 2 - DomoticX Knowledge Center

Highcharts gegevens uit PHP bestand laden

Door Sebastiaan Geplaatst op 2015-02-06 Geplaatst in Grafieken, Java Script Getagd met bestanden uitlezen, Highcharts, Javascript, PHP

Ik maak gebruik van deze handleiding om gegevens vanuit een PHP bestand te laden in een Javascript die een PIE weergeeft. Wat heb je nodig?: 1) Highcharts 4.x Ik heb het bestand “examples/pie-basic/index.html” uit de bibliotheek genomen als voorbeeld voor het uitlezen …

Highcharts gegevens uit PHP bestand laden Lees meer »

Javascript – h5chart voorbeelden van grafieken

Door Sebastiaan Geplaatst op 2015-01-11 Geplaatst in Grafieken, Java Script Getagd met Grafieken, h5chart, Javascript, voorbeeld

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>

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

Door Sebastiaan Geplaatst op 2015-01-08 Geplaatst in Java Script, Klik Aan Klik Uit Getagd met Internet, Javascript, KAKU, KlikAanKlikUit, Online, Schakelen

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 …

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

Javascript – voorloopnullen toevoegen aan een getal

Door Sebastiaan Geplaatst op 2014-12-29 Geplaatst in Java Script Getagd met Javascript, voorloopnullen

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 …

Javascript – voorloopnullen toevoegen aan een getal Lees meer »

amCharts gegevens uit PHP bestand laden

Door Sebastiaan Geplaatst op 2014-12-24 Geplaatst in Grafieken, Java Script Getagd met amcharts, bestanden uitlezen, Javascript, PHP

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 …

amCharts gegevens uit PHP bestand laden Lees meer »

Javascript variabelen gebruiken uit een PHP script

Door Sebastiaan Geplaatst op 2014-12-22 Geplaatst in Java Script Getagd met Javascript, PHP, Uitlezen, variabelen

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 …

Javascript variabelen gebruiken uit een PHP script Lees meer »

Javascript – CSV bestanden uitlezen

Door Sebastiaan Geplaatst op 2014-12-21 Geplaatst in Java Script Getagd met CSV, Javascript, 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>

amCharts gegevens uit CSV bestand laden

Door Sebastiaan Geplaatst op 2014-12-19 Geplaatst in Grafieken, Java Script Getagd met amcharts, bestanden uitlezen, CSV, Javascript

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 …

amCharts gegevens uit CSV bestand laden Lees meer »

Bestanden downloaden met Javascript via PHP

Door Sebastiaan Geplaatst op 2014-12-07 Geplaatst in Java Script Getagd met Downloaden, Java, Javascript, 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

Plugwise Smile P1 – Data uitlezen met scripts

Door Sebastiaan Geplaatst op 2014-12-07 Geplaatst in Java Script, PHP Script, Plugwise - Smile P1 Getagd met Data, Plugwise, Smile P1, Uitlezen

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 …

Plugwise Smile P1 – Data uitlezen met scripts Lees meer »

Zoeken

Categorie: Java Script

Highcharts gegevens uit PHP bestand laden

Javascript – h5chart voorbeelden van grafieken

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

Javascript – voorloopnullen toevoegen aan een getal

amCharts gegevens uit PHP bestand laden

Javascript variabelen gebruiken uit een PHP script

Javascript – CSV bestanden uitlezen

amCharts gegevens uit CSV bestand laden

Bestanden downloaden met Javascript via PHP

Plugwise Smile P1 – Data uitlezen met scripts