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:
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Bar Chart Using Chart.js</title>
  5. </head>
  6. <body></body>
  7. </html>
Included JavaScript file.
  1. <script src="Chart.js"></script>
Call the Chart Function as in the following:
  1. window.onload = function () {
  2. var canvasObject = document.getElementById("myChart").getContext("2d");
  3. window.myBar = new Chart(canvasObject).Bar(barChartData, {
  4. responsive: true
  5. });
  6. }
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.
  1. var barChartData = {
  2. labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
  3. datasets: [
  4. {
  5. fillColor: "rgba(220,220,220,0.5)",
  6. strokeColor: "rgba(220,220,220,0.8)",
  7. highlightFill: "rgba(220,220,220,0.75)",
  8. highlightStroke: "rgba(220,220,220,1)",
  9. data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
  10. },
  11. {
  12. fillColor: "rgba(151,187,205,0.5)",
  13. strokeColor: "rgba(151,187,205,0.8)",
  14. highlightFill: "rgba(151,187,205,0.75)",
  15. highlightStroke: "rgba(151,187,205,1)",
  16. data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
  17. }
  18. ]
  20. }
Properties
Here you can change the properties as you want.
Use the following to generate data:
  1. var scalingFactor = function () { return Math.round(Math.random() * 100) };
Complete HTML
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Bar Chart Using Chart.js</title>
  5. <script src="Chart.js"></script>
  6. <script>
  7. var scalingFactor = function () { return Math.round(Math.random() * 100) };
  8. var barChartData = {
  9. labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
  10. datasets: [
  11. {
  12. fillColor: "rgba(220,220,220,0.5)",
  13. strokeColor: "rgba(220,220,220,0.8)",
  14. highlightFill: "rgba(220,220,220,0.75)",
  15. highlightStroke: "rgba(220,220,220,1)",
  16. data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
  17. },
  18. {
  19. fillColor: "rgba(151,187,205,0.5)",
  20. strokeColor: "rgba(151,187,205,0.8)",
  21. highlightFill: "rgba(151,187,205,0.75)",
  22. highlightStroke: "rgba(151,187,205,1)",
  23. data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
  24. }
  25. ]
  27. }
  28. window.onload = function () {
  29. var canvasObject = document.getElementById("myChart").getContext("2d");
  30. window.myBar = new Chart(canvasObject).Bar(barChartData, {
  31. responsive: true
  32. });
  33. }
  35. </script>
  36. </head>
  37. <body>
  38. <div>
  39. <canvas id="myChart"></canvas>
  40. </div>
  41. </body>
  42. </html>

Conclusion

I hope you can now create your own chart.
Output
Output