public/javascripts/jqplot/examples/kcp_area2.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5
   6         <title>Area Chart 2</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_area.html">Previous</a> <a href="./">Examples</a> <a href="kcp_cdf.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         border: 0px;
  51     }
  52
  53     td.jqplot-table-legend-label {
  54       padding: 0.25em;
  55     }
  56
  57     td.jqplot-table-legend-label + td.jqplot-table-legend-swatch {
  58         padding-left: 1.5em;
  59     }
  60
  61     div.jqplot-table-legend-swatch {
  62         border-width: 4px 6px;
  63     }
  64
  65     div.jqplot-table-legend-swatch-outline {
  66         border: none;
  67     }
  68
  69     #chart1 {
  70         width: 96%;
  71         height: 96%;
  72     }
  73
  74     .jqplot-datestamp {
  75       font-size: 0.8em;
  76       color: #777;
  77 /*      margin-top: 1em;
  78       text-align: right;*/
  79       font-style: italic;
  80       position: absolute;
  81       bottom: 15px;
  82       right: 15px;
  83     }
  84
  85     td.controls li {
  86         list-style-type: none;
  87     }
  88
  89     td.controls ul {
  90         margin-top: 0.5em;
  91         padding-left: 0.2em;
  92     }
  93
  94     pre.code {
  95         margin-top: 45px;
  96         clear: both;
  97     }
  98
  99   </style>
 100
 101       <div class="chart-container">
 102         <div id="chart1"></div>
 103         <div class="jqplot-datestamp"></div>
 104     </div>
 105
 106     <pre class="code brush:js"></pre>
 107
 108   <script class="code" type="text/javascript">
 109 $(document).ready(function(){
 110
 111     var labels = ['Rural', 'Urban'];
 112
 113     // make the plot
 114
 115     var makePlot = function (data, textStatus, jqXHR) {
 116         plot1 = $.jqplot('chart1', [data.rural, data.urban], {
 117             title: 'Contribution of Urban and Rural Population to National Percentiles (edited data)',
 118             stackSeries: true,
 119             seriesColors: ['#77933C', '#B9CDE5'],
 120             seriesDefaults: {
 121                 showMarker: false,
 122                 fill: true,
 123                 fillAndStroke: true
 124             },
 125             legend: {
 126                 show: true,
 127                 renderer: $.jqplot.EnhancedLegendRenderer,
 128                 rendererOptions: {
 129                     numberRows: 1
 130                 },
 131                 placement: 'outsideGrid',
 132                 labels: labels,
 133                 location: 's'
 134             },
 135             axes: {
 136                 xaxis: {
 137                     pad: 0,
 138                     min: 1,
 139                     max: 100,
 140                     label: 'Population Percentile',
 141                     labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
 142                     tickInterval: 3,
 143                     tickOptions: {
 144                         showGridline: false
 145                     }
 146                 },
 147                 yaxis: {
 148                     min: 0,
 149                     max: 1,
 150                     label: 'Percentage of Population',
 151                     labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
 152                     tickOptions: {
 153                       formatter: $.jqplot.PercentTickFormatter,
 154                       showGridline: false,
 155                       formatString: '%d%%'
 156                     }
 157                 }
 158             },
 159             grid: {
 160                 drawBorder: false,
 161                 shadow: false,
 162                 // background: 'rgba(0,0,0,0)'  works to make transparent.
 163                 background: 'white'
 164             }
 165         });
 166     };
 167
 168     // data is in json format in plain file.
 169     // Each series is represented by a 1-D array of y values.
 170     // X values will be added by jqPlot and will start 1 by default.
 171     $.getJSON('kcp_area2.json', '', makePlot);
 172
 173     // add a date at the bottom.
 174
 175     var d = new $.jsDate();
 176     $('div.jqplot-datestamp').html('Generated on '+d.strftime('%v'));
 177
 178     // make it resizable.
 179
 180     $("div.chart-container").resizable({delay:20});
 181
 182     $('div.chart-container').bind('resize', function(event, ui) {
 183         plot1.replot();
 184     });
 185 });
 186
 187 </script>
 188
 189
 190 <!-- End example scripts -->
 191
 192 <!-- Don't touch this! -->
 193
 194
 195     <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
 196     <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
 197     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
 198     <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
 199 <!-- End Don't touch this! -->
 200
 201 <!-- Additional plugins go here -->
 202
 203   <script class="include" type="text/javascript" src="../plugins/jqplot.enhancedLegendRenderer.min.js"></script>
 204   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
 205   <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
 206   <script class="include" type="text/javascript" src="jquery-ui/js/jquery-ui.min.js"></script>
 207
 208 <!-- End additional plugins -->
 209
 210
 211         </div>
 212         <script type="text/javascript" src="example.min.js"></script>
 213
 214 </body>
 215
 216
 217 </html>