Please wait,
Processing your request...

    0%
  Business logo VanSoest.it mourning
  ... | Selecteer de Nederlandse taal | Print this page. | Linkedin page of Johan van Soest | User: Guest | Login
Home
About
Hobbies
Software
Hardware
ICT Hotlist
Purpose

Postcard image. Click this to mail to Johan

WebHalla Content Management System


ICT-Hotlist Topic

Back to the ICT-Hotlist...
Don't miss latest updates Follow @WebHalla
By Johan van Soest.
Published  :  2015-04-01.
Last updated  :  2017-05-02.

Graph.js a JavaScript library for HTML 5

Nick Downie has created a great and free JavaScript library to easily produce interactive charts on your HTML 5 Canvas. Full documentation about and the free download of Chart.js can be found at http://chartjs.org/. Just a few simple examples are shown below. Hover on the graphs to see the tooltips.

Line Chart

This place is reserved for a Line chart
The code: 
<!-- ********************************************************************* -->
<!-- * This example demonstrates how to use the JavaScript Chart library * -->
<!-- * Chart.js (http://chartjs.org/) by Nick Downie                     * -->
<!-- * (C)Copyright 2015 - 2021 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 formatting by http://tohtml.com/

Pie Chart

This place is reserved for a Pie chart
The code: 
<!-- ********************************************************************* -->
<!-- * This example demonstrates how to use the JavaScript Chart library * -->
<!-- * Chart.js (http://chartjs.org/) by Nick Downie                     * -->
<!-- * (C)Copyright 2015 - 2021 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 formatting by http://tohtml.com/

Bar Chart

This place is reserved for a Bar chart
The code: 
<!-- ********************************************************************* -->
<!-- * This example demonstrates how to use the JavaScript Chart library * -->
<!-- * Chart.js (http://chartjs.org/) by Nick Downie                     * -->
<!-- * (C)Copyright 2015 - 2021 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 formatting by http://tohtml.com/
You may vote your opinion about this article:

Scripts and programming examples disclaimer

Unless stated otherwise, the script sources and programming examples provided are copyrighted freeware. You may modify them, as long as a reference to the original code and hyperlink to the source page is included in the modified code and documentation. However, it is not allowed to publish (copies of) scripts and programming examples on your own site, blog, vlog, or distribute them on paper or any other medium, without prior written consent.
Many of the techniques used in these scripts, including but not limited to modifying the registry or system files and settings, impose a risk of rendering the Operating System inoperable and loss of data. Make sure you have verified full backups and the associated restore software available before running any script or programming example. Use these scripts and programming examples entirely at your own risk. All liability claims against the author in relation to material or non-material losses caused by the use, misuse or non-use of the information provided, or the use of incorrect or incomplete information, are excluded. All content is subject to change and provided without obligation.
Generated by WebHalla™ Version 0.1.e.5 : Saturday 27-2-2021 © Copyright 1995-2021 ing. Johan P.G. van Soest CIPM Certified Privacy Information Manager
Response Form    Cookie- and Privacy statement
Weather in Waalre by OpenWeatherMap logo clear sky
Temperature 4.92 °C clear sky
Wind chill 1.24 °C clear sky
Humidity 87 % clear sky
Air pressure 1040 hPa clear sky
Wind speed 3.09 m/s clear sky
Wind direction North North clear sky
Sun Rise 7:27 Sun Rise
Sun Set 18:14 Sun Set
Updated:2021-02-27 20:05:42 clear sky
Weather Cache is 1 minute(s) old.