Previous Examples Next
Engel Curves
0
2
4
6
8
10
12
14
16
18
20
22
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
Rice
Bread and other cereals
Meat
Fish and seafood
Fruits and vegetables
Other food products
Catering services
Non-alcoholic beverages
Alcoholic beverages
Tobacco and narcotics
Clothing and footwear
Rentals (actual or imputed) and maintenance and repair of the dwelling
Water supply and miscellaneous services related to the dwelling
Electricity gas and other fuels
Furnishing household equipment and routine household maintenance
Health
Transport
Communication
Recreation and culture
Education
Personal care
Other miscellaneous goods and services
Food and non-alcoholic beverages
Non food

Generated on 18-Mar-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
$(document).ready(function(){
 
    ///////////
    // This is NOT a full csv parser.
    // It does not handle quoated text.
    // It is for demonstration only.
    // For a full featured csv parser, look at:
    //
    // http://www.bennadel.com/blog/1504-Ask-Ben-Parsing-CSV-Strings-With-Javascript-Exec-Regular-Expression-Command.htm
    ///////////
 
    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);
                        }
                        else {
                          labels.push(line[0]);
                          values.push(line.slice(1, line.length));
                          temp = values[values.length-1];
                          for (n in temp) {
                            values[values.length-1][n] = parseFloat(temp[n]);
                          }
                        }
                    }
                }
                ret = [values, labels, ticks];
            }
        });
        return ret;
    };
  
    var jsonurl = "./KCPsample4.csv";
 
    var infos = parseCSVFile(jsonurl);
    var data = infos[0];
    var labels = infos[1];
    var ticks = infos[2];
 
    // make the plot
     
    plot1 = $.jqplot("chart1", data, {
        title: "Engel Curves",
        animate: true,
        axesDefaults: {
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
        },
        seriesDefaults: {
            showMarker: false
        },
        legend: {
            show: true,
            renderer: $.jqplot.EnhancedLegendRenderer,
            placement: "outsideGrid",
            labels: labels,
            location: "ne",
            rowSpacing: "0px",
            rendererOptions: {
                // set to true to replot when toggling series on/off
                // set to an options object to pass in replot options.
                seriesToggle: 'normal',
                seriesToggleReplot: {resetAxes: true}
            }
        },
        axes: {
            xaxis: {
                label: 'Population Percentile',
                pad: 1.01,
                tickOptions: {
                    showGridline: false
                }
            },
            yaxis: {
                label: 'Share in Total Expenditure (%)',
                tickOptions: {
                    suffix: '%'
                },
                padMin: 0,
                padMax: 1.05
            }
        },
        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();
    });
});
>

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="../plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui.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" />