Recently, I am working on a project in which I have to create some charts and graphs in a website.As we know that Graphs are very useful in displaying data visually rather than displaying data in tables. Using Chart.js, we can draw charts and graphs on webpage using HTML5 canvas element. We can create six types of charts using chart.js
Let's Start
Firstly, we have to go http://www.chartjs.org/ for downloading chart.js Javascript plugin. Clicking on download button will take you to GitHub page from where you can download the archive.
Let's Start
Firstly, we have to go http://www.chartjs.org/ for downloading chart.js Javascript plugin. Clicking on download button will take you to GitHub page from where you can download the archive.
After Extracting the files Chart.js-master.rar file, you will be able to find documentation, examples and chart.js file. Add chart.js javascript library into your document in between head tag.
<script src="js/Chart.min.js"></script>
I am using minified version of chart.js. Add <canvas> element with height,width and unique id.
Example 1:
In first Example we are going to create Pie Chart using chart.js. For creating pie chart, a variable array(named pieChartData) declared which contain value and color properties. Set the values and color depanding upon your chart.
Chart.js provide various option for changing animation and look. You can change these options according to your wish.
For creating chart, we have to initialize chart class and pass our canvas element and "2D" drawing context and call the pie method.
<!Doctype HTML>
<html>
<head>
<title>Pie Chart</title>
<script src="js/Chart.min.js"></script>
</head>
<body>
<canvas id="pieChartLoc" height="300" width="300"></canvas>
<script>
var pieChartData = [
{
value: 50,
color: "lightblue"
},
{
value: 10,
color: "red"
},
{
value: 40,
color: "green"
}
]
var myLine = new Chart(document.getElementById("pieChartLoc").getContext("2d")).Pie(pieChartData);
</script>
</body>
</html>
Example 2: Creating the Doughnut Chart
Doughnut chart looks much similar to pie chart except they have the centre cut out. Everything is similar to above process except we have to call doughnut method this time.
<!Doctype HTML>
<html>
<head>
<title>Doughnut Chart</title>
<script src="js/Chart.min.js"></script>
</head>
<body>
<canvas id="doughNutChartLoc" height="300" width="300"></canvas>
<script>
var DoughNutChartData = [
{
value: 50,
color: "lightblue"
},
{
value: 10,
color: "red"
},
{
value: 40,
color: "green"
}
]
var myDoughnut = new Chart(document.getElementById("doughNutChartLoc").getContext("2d")).Doughnut(DoughNutChartData);
</script>
</body>
</html>
Preview:
Example 3: Creating the Bar Chart
For creating Bar chart, we have to labels( displayed on x-axis) and datasets( contains information about fillColor, strokeColor and data which is basically value on y-axis)
<!Doctype HTML>
<html>
<head>
<title>Bar Chart</title>
<script src="js/Chart.min.js"></script>
</head>
<body>
<canvas id="barChartLoc" height="300" width="300"></canvas>
<script>
var barChartLocData = {
labels: ["January", "Feburary", "March"],
datasets: [{ fillColor: "lightblue", strokeColor: "blue", data: [15, 20, 35] }]
};
var mybarChartLoc = new Chart(document.getElementById("barChartLoc").getContext("2d")).Bar(barChartLocData);
</script>
</body>
</html>
Hope you like it. Thanks.
[Download Source Code from Google Drive]
This is excellent information which is shared by you about Create chart using chartjs . This information is meaningful and magnificent for us to increase our knowledge about it. Keep sharing this kind of information. Thank you. Read more info about Org chart
ReplyDeleteThe article provides a practical introduction to creating charts and graphs on webpages with Chart.js and the HTML5 canvas element. The examples of pie and doughnut charts are especially useful because they demonstrate the complete workflow from including the library and canvas element to preparing data and initializing the chart.
DeleteFor learners interested in understanding how charts can be designed and presented effectively, Data Visualization Course can provide a broader foundation. The article's focus on visually representing numerical information also shows why choosing an appropriate chart type is important when communicating data clearly.
I have read some of your blogs and I found all of them very much informative and easy to understand. This is a perfect blog for everyone.
ReplyDeletepharma konnect org chart
The JavaScript implementation is another useful aspect of the tutorial, particularly the use of the Chart object, canvas context, chart data, and configuration options. Anyone building interactive visual elements with JavaScript can strengthen these skills through a Javascript Online Course, especially when working with browser-based visualization libraries.
ReplyDeleteThe examples also demonstrate how JavaScript visualization can be integrated directly into an HTML webpage using the canvas element. This makes the tutorial relevant to developers building data-driven interfaces and dashboards, while a Web Development Course can help learners connect charting techniques with broader frontend development concepts.
ReplyDelete