Previous Examples Next
Area Plot
v01
v02
v03
v04
v05
v06
v07
v08
v09
v10
v11
v12
v13
v14
v15
v16
v17
v18
v19
v20
0%
20%
40%
60%
80%
100%
Other miscellaneous goods and services
Personal care
Education
Recreation and culture
Communication
Transport
Health
Furnishing household equipment and routine household maintenance
Electricity gas and other fuels
Water supply and miscellaneous services related to the dwelling
Rentals (actual or imputed) and maintenance and repair of the dwelling
Clothing and footwear
Tobacco and narcotics
Alcoholic beverages
Non-alcoholic beverages
Catering services
Other food products
Fruits and vegetables
Fish and seafood
Meat
Bread and other cereals
Rice

Generated on 12-Jan-2025
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
$(document).ready(function(){
 
    ///////////
    // Function to parse a csv file.
    // Note, this IS NOT a complete parser.  It does not handle quoted text.
    // It is implemented to demonstrate functionality from within JavaScript.
    // If a full csv parser is needed, check out:
    ///////////
    var parseCSVFile = function(url) {
        var ret = null;
        var labels = [];
        var ticks = [];
        var values = [];
        var temp;
        $.ajax({
            // have to use synchronous here, else returns before data is fetched
            async: false,
            url: url,
            dataType:'text',
            success: function(data) {
                // parse csv data
                var lines = data.split('\n');
                var line;
                for (var i=0, l=lines.length; i<l; i++) {
                    line = lines[i].replace('\r', '').split(',');
                    // console.log(line);
                    if (line.length > 1) {
                        if (i === 0) {
                          ticks = line.slice(1, line.length);
                          for (var n=0, nl=ticks.length; n<nl; n++) {
                            ticks[n] = [n+1, ticks[n]];
                          }
                        }
                        else {
                          labels.push(line[0]);
                          values.push(line.slice(1, line.length));
                          temp = values[values.length-1];
                          // make a copy of temp
                          temp = temp.slice(0, temp.length);
                          for (var n=0, nl=temp.length; n<nl; n++) {
                            values[values.length-1][n] = parseFloat(temp[n]);
                          }
                        }
                    }
                }
                ret = [values, labels, ticks];
            }
        });
        return ret;
    };
  
    var jsonurl = "./KCPsample4.csv";
 
    var infos = parseCSVFile(jsonurl);
 
    // area plots are made with all series except last 2
    data = infos[0].slice(0, infos[0].length-2);
    labels = infos[1].slice(0, infos[1].length-2);
    ticks = infos[2];
 
    // make the plot
     
    plot1 = $.jqplot('chart1', data, {
        title: 'Area Plot',
        stackSeries: true,
        seriesDefaults: {
            showMarker: false,
            fill: true,
            fillAndStroke: true
        },
        legend: {
            show: true,
            placement: 'outsideGrid',
            labels: labels,
            location: 'ne',
            rowSpacing: '0px'
        },
        axesDefaults: {
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
        },
        axes: {
            xaxis: {
                pad: 0,
                ticks: ticks,
                label: 'Population Vingtile',
                tickOptions: {
                    showGridline: false
                }
            },
            yaxis: {
                min: 0,
                max: 100,
                label: 'Share of Item in Total Expenditure (%)',
                tickOptions: {
                  showGridline: false,
                  suffix: '%'
                }
            }
        },
        grid: {
            drawBorder: false,
            shadow: false,
            // background: 'rgba(0,0,0,0)'  works to make transparent.
            background: 'white'
        }
    });
 
    // add a date at the bottom.
 
    var d = new $.jsDate();
    $('div.jqplot-datestamp').html('Generated on '+d.strftime('%v'));
 
    // make it resizable.
     
    $("div.chart-container").resizable({delay:20});
 
    $('div.chart-container').bind('resize', function(event, ui) {
        plot1.replot();
    });
 
    $('#chart1').bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
        var idx = 21 - seriesIndex
        $('tr.jqplot-table-legend').removeClass('legend-row-highlighted'); 
        $('tr.jqplot-table-legend').children('.jqplot-table-legend-label').removeClass('legend-text-highlighted');
        $('tr.jqplot-table-legend').eq(idx).addClass('legend-row-highlighted');
        $('tr.jqplot-table-legend').eq(idx).children('.jqplot-table-legend-label').addClass('legend-text-highlighted');
    });
 
    $('#chart1').bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {
        $('tr.jqplot-table-legend').removeClass('legend-row-highlighted'); 
        $('tr.jqplot-table-legend').children('.jqplot-table-legend-label').removeClass('legend-text-highlighted');
    });
});

The charts on this page depend on the following files:

<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="../jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" hrf="jquery-ui/css/smoothness/jquery-ui.min.css" />