Area Chart

In this post, we will introduce you how to add an Area Chart to your web page. An area chart or area graph displays graphically quantitive data. It is based on the line chart. The area between axis and line are commonly emphasized with colors, textures and hatchings.

Create a HTML file called Chart.html that contains the following HTML code:

<html lang="en">
    <title id='Description'>jqxChart Area Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
                datatype: "csv",
                datafields: [
                    { name: 'Date' },
                    { name: 'S&P 500' },
                    { name: 'NASDAQ' }
                url: '../sampledata/nasdaq_vs_sp500.txt'

            var dataAdapter = new $.jqx.dataAdapter(source,
                    async: false,
                    autoBind: true,
                    downloadComplete: function () { },
                    loadComplete: function () { },
                    loadError: function () { }

            // prepare jqxChart settings
            var settings = {
                title: "U.S. Stock Market Index Performance (2011)",
                description: "NASDAQ Composite compared to S&P 500",
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                        text: 'Category Axis',
                        textRotationAngle: 0,
                        dataField: 'Date',
                        formatFunction: function (value) {
                            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                            return months[new Date(value).getMonth()];
                        showTickMarks: true,
                        tickMarksInterval: Math.round(dataAdapter.records.length / 12),
                        tickMarksColor: '#888888',
                        unitInterval: Math.round(dataAdapter.records.length / 12),
                        showGridLines: true,
                        gridLinesInterval: 3 * Math.round(dataAdapter.records.length / 12),
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                colorScheme: 'scheme05',
                            type: 'area',
                                unitInterval: 500,
                                minValue: 0,
                                maxValue: 3000,
                                displayValueAxis: true,
                                description: 'Daily Closing Price',
                                //descriptionClass: 'css-class-name',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            series: [
                                    { dataField: 'S&P 500', displayText: 'S&P 500' },
                                    { dataField: 'NASDAQ', displayText: 'NASDAQ' }

            // setup the chart

<body class='default'>
    <div id='jqxChart' style="width:680px; height:400px">

In the Head section of the page, we include the jQuery javascript file, the jQWidgets core framework file – jqxcore.js, the jQWidgets data binding file – jqxdata.js, the main jqxChart plug-in file – jqxchart.js file, and the base jQWidgets stylesheet – jqx.base.css. On to the body of the page. we create a DIV tag as the placeholder for the chart with a unique ID = “jqxChart”. The chart is then instantiated using the jqxChart constructor function. The constructor takes in the following parameters: source – dataAdapter object, categoryAxis and seriesGroups objects, colorScheme(available values are from ‘scheme01′ to ‘scheme11′), showLegend(displays the legend section in the chart) and the Chart title. In the source object initialization, we specify the datafields array, the url(points to a txt data file) and we set the datatype to ‘csv’. The ‘nasdaq_vs_sp500.txt’ file is included in the jQWidgets installation package. In the seriesGroup object, the series group type is set to ‘area’ which means that the data will be visualized as Area Chart. The valueAxis definition specifies the appearance of the Y-axis. This series group contains two series that will render data corresponding to the ‘S&P 500’ and ‘NASDAQ’ dataFields. In this example we bind the Category Axis (horizontal X axis) to the Date property of our data source.

javascript area chart

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxChart and tagged , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply