Grafieken Archieven - DomoticX Knowledge Center

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>

Zoeken

Categorie: Grafieken

CSS – Bar grafiek

Highcharts gegevens uit MySQL database halen (PHP script)

Highcharts gegevens uit PHP bestand laden

Javascript – h5chart voorbeelden van grafieken

amCharts gegevens uit PHP bestand laden

amCharts gegevens uit CSV bestand laden