kcp_engel.html 7.14 KB

Edit Raw Blame History

<!DOCTYPE html>

<html>
<head>

	<title>Engel 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_cdf.html">Previous</a> <a href="./">Examples</a> <a href="kcp_lorenz.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 0px 30px 30px;
        width: 900px;
        height: 400px;

    }

    table.jqplot-table-legend {
        font-size: 0.65em;
        line-height: 1em;
        margin: 0px 0px 10px 15px;
    }

    td.jqplot-table-legend-label {
      width: 20em;
    }

    div.jqplot-table-legend-swatch {
        border-width: 1.5px 6px;
    }

    div.jqplot-table-legend-swatch-outline {
        border: none;
    }

    #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>

    <div class="chart-container">
        <div id="chart1"></div>
        <div class="jqplot-datestamp"></div>
    </div>

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

  <script class="code" type="text/javascript">
$(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();
    });
});

</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.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.enhancedLegendRenderer.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>