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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<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> |
Digitale meter
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<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> |
LED
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<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> |