<!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>></span>Home</a> <a class="nav" href="../../../docs/"><span>></span>Docs</a> <a class="nav" href="../../download/"><span>></span>Download</a> <a class="nav" href="../../../info.php"><span>></span>Info</a> <a class="nav" href="../../../donate.php"><span>></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>