JavaScript CanvasJS
CanvasJS is a JavaScript charting library that allows you to create interactive and visually appealing charts and graphs on web pages. It provides a wide range of chart types, including line charts, bar charts, pie charts, area charts, and more.
To use CanvasJS, you need to include the CanvasJS library in your HTML file by adding the following script tag:
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>Once you have included the library, you can create a chart by creating an instance of the CanvasJS.Chart class and specifying the chart options and data. Here’s a basic example of creating a bar chart using CanvasJS:
<!DOCTYPE html>
<html>
<head>
<title>CanvasJS Example</title>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script>
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Sample Bar Chart"
},
data: [
{
type: "bar",
dataPoints: [
{ label: "Apple", y: 10 },
{ label: "Orange", y: 15 },
{ label: "Banana", y: 7 },
{ label: "Mango", y: 12 },
{ label: "Grapes", y: 5 }
]
}
]
});
chart.render();
};
</script>
</body>
</html>In this example, we create a bar chart with the title “Sample Bar Chart” and data consisting of different fruits and their corresponding quantities. The chart is rendered inside the chartContainer div element.