Build An Area Chart In JavaScript/ jQuery

Today, I am going to demonstrate how to build an area chart in Javascript/jQuery. I hope it will be helpful. This chart can be used to buid BI/Business Inteligence, graphical representation of data etc. To build an area chart, we will be using JavaScript/jQuery library, that is Chart JS. Since it will be based on Javascript, it can be used over multiple platforms like SharePoint Online, Project Online, ASP.NET Applications, Open source platforms like Java, PHP, etc. Thus, let's get to the topic.

 

Step 1

 

(Libraries)

 

First, we need to get the required libraries. We can download these libraries from jQuery CDN, Chart.JS CDN. To build this chart, we will be using jQuery v1.12.4 and Chart.js v2.5.0.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>

Step 2

 

(Markups)

 

Chart js uses canvas to draw the chart. Thus, we will be using a canvas tag for the same.  

<div class="chartBox">
    <canvas id="AreaChartDom" width="600" height="300"></canvas>
</div>

Step 3

 

(Scripts)

 

Dataset

 

First, we need to prepare the data set for the chart. We can define the data set, as shown below. 

// Chart dataset
var areaData = {
    labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7'],
    datasets: [{
        label: "Year 2016",
        fillColor: 'rgba(0,0,0,0)',
        backgroundColor: 'rgba(155, 89, 182,0.5)',
        pointColor: 'rgba(220,180,0,1)',
        data: [20, 30, 80, 20, 40, 10, 60]
    },
    {
        label: "Year 2017",
        fillColor: 'rgba(0,0,0,0)',
        backgroundColor: 'rgba(22, 160, 133,0.5)',
        pointColor: 'rgba(151,187,205,1)',
        data: [60, 10, 40, 30, 80, 30, 20]
    }]
};

Here, you can see that there are two properties in areaData object. One is labels, which represents labels along X-axis of the chart and the second one is datasets, which represents values (data), colors etc. for X-axis of the chart.

 

Chart options

   

To configure the chart according to our requirement, we can use options.

// Chart option | Here we can customize the chart. please refer to the documentation at chart js site.
var settings = {
    responsive: false,
    animation:{
        duration:4000,
        easing:'easeOutElastic'
    },
    title: {
        display: true,
        text: 'Title of the chart', // Chart title.
        fontStyle:'normal',
        fontFamily:'Segoe UI',
        fontSize:14
    },
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                max: 100,    // minimum will be 0, unless there is a lower value.
                beginAtZero: true,   // minimum value will be 0.
                stepSize:10
            }
        }]
    }
};

Option helps to configure the chart according to our requirements. Here, I have defined the maximum value for the Y-axis, step size, fonts, animation etc. For more and detailed information on option and configuration, please refer to the documentation at chart js site.

 

Render the chart

 

After prepairing the dataset and options, we need to draw the chart. For this purpose, we will be using the canvas tag, which we have added to the markup earlier, passed the data set and an option to it. 

$(document).ready(function(){
    // Area chart
    var areaChartDOM = document.getElementById("AreaChartDom");
    var myLineChart = new Chart(areaChartDOM, {
        type: 'line',
        data: areaData,
        options: settings
    });
});

Result

 

 

 

I hope, this will help you. Please leave a comment, if you face any issue in the procedures given above. For reference, find the attached HTML file.

 

Happy coding.