Client-Side Chart Widget in HTML 5: Part 1 (Bar Chart)

Introduction

Hi all, I hope you are fine. Today we will explain a client-side chart widget in HTML 5.

Background

As in the header, we will work with a client-side chart. For that, we have a powerful widget.

That is Chart.JS. Please download the necessary files here.

Using the code

The following is a simple HTML:

Included JavaScript file.

Call the Chart Function as in the following:

Here we are loading the chart into the myChart.

As you can see in the preceding code, barChartData is the data we will load into the chart.

var barChartData = {
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
datasets: [
{
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: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
},
{
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: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
}
]
}

Properties

Here you can change the properties as you want.

Use the following to generate data:

Complete HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bar Chart Using Chart.js</title>
<script src="Chart.js"></script>
<script>
var scalingFactor = function () { return Math.round(Math.random() * 100) };
var barChartData = {
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
datasets: [
{
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: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
},
{
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: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
}
]
}
window.onload = function () {
var canvasObject = document.getElementById("myChart").getContext("2d");
window.myBar = new Chart(canvasObject).Bar(barChartData, {
responsive: true
});
}
</script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
</body>
</html>

I hope you can now create your own chart.

Output