Please wait,
Processing your request...

    0%
  Business logo VanSoest.it  
  ... | Selecteer de Nederlandse taal | Print this page. | Linkedin page of Johan van Soest | User: Guest | Login

Postcard image. Click this to mail to Johan

WebHalla
 Content
  Management
   System


ICT-Hotlist Topic

Back to the ICT-Hotlist...
Don't miss the latest updates

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 - 2019 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 - 2019 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 - 2019 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:


Topic created  :  01-05-2017
Topic last edited  :  01-05-2017

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.2 : Tuesday 22-1-2019 © Copyright 1995-2019 Johan van Soest
Response Form    Cookie- and Privacy statement
Weather in Waalre by OpenWeatherMap logo mist
Temperature -3.76 °C mist
Humidity 85 % mist
Air pressure 1017 hPa mist
Wind speed 2.1 m/s mist
Wind direction South South mist