Home / design

Charts in HTML, CSS and JavaScript

It is always cool to have a dynamic chart that shows your statistics in a quick and simple view.
There are several ways to generate these charts.

The most popular way is using Google's JSAPI code:
https://developers.google.com/chart/interactive/docs/gallery.

It is great code, but the page need to download code from Google servers.
In most cases this is not a problem.

If you want everything on your servers, because you need to serve pages without access to the world wide web. http://chartjs.org is my favorite choice.

 

Google's JSAPI code

The easiest way is to follow the examples you can find on the Google site (https://developers.google.com/chart/interactive/docs/gallery).
They are easy to follow.
Here is a example of the pie chart: 

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>
In all cases you need to include: 
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
This is the engine, it will dynamically load other script from google servers to show the charts.

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);
This is the date for the chart. This is the part you should update with a server side script (PHP, ASP, JSP, ...).

And of course you need to tell them were you want the chart on the page: 
<div id="piechart" style="width: 900px; height: 500px;"></div>

There are a lot more options, for that you should check out the google pages:
for the Pie chart: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
For any other chart: https://developers.google.com/chart/interactive/docs/gallery

 

Chart.js

Uses HTML5, so it's supported by all modern browsers.
All you need to do is download the "chart.js"-javascript file and put it on your server, then include it on the page you want the chart.
It is all explained it the documentation: http://www.chartjs.org/docs/.

Here is a quick example of the pie chart: 

<head>
  <script src="chart.js"></script>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

  <script>
      var pieData = [
	{
	  value: 30,
	  color:"#F38630"
	},
	{
	  value : 50,
	  color : "#E0E4CC"
	},
	{
	  value : 100,
	  color : "#69D2E7"
	}
      ];

      var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);
  </script>
</body>

You always need to include the chart.js-javascript file. 

<script src="chart.js"></script>
The canvas needs to be set where you want the chart to be shown. 
<canvas id="canvas" width="400" height="400"></canvas>
And now the important part, the data to fill the chart: 
  <script>
      var pieData = [
	{
	  value: 30,
	  color:"#F38630"
	},
	{
	  value : 50,
	  color : "#E0E4CC"
	},
	{
	  value : 100,
	  color : "#69D2E7"
	}
      ];

      var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);
  </script>

 

TOP