Graag een momentje geduld,
Verwerken van Uw verzoek...

    0%
  Business logo VanSoest.it
  ... | Switch language to English | Deze webpagina afdrukken. | Nederlandstalige Linkedin pagina van Johan van Soest | User: Gast | Login

Briefkaart afbeelding. Klik hier om te reageren naar Johan.

WebHalla
 Content
  Management
   System


ICT-Hotlist Thema

Terug naar de ICT-Hotlist...
Mis de laatste updates niet

Graph.js een JavaScript bibliotheek voor HTML 5

Nick Downie heeft een goede en gratis JavaScript bibliotheek gemaakt om eenvoudig interactieve grafieken op Uw HTML 5 Canvas te produceren. Volledige documentatie over en de gratis download van Chart.js kan gevonden worden op http://chartjs.org/. Enkele eenvoudige voorbeelden worden hieronder getoond. Beweeg de muis over de grafieken om de tooltips te zien.

Lijn Grafiek

Deze plaats is gereserveerd voor een Lijn grafiek
De code:
<!-- ********************************************************************* -->
<!-- * This example demonstrates how to use the JavaScript Chart library * -->
<!-- * Chart.js (http://chartjs.org/) by Nick Downie                     * -->
<!-- * (C)Copyright 2015 - 2018 by J.P.G. van Soest.                     * -->
<!-- ********************************************************************* -->
<html>
  <head>
    <title>Chart.js Line Chart Example</title>
    <script src="Chart.js"></script>
    <script>
// Define the data set for the Line Chart
var dataLine = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

window.onload = function(){
	var ctxLine = document.getElementById("LineChart").getContext("2d");
	var myLineChart = new Chart(ctxLine).Line(dataLine);
};
</script>
  </head>
  <body>
    <center><img src="http://www.vansoest.it/v1/image/vansoest.gif" /></center>
    <h1>This Page shows how to setup a Line Chart</h1>
    <canvas id="LineChart" width="300" height="300">This place is reserved for a Line chart</canvas>
  </body>
</html>
Html formattering door http://tohtml.com/

Taart grafiek

Deze plaats is gereserveerd voor een Taart grafiek
De code:
<!-- ********************************************************************* -->
<!-- * This example demonstrates how to use the JavaScript Chart library * -->
<!-- * Chart.js (http://chartjs.org/) by Nick Downie                     * -->
<!-- * (C)Copyright 2015 - 2018 by J.P.G. van Soest.                     * -->
<!-- ********************************************************************* -->
<html>
  <head>
    <title>Chart.js Pie Chart Example</title>
    <script src="Chart.js"></script>
    <script>
// Define the data set for the Pie Chart

var dataPie =  [
    {   
            value: 600,   
            color: "#F7464A",   
            highlight: "#FF5A5E",   
            label: "Monday"   
    },   
    {   
            value: 150,   
            color: "#46BFBD",   
            highlight: "#5AD3D1",   
            label: "Tuesday"   
    },   
    {   
            value: 100,   
            color: "#FDB45C",   
            highlight: "#FFC870",   
            label: "Wednesday"   
    },   
    {   
            value: 400,   
            color: "#949FB1",   
            highlight: "#A8B3C5",   
            label: "Thursday"   
    },   
    {   
            value: 120,   
            color: "#4D5360",   
            highlight: "#616774",   
            label: "Friday"   
    }   

]; 

window.onload = function(){
        var ctxPie = document.getElementById("PieChart").getContext("2d");
        var myPieChart = new Chart(ctxPie).Pie(dataPie);
};
</script>
  </head>
  <body>
    <center><img src="http://www.vansoest.it/v1/image/vansoest.gif" /></center>
    <h1>This Page shows how to setup a Pie Chart</h1>
    <canvas id="PieChart" width="300" height="300">This place is reserved for a Pie chart</canvas><br />
  </body>
</html>
Html formattering door http://tohtml.com/

Staaf grafiek

Deze plaats is gereserveerd voor een staaf grafiek
De code:
<!-- ********************************************************************* -->
<!-- * This example demonstrates how to use the JavaScript Chart library * -->
<!-- * Chart.js (http://chartjs.org/) by Nick Downie                     * -->
<!-- * (C)Copyright 2015 - 2018 by J.P.G. van Soest.                     * -->
<!-- ********************************************************************* -->
<html>
  <head>
    <title>Chart.js Bar Chart Example</title>
    <script src="Chart.js"></script>
    <script>
// Define the data set for the Bar Chart
var dataBar = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

window.onload = function(){
	var ctxBar = document.getElementById("BarChart").getContext("2d");
	var myBarChart = new Chart(ctxBar).Bar(dataBar);
};
</script>
  </head>
  <body>
    <center><img src="http://www.vansoest.it/v1/image/vansoest.gif" /></center>
    <h1>This Page shows how to setup a Bar Chart</h1>
    <canvas id="BarChart" width="300" height="300">This place is reserved for a Bar chart</canvas>
  </body>
</html>
Html formattering door http://tohtml.com/
U mag stemmen over dit artikel:


Artikel gemaakt  :  01-05-2017
Artikel laatst bijgewerkt  :  01-05-2017

Scripts en programmeervoorbeelden disclaimer

Tenzij anders vermeld, zijn de scriptcode en programmeervoorbeelden auteursrechtelijk beschermde (copyright) freeware. U mag deze wijzigen, zolang een verwijzing naar de oorspronkelijke code en een hyperlink naar de bronpagina is opgenomen in de gewijzigde code en documentatie. Het is echter niet toegestaan om (kopieën van) de scripts en programmeervoorbeelden te publiceren op uw eigen site, blog, vlog, of te distribueren op papier of een andere drager, zonder voorafgaande schriftelijke toestemming.
Bij veel van de technieken gebruikt in deze scripts, met inbegrip van maar niet beperkt tot register-wijzigen of wijzigingen aan systeembestanden of instellingen, bestaat een risico dat een werkend besturingssysteem onbruikbaar wordt en gegevens verloren kunnen raken. Zorg ervoor dat U gecontroleerd heeft dat U beschikt over volledige back-ups en de bijbehorende herstelsoftware voordat U deze scripts of programmavoorbeelden gebruikt. Het gebruik van deze scripts en programmeervoorbeelden is volledig Uw eigen risico. Alle aansprakelijkheidsclaims tegen de auteur met betrekking tot materiële of niet-materiële verliezen als gevolg van het gebruik, misbruik of niet-gebruik van de verstrekte informatie of het gebruik van onjuiste of onvolledige informatie, zijn uitgesloten. Alle inhoud is onderhevig aan verandering en geleverd zonder verplichting.
Gegenereerd door WebHalla™ Versie 0.1.e.1 : Woensdag 19-12-2018 © Copyright 1995-2018 Johan van Soest
Respons Formulier    Cookie- en Privacy statement
Luchtkwaliteit Waalre door
PM1 4.0 μgr/m3
PM 2,5 6.0 μgr/m3
PM 10 17.0 μgr/m3
Ozon 7.2 μgr/m3
Vocht 68.25%
Temperatuur 17.95°C