Click here to Skip to main content
15,566,394 members
Articles / Web Development / HTML
Tip/Trick
Posted 10 May 2014

Tagged as

Stats

58.4K views
1.6K downloads
8 bookmarked

Creating Charts using Chart.js in Websites

Rate me:
Please Sign up or sign in to vote.
4.88/5 (10 votes)
10 May 2014CPOL2 min read
Creating Charts using Chart.js JavaScript library

Introduction

Of late, I am working on a project in which I have to create charts and graphs. Then, I came to know about chart.js. 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. In this tip & trick, we are going to see how to use chart.js for creating charts.

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.

image1

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.

HTML
<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 the first example, we are going to create Pie Chart using chart.js. For creating a pie chart, a variable array (named pieChartData) is declared which contain value and color properties. Set the values and color depending upon your chart.

Image 2

Chart.js provides various options 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.

HTML
<!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 the above process except we have to call doughnut method this time.

HTML
<!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

Image 3

Example 3: Creating the Bar Chart

For creating a Bar chart, we have labels (displayed on x-axis) and datasets (contains information about fillColor, strokeColor and data which is basically value on y-axis).

HTML
<!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> 

Preview

Image 4

You can also download the complete source code of the examples explained.

Hope you like it. Thanks!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Student
India India

Comments and Discussions

 
Questionhow can i do update of the chart 'on the fly?' Pin
Member 1052341913-Oct-16 1:20
Member 1052341913-Oct-16 1:20 
Questionthanks Pin
osc65427-Jan-16 14:48
professionalosc65427-Jan-16 14:48 
GeneralMy vote of 4 Pin
Member 988269629-Aug-14 0:17
Member 988269629-Aug-14 0:17 
GeneralRe: My vote of 4 Pin
Anoop Kr Sharma29-Aug-14 8:41
professionalAnoop Kr Sharma29-Aug-14 8:41 
Generalits useful Pin
Santosh K. Tripathi12-May-14 20:39
professionalSantosh K. Tripathi12-May-14 20:39 
GeneralRe: its useful Pin
Anoop Kr Sharma13-May-14 3:01
professionalAnoop Kr Sharma13-May-14 3:01 
GeneralMy vote of 3 Pin
Santosh K. Tripathi12-May-14 20:38
professionalSantosh K. Tripathi12-May-14 20:38 
GeneralRe: My vote of 3 Pin
Anoop Kr Sharma13-May-14 3:02
professionalAnoop Kr Sharma13-May-14 3:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.