<!DOCTYPE html>

<html>
<head>
	
	<title>Lorenz Curves</title>

    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css" href="examples.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
  
  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
    <script class="include" type="text/javascript" src="../jquery.min.js"></script>
    
   
</head>
<body>
    <div class="logo">
   <div class="nav">
   <a class="nav" href="../../../index.php"><span>&gt;</span>Home</a>
   <a class="nav"  href="../../../docs/"><span>&gt;</span>Docs</a>
   <a class="nav"  href="../../download/"><span>&gt;</span>Download</a>
   <a class="nav" href="../../../info.php"><span>&gt;</span>Info</a>
   <a class="nav"  href="../../../donate.php"><span>&gt;</span>Donate</a>
   </div>
</div>
    <div class="example-content">

    <div class="example-nav">
  <a href="kcp_engel.html">Previous</a> <a href="./">Examples</a> <a href="kcp_pdf.html">Next</a></div>

      
<!-- Example scripts go here -->


  <link class="include" type="text/css" href="jquery-ui/css/smoothness/jquery-ui.min.css" rel="Stylesheet" /> 

  <style type="text/css">

    .chart-container {
        border: 1px solid darkblue;
        padding: 30px;
        width: 500px;
        height: 400px;
        
    }

    #chart1 {
        width: 96%;
        height: 96%;
    }

    .jqplot-datestamp {
      font-size: 0.8em;
      color: #777;
/*      margin-top: 1em;
      text-align: right;*/
      font-style: italic;
      position: absolute;
      bottom: 15px;
      right: 15px;
    }

    td.controls li {
        list-style-type: none;
    }

    td.controls ul {
        margin-top: 0.5em;
        padding-left: 0.2em;
    }

    pre.code {
        margin-top: 45px;
        clear: both;
    }

  </style>

    <table class="app">
        <td class="controls">

            <div>
                Data Series:
                <ul>
                    <li><input class="dataSeries-checkbox" name="dataSeries_national" value="national" type="checkbox" checked />National</li>
                    <li><input class="dataSeries-checkbox" name="dataSeries_urban" value="urban" type="checkbox" />Urban</li>
                    <li><input class="dataSeries-checkbox" name="dataSeries_rural" value="rural" type="checkbox" />Rural</li>
                </ul>
            </div>

            <div>
                Background Color:
                <ul>
                    <li><input name="backgroundColor" value="white" type="radio" checked />Default</li>
                    <li><input name="backgroundColor" value="#efefef" type="radio" />Gray</li>
                </ul>
            </div>

            <div>
                Line Width:
                <ul>
                    <li><input name="lineWidth" value="2.5" type="radio" checked />Thin</li>
                    <li><input name="lineWidth" value="5" type="radio" />Thick</li>
                </ul>
            </div>

            <div>
                Grids:
                <ul>
                    <li><input name="gridsVertical" value="vertical" type="checkbox" checked />Vertical</li>
                    <li><input name="gridsHorizontal" value="horizontal" type="checkbox" checked />Horizontal</li>
                </ul>
            </div>

            <div>
                Cutoff Lines:
                <ul>
                    <li><input name="cutoffLines" value="showCutoffLines" type="checkbox" checked />Show</li>
                    <li>Low:&nbsp;&nbsp;<input name="userLine1" value="42" type="text" size="6" /></li>
                    <li>High:&nbsp;<input name="userLine2" value="75" type="text" size="6" /></li>
                </ul>
            </div>
        </td>
        
        <td class="chart">
            <div class="chart-container">    
                <div id="chart1"></div>
                <div class="jqplot-datestamp"></div>
            </div>
        </td>

    </table>

    <pre class="code brush:js"></pre>
  

  
  <script class="code" type="text/javascript">
$(document).ready(function(){
    var dataSets = {
        national: [[0, 0], [0.034259, 0.000122], [0.036908, 0.000271], [0.039957, 0.000457], [0.043623, 0.000699], [0.048008, 0.001005], [0.053278, 0.001404], [0.059665, 0.001916], [0.067405, 0.002587], [0.076951, 0.003482], [0.088909, 0.004676], [0.103706, 0.006234], [0.121406, 0.008198], [0.142376, 0.010698], [0.167456, 0.013945], [0.198392, 0.018266], [0.237371, 0.024152], [0.287096, 0.03217], [0.350664, 0.043128], [0.43322, 0.058856], [0.546538, 0.08196], [0.703419, 0.116382], [0.921534, 0.167573], [1.225405, 0.244101], [1.658248, 0.362099], [2.286919, 0.545089], [3.168531, 0.811148], [4.338121, 1.180312], [5.828025, 1.677699], [7.674282, 2.317937], [9.856185, 3.124879], [12.427952, 4.135038], [15.374906, 5.337835], [18.559853, 6.704187], [21.938501, 8.240167], [25.480211, 9.968066], [29.195872, 11.896316], [33.040813, 13.995922], [36.929108, 16.268393], [40.883239, 18.753271], [44.934876, 21.456742], [48.979949, 24.281483], [52.874709, 27.163823], [56.569122, 30.090586], [60.143349, 33.155912], [63.632698, 36.332609], [67.019887, 39.647977], [70.272329, 42.982924], [73.31569, 46.301522], [76.137996, 49.580067], [78.734309, 52.80729], [81.144203, 56.013671], [83.364771, 59.154237], [85.40072, 62.237023], [87.276365, 65.274088], [88.994984, 68.231226], [90.547773, 71.063226], [91.930153, 73.740825], [93.143588, 76.235257], [94.19365, 78.526502], [95.093093, 80.626967], [95.863261, 82.534767], [96.518119, 84.276606], [97.07861, 85.871008], [97.555507, 87.313822], [97.958887, 88.612275], [98.29631, 89.76839], [98.57645, 90.788966], [98.805892, 91.680096], [98.994988, 92.471419], [99.15183, 93.168954], [99.279882, 93.771844], [99.384116, 94.303287], [99.470272, 94.773123], [99.541871, 95.191639], [99.601871, 95.572501], [99.653556, 95.924822], [99.698334, 96.25129], [99.737113, 96.553878], [99.770733, 96.834228], [99.800151, 97.099569], [99.826487, 97.355328], [99.85018, 97.600349], [99.871291, 97.832168], [99.889939, 98.050737], [99.906286, 98.254414], [99.92045, 98.442305], [99.932702, 98.616245], [99.9433, 98.776877], [99.952485, 98.926517], [99.960528, 99.066855], [99.96755, 99.196967], [99.9736, 99.316087], [99.978742, 99.423943], [99.983126, 99.523155], [99.986929, 99.615949], [99.990275, 99.703425], [99.993221, 99.785398], [99.995794, 99.861721], [99.998031, 99.932812], [100, 100]],

        urban: [[0, 0], [0.022476, 0.000211], [0.026364, 0.000483], [0.031079, 0.000832], [0.03683, 0.001286], [0.043812, 0.001867], [0.052123, 0.002596], [0.061977, 0.003523], [0.07392, 0.00472], [0.08836, 0.006245], [0.105627, 0.008192], [0.126649, 0.010745], [0.152991, 0.014185], [0.186685, 0.01887], [0.230466, 0.025421], [0.288337, 0.034602], [0.364009, 0.047302], [0.462362, 0.064833], [0.591815, 0.0896], [0.763717, 0.124292], [0.990265, 0.173076], [1.291577, 0.242086], [1.689361, 0.337485], [2.197829, 0.465168], [2.833156, 0.632983], [3.607935, 0.847553], [4.531058, 1.117227], [5.612064, 1.448077], [6.829389, 1.832426], [8.150496, 2.276607], [9.587093, 2.787319], [11.139531, 3.375891], [12.843232, 4.068491], [14.744, 4.894875], [16.882944, 5.879821], [19.274088, 7.043989], [21.898373, 8.377077], [24.70402, 9.889069], [27.725078, 11.639484], [31.02485, 13.647365], [34.577391, 15.957918], [38.361881, 18.496115], [42.220399, 21.242326], [46.204947, 24.281703], [50.279452, 27.501128], [54.284933, 30.800251], [58.020934, 34.003512], [61.527083, 37.314968], [65.059633, 40.928214], [68.631977, 44.751812], [72.134933, 48.615769], [75.35901, 52.332308], [78.289798, 55.927374], [80.980675, 59.439449], [83.426691, 62.80086], [85.63051, 66.024375], [87.600439, 69.040545], [89.324337, 71.839628], [90.82494, 74.405703], [92.132382, 76.808559], [93.28344, 79.051197], [94.291515, 81.128944], [95.165628, 83.025406], [95.917569, 84.765777], [96.566309, 86.346045], [97.111687, 87.728898], [97.557321, 88.935715], [97.923776, 89.98232], [98.224115, 90.896808], [98.472073, 91.712405], [98.683427, 92.454973], [98.864412, 93.127257], [99.018636, 93.73762], [99.150765, 94.298112], [99.266909, 94.826197], [99.369967, 95.321988], [99.460335, 95.779249], [99.538693, 96.200706], [99.60658, 96.587402], [99.665149, 96.942925], [99.716006, 97.27086], [99.76009, 97.572073], [99.798168, 97.847633], [99.830962, 98.099393], [99.858805, 98.322381], [99.881656, 98.513678], [99.900176, 98.68098], [99.91564, 98.83196], [99.928971, 98.970904], [99.940546, 99.098968], [99.950572, 99.216266], [99.959091, 99.321169], [99.966315, 99.415471], [99.97239, 99.500041], [99.97761, 99.578707], [99.982252, 99.653757], [99.986425, 99.725788], [99.990223, 99.796075], [99.993742, 99.865362], [99.996997, 99.933105], [100, 100]],

        rural: [[0, 0], [0.044856, 0.00021], [0.048153, 0.000449], [0.051764, 0.000737], [0.055907, 0.001092], [0.060801, 0.00155], [0.066762, 0.002138], [0.073899, 0.002894], [0.082612, 0.003876], [0.093168, 0.005148], [0.106164, 0.006835], [0.122508, 0.009095], [0.142886, 0.012069], [0.16758, 0.015833], [0.19669, 0.020566], [0.23118, 0.026579], [0.273098, 0.034447], [0.325019, 0.044958], [0.390807, 0.059161], [0.474177, 0.078318], [0.579565, 0.104359], [0.719638, 0.14226], [0.911325, 0.197784], [1.175054, 0.278915], [1.537895, 0.397967], [2.041596, 0.57646], [2.758826, 0.848809], [3.776691, 1.250019], [5.133703, 1.8048], [6.852621, 2.537016], [8.948744, 3.478047], [11.417648, 4.640509], [14.293846, 6.085098], [17.634387, 7.851123], [21.360828, 9.886831], [25.29956, 12.160142], [29.428878, 14.674388], [33.707138, 17.452533], [38.129755, 20.506174], [42.671778, 23.796002], [47.229102, 27.303349], [51.800588, 31.060857], [56.383771, 35.053496], [60.886558, 39.145526], [65.12792, 43.181575], [69.030354, 47.116849], [72.617033, 51.025646], [75.986887, 54.923636], [79.112304, 58.743632], [81.975561, 62.443223], [84.537139, 65.922443], [86.782817, 69.135506], [88.71901, 72.103335], [90.413815, 74.878966], [91.908817, 77.500639], [93.228911, 79.953304], [94.381653, 82.20716], [95.359352, 84.209133], [96.170082, 85.973719], [96.837248, 87.5051], [97.378991, 88.838761], [97.8273, 90.020506], [98.200135, 91.065991], [98.506646, 91.96714], [98.752685, 92.735267], [98.949784, 93.390185], [99.10766, 93.94721], [99.232528, 94.417506], [99.334335, 94.838423], [99.42121, 95.226477], [99.497035, 95.589049], [99.563629, 95.927413], [99.621726, 96.240868], [99.672192, 96.530566], [99.715746, 96.794464], [99.752893, 97.034788], [99.784601, 97.251679], [99.811139, 97.442528], [99.833203, 97.614678], [99.852181, 97.774104], [99.868723, 97.92227], [99.883153, 98.05955], [99.89576, 98.188276], [99.906951, 98.310902], [99.917064, 98.429897], [99.926265, 98.545001], [99.9346, 98.656238], [99.942191, 98.76409], [99.949086, 98.868769], [99.955426, 98.971691], [99.961279, 99.072938], [99.966677, 99.172455], [99.971673, 99.270765], [99.976302, 99.367541], [99.980575, 99.462525], [99.984496, 99.554946], [99.988063, 99.644199], [99.991314, 99.731953], [99.994366, 99.820708], [99.997264, 99.910225], [100, 100]]
    } 

    // Initial values for the user lines.
    var userLine1Val = 42;
    var userLine2Val = 75;   

    // find the index of the data point with the closest y value.
    // assumes y values are monotonically increasing.
    var findXValue = function (y, data) {
        var l = data.length;
        var temp;
        var d;
        var idx;
        var mid = Math.round(l/2);
        var interval = mid;
        var prevInterval = mid;
        var dist = null;
        var absDist = null;
        var hold = null;
        var ret = null;
        var x, x0, x1, y0, y1, lowidx, hiidx;

        // check to see if we're in range
        if (y > data[l-1][1]) {
            return [l-1, data[l-1]];
        }
        else if (y < data[0][1]) {
            return [0, data[0]];
        }

        for (var i=0; i<l; i++) {
            d = data[mid][1];
            dist = d - y;
            absDist = Math.abs(dist);
            interval = Math.round(interval/2);
            
            if (absDist < hold || hold === null) {
                hold = absDist;
                idx = mid;
            }

            // if we're right on the pont, get out of here
            if (dist === 0) { 
                ret = [idx, data[idx]];
                break;
            }

            // if we've narrowed it down to an interval, 
            // interpolate and get out of here
            else if (prevInterval === 1) {
                // to the right, interpolate -1 to here
                if (dist > 0) {
                    lowidx = idx - 1;
                    hiidx = idx;
                }
                else {
                    lowidx = idx;
                    hiidx = idx + 1;
                }

                x0 = data[lowidx][0];
                x1 = data[hiidx][0];
                y0 = data[lowidx][1];
                y1 = data[hiidx][1];

                x = x0 + (y - y0) / (y1 - y0) * (x1 - x0);

                ret = [idx, [x, y]];
                break;
            }
            // to the right, go left and reduce
            else if (dist > 0) {
                mid -= interval;
            }
            // to the left go right and increase
            else if (dist < 0) {
                mid += interval;
            }

            prevInterval = interval;
        }
        return ret;
    }

    // determine initial values for horizontal and vertical overlay lines.

    var line1x = findXValue(userLine1Val, dataSets.national)[1][0];
    var line2x = findXValue(userLine2Val, dataSets.national)[1][0];;
    var line3y = userLine1Val;
    var line4y = userLine2Val;

    // make the plot
    
    plot1 = $.jqplot("chart1", [dataSets.national, dataSets.urban, dataSets.rural], {
        title: "Lorenz Curve",
        // To control the size of the grid, can set the gridPadding option,

        // gridPadding: {top: 40, bottom: 60, left: 70, right: 50},

        // but must know size of container ahead of time and figure out what paddings
        // you want to get a square grid.
        // Alternatively, can use the gridDimensions option.
        // gridDimensions doesn't get reapplied on replot() because plots
        // _gridPadding attribute is set the first time it is drawn and it
        // won't be overwritten.

        gridDimensions: {height: 290, width: 290},
        seriesColors: ["#4bb2c5", "#c54b62", "#b2c54b"],
        cursor: {
            show: false
        },
        highlighter: {
            show: true,
            showMarker: false,
            useAxesFormatters: false,
            formatString: '%d, %.1f'
        },
        axesDefaults: {
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
        },
        seriesDefaults: {
            showMarker: false
        },
        series: [
            {show: true},
            {show: false},
            {show: false}
        ],
        axes: {
            xaxis: {
                label: '% of Population',
                pad:0
            },
            yaxis: {
                label: '% of Expenditure',
                pad: 0
            }
        },
        grid: {
            drawBorder: false,
            shadow: false,
            // background: 'rgba(0,0,0,0)'  works.
            background: "white"
        },
        canvasOverlay: {
            show: true,
            objects: [,
                {line: {
                    name: "line5",
                    start: [0,0],
                    stop: [100,100],
                    color: "#666666",
                    shadow: false,
                    showTooltip: false,
                    lineWidth: 3
                }},
                {horizontalLine: {
                    name: "line1",
                    y: userLine1Val,
                    color: "#d4c35D",
                    xmin: 0,
                    xmax: line1x,
                    shadow: false,
                    showTooltip: true,
                    tooltipFormatString: "%nPS=%'d",
                    showTooltipPrecision: 0.5
                }},
                {horizontalLine: {
                    name: "line2",
                    y: userLine2Val,
                    color: "#d4c35D",
                    xmin: 0,
                    xmax: line2x,
                    shadow: false,
                    showTooltip: true,
                    tooltipFormatString: "%nPS=%'d",
                    showTooltipPrecision: 0.5
                }},
                {verticalLine: {
                    name: "line3",
                    x: line1x,
                    color: "#d4c35D",
                    ymin: 0,
                    ymax: line3y,
                    shadow: false,
                    showTooltip: true,
                    tooltipFormatString: "PCE=%'d",
                    showTooltipPrecision: 0.5
                }},
                {verticalLine: {
                    name: "line4",
                    x: line2x,
                    color: "#d4c35D",
                    ymin: 0,
                    ymax: line4y,
                    shadow: false,
                    showTooltip: true,
                    tooltipFormatString: "PCE=%'d",
                    showTooltipPrecision: 0.5
                }}
            ]
        }
    });

    // add a date at the bottom.

    var d = new $.jsDate();
    $("div.jqplot-datestamp").html("Generated on "+d.strftime("%v"));

    // initialize form elements
    // set these before attaching event handlers.

    $("input.dataSeries-checkbox").attr("checked", false);
    $("input.dataSeries-checkbox[name=dataSeries_national]").attr("checked", true);

    $("input[type=radio][name=backgroundColor]").attr("checked", false);
    $("input[type=radio][name=backgroundColor][value=white]").attr("checked", true);

    $("input[type=radio][name=lineWidth]").attr("checked", false);
    $('input[type=radio][name=lineWidth][value="2.5"]').attr("checked", true);

    $("input[type=text][name=userLine1]").val(userLine1Val);
    $("input[type=text][name=userLine2]").val(userLine2Val);

    $("input[type=checkbox][name=gridsVertical]").attr("checked", true);
    $("input[type=checkbox][name=gridsHorizontal]").attr("checked", true);
    $("input[type=checkbox][name=cutoffLines]").attr("checked", true);


    // attach event handlers to form elements

    $("input[type=radio][name=backgroundColor]").change(function(){ 
        plot1.grid.background = $(this).val();
        plot1.replot();
    });

    $("input.dataSeries-checkbox").change(function(){ 

        plot1.series[0].show = false;
        plot1.series[1].show = false;
        plot1.series[2].show = false;

        if ($('input[name=dataSeries_national]').get(0).checked === true) {
            plot1.series[0].show = true;
        }

        if ($('input[name=dataSeries_urban]').get(0).checked === true) {
            plot1.series[1].show = true;
        }

        if ($('input[name=dataSeries_rural]').get(0).checked === true) {
            plot1.series[2].show = true;
        }

        // var co = plot1.plugins.canvasOverlay;
        // var x1max = findXValue($("input[type=text][name=userLine1]").val(), dataSets[val])[1][0];
        // co.get("line1").options.xmax = co.get("line3").options.x = x1max;
        // var x2max = findXValue($("input[type=text][name=userLine2]").val(), dataSets[val])[1][0];
        // co.get("line2").options.xmax = co.get("line4").options.x = x2max;

        plot1.replot();
    });

    $("input[type=checkbox][name=gridsVertical]").change(function(){
        plot1.axes.xaxis.tickOptions.showGridline = this.checked;
        plot1.replot();
    });

    $("input[type=checkbox][name=gridsHorizontal]").change(function(){
        plot1.axes.yaxis.tickOptions.showGridline = this.checked;
        plot1.replot();
    });

    $("input[type=checkbox][name=cutoffLines]").change(function(){
        var co = plot1.plugins.canvasOverlay;
        if (this.checked) {
            co.get('line1').options.show = true;
            co.get('line2').options.show = true;
            co.get('line3').options.show = true;
            co.get('line4').options.show = true;
        }
        else {
            co.get('line1').options.show = false;
            co.get('line2').options.show = false;
            co.get('line3').options.show = false;
            co.get('line4').options.show = false;
        }
        plot1.replot();
    });

    $("input[type=text][name=userLine1]").keyup(function(){
        var val = parseFloat($(this).val());

        var co = plot1.plugins.canvasOverlay;

        co.get("line1").options.y = val;
        co.get("line3").options.ymax = val;

        var xx = findXValue(val, plot1.series[0].data)[1][0];
        co.get("line1").options.xmax = co.get("line3").options.x = xx;

        plot1.replot();
    });

    $("input[type=text][name=userLine2]").keyup(function(){
        var val = parseFloat($(this).val());

        var co = plot1.plugins.canvasOverlay;

        co.get("line2").options.y = val;
        co.get("line4").options.ymax = val;
        
        var xx = findXValue(val, plot1.series[0].data)[1][0];
        co.get("line2").options.xmax = co.get("line4").options.x = xx;

        plot1.replot();
    });

    $("input[type=radio][name=lineWidth]").change(function(){
        var val = parseFloat($(this).val()), shadowOffset; 
        plot1.series[0].renderer.shapeRenderer.lineWidth = val;
        plot1.series[0].renderer.shadowRenderer.lineWidth = val;
        // for thick lines, scale shadow offset.
        if (val > 2.5) {
            shadowOffset = 1.25 * (1 + (Math.atan((val/2.5))/0.785398163 - 1)*0.6);
            // var shadow_offset = this.shadowOffset;
        }
        // for skinny lines, don't make such a big shadow.
        else {
            shadowOffset = 1.25*Math.atan((val/2.5))/0.785398163;
        }
        plot1.series[0].renderer.shadowRenderer.offset = shadowOffset;
        for (var i=0, l=plot1.plugins.canvasOverlay.objects.length; i<l; i++) {
            plot1.plugins.canvasOverlay.objects[i].options.lineWidth = val;
        }
        plot1.replot();
    });
    
    
    $("div.chart-container").resizable({delay:20, aspectRatio: true});    

    $("div.chart-container").bind("resize", function(event, ui) {
        plot1.replot();
    });

    $(".jqplot-target").mouseleave(function(){ $('.jqplot-canvasOverlay-tooltip, .jqplot-highlighter-tooltip, .jqpot-cursor-tooltip').hide(); });
});

</script>


<!-- End example scripts -->

<!-- Don't touch this! -->


    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!-- End Don't touch this! -->

<!-- Additional plugins go here -->>
  <script class="include" type="text/javascript" src="../plugins/jqplot.logAxisRenderer.min.js"></script>
  <script class="include" type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
  <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
  <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
  <script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
  <script class="include" type="text/javascript" src="../plugins/jqplot.canvasOverlay.min.js"></script>
  <script class="include" type="text/javascript" src="jquery-ui/js/jquery-ui.min.js"></script>

<!-- End additional plugins -->


	</div>	
	<script type="text/javascript" src="example.min.js"></script>

</body>


</html>