Please wait,
Processing your request...

    0%
  Business logo VanSoest.it
  ... | Selecteer de Nederlandse taal |
Sharing is caring
| Print this page. | Linkedin page of Johan van Soest

React: Postcard image. Click this to mail to Johan

WebHalla
 Content
  Management
   System

ICT-Hotlist Topic

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 - 2024 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 - 2024 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 - 2024 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.7 : Friday 29-3-2024 © Copyright 1995-2024 ing. Johan P.G. van Soest CIPM Certified Privacy Information Manager
Response Form    Cookie- and Privacy statement    Responsible Disclosure procedure
Weather in Waalre by OpenWeatherMap logo broken clouds
Temperature 13.2 °C broken clouds
Wind chill 12.4 °C broken clouds
Humidity 70 % broken clouds
Air pressure 993 hPa broken clouds
Wind speed 7.2 m/s broken clouds
Wind direction South West South West broken clouds
Sun Rise 6:19 Sun Rise
Sun Set 19:05 Sun Set
Updated:2024-03-29 12:42:45 broken clouds

Weather Cache is 6 minute(s) old.
| Current user: Guest | Login |