public/javascripts/jqplot/examples/kcp_engel.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Engel Curves</title>
   7
   8     <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
   9     <link rel="stylesheet" type="text/css" href="examples.min.css" />
  10     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
  11     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
  12
  13   <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
  14     <script class="include" type="text/javascript" src="../jquery.min.js"></script>
  15
  16
  17 </head>
  18 <body>
  19     <div class="logo">
  20    <div class="nav">
  21    <a class="nav" href="../../../index.php"><span>&gt;</span>Home</a>
  22    <a class="nav"  href="../../../docs/"><span>&gt;</span>Docs</a>
  23    <a class="nav"  href="../../download/"><span>&gt;</span>Download</a>
  24    <a class="nav" href="../../../info.php"><span>&gt;</span>Info</a>
  25    <a class="nav"  href="../../../donate.php"><span>&gt;</span>Donate</a>
  26    </div>
  27 </div>
  28     <div class="example-content">
  29
  30     <div class="example-nav">
  31   <a href="kcp_cdf.html">Previous</a> <a href="./">Examples</a> <a href="kcp_lorenz.html">Next</a></div>
  32
  33
  34 <!-- Example scripts go here -->
  35
  36
  37   <link class="include" type="text/css" href="jquery-ui/css/smoothness/jquery-ui.min.css" rel="Stylesheet" />
  38
  39   <style type="text/css">
  40
  41     .chart-container {
  42         border: 1px solid darkblue;
  43         padding: 30px 0px 30px 30px;
  44         width: 900px;
  45         height: 400px;
  46
  47     }
  48
  49     table.jqplot-table-legend {
  50         font-size: 0.65em;
  51         line-height: 1em;
  52         margin: 0px 0px 10px 15px;
  53     }
  54
  55     td.jqplot-table-legend-label {
  56       width: 20em;
  57     }
  58
  59     div.jqplot-table-legend-swatch {
  60         border-width: 1.5px 6px;
  61     }
  62
  63     div.jqplot-table-legend-swatch-outline {
  64         border: none;
  65     }
  66
  67     #chart1 {
  68         width: 96%;
  69         height: 96%;
  70     }
  71
  72     .jqplot-datestamp {
  73       font-size: 0.8em;
  74       color: #777;
  75 /*      margin-top: 1em;
  76       text-align: right;*/
  77       font-style: italic;
  78       position: absolute;
  79       bottom: 15px;
  80       right: 15px;
  81     }
  82
  83     td.controls li {
  84         list-style-type: none;
  85     }
  86
  87     td.controls ul {
  88         margin-top: 0.5em;
  89         padding-left: 0.2em;
  90     }
  91
  92     pre.code {
  93         margin-top: 45px;
  94         clear: both;
  95     }
  96
  97   </style>
  98
  99     <div class="chart-container">
 100         <div id="chart1"></div>
 101         <div class="jqplot-datestamp"></div>
 102     </div>
 103
 104     <pre class="code brush:js"></pre>
 105
 106   <script class="code" type="text/javascript">
 107 $(document).ready(function(){
 108
 109     ///////////
 110     // This is NOT a full csv parser.
 111     // It does not handle quoated text.
 112     // It is for demonstration only.
 113     // For a full featured csv parser, look at:
 114     //
 115     // http://www.bennadel.com/blog/1504-Ask-Ben-Parsing-CSV-Strings-With-Javascript-Exec-Regular-Expression-Command.htm
 116     ///////////
 117
 118     var parseCSVFile = function(url) {
 119         var ret = null;
 120         var labels = [];
 121         var ticks = [];
 122         var values = [];
 123         var temp;
 124         $.ajax({
 125             // have to use synchronous here, else returns before data is fetched
 126             async: false,
 127             url: url,
 128             dataType:"text",
 129             success: function(data) {
 130                 // parse csv data
 131                 var lines = data.split('\n');
 132                 var line;
 133                 for (var i=0, l=lines.length; i<l; i++) {
 134                     line = lines[i].replace('\r', '').split(',');
 135                     // console.log(line);
 136                     if (line.length > 1) {
 137                         if (i === 0) {
 138                           ticks = line.slice(1, line.length);
 139                         }
 140                         else {
 141                           labels.push(line[0]);
 142                           values.push(line.slice(1, line.length));
 143                           temp = values[values.length-1];
 144                           for (n in temp) {
 145                             values[values.length-1][n] = parseFloat(temp[n]);
 146                           }
 147                         }
 148                     }
 149                 }
 150                 ret = [values, labels, ticks];
 151             }
 152         });
 153         return ret;
 154     };
 155
 156     var jsonurl = "./KCPsample4.csv";
 157
 158     var infos = parseCSVFile(jsonurl);
 159     var data = infos[0];
 160     var labels = infos[1];
 161     var ticks = infos[2];
 162
 163     // make the plot
 164
 165     plot1 = $.jqplot("chart1", data, {
 166         title: "Engel Curves",
 167         animate: true,
 168         axesDefaults: {
 169             labelRenderer: $.jqplot.CanvasAxisLabelRenderer
 170         },
 171         seriesDefaults: {
 172             showMarker: false
 173         },
 174         legend: {
 175             show: true,
 176             renderer: $.jqplot.EnhancedLegendRenderer,
 177             placement: "outsideGrid",
 178             labels: labels,
 179             location: "ne",
 180             rowSpacing: "0px",
 181             rendererOptions: {
 182                 // set to true to replot when toggling series on/off
 183                 // set to an options object to pass in replot options.
 184                 seriesToggle: 'normal',
 185                 seriesToggleReplot: {resetAxes: true}
 186             }
 187         },
 188         axes: {
 189             xaxis: {
 190                 label: 'Population Percentile',
 191                 pad: 1.01,
 192                 tickOptions: {
 193                     showGridline: false
 194                 }
 195             },
 196             yaxis: {
 197                 label: 'Share in Total Expenditure (%)',
 198                 tickOptions: {
 199                     suffix: '%'
 200                 },
 201                 padMin: 0,
 202                 padMax: 1.05
 203             }
 204         },
 205         grid: {
 206             drawBorder: false,
 207             shadow: false,
 208             // background: 'rgba(0,0,0,0)'  works to make transparent.
 209             background: "white"
 210         }
 211     });
 212
 213     // add a date at the bottom.
 214
 215     var d = new $.jsDate();
 216     $("div.jqplot-datestamp").html("Generated on "+d.strftime("%v"));
 217
 218     // make it resizable.
 219
 220     $("div.chart-container").resizable({delay:20});
 221
 222     $("div.chart-container").bind("resize", function(event, ui) {
 223         plot1.replot();
 224     });
 225 });
 226
 227 </script>
 228
 229
 230 <!-- End example scripts -->
 231
 232 <!-- Don't touch this! -->
 233
 234
 235     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 236     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 237     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 238     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 239 <!-- End Don't touch this! -->
 240
 241 <!-- Additional plugins go here -->>
 242   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
 243   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
 244   <script class="include" type="text/javascript" src="../plugins/jqplot.enhancedLegendRenderer.min.js"></script>
 245   <script class="include" type="text/javascript" src="jquery-ui/js/jquery-ui.min.js"></script>
 246
 247 <!-- End additional plugins -->
 248
 249
 250         </div>
 251         <script type="text/javascript" src="example.min.js"></script>
 252
 253 </body>
 254
 255
 256 </html>