<!DOCTYPE html> <html> <head> <title>Area Chart 2</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_area.html">Previous</a> <a href="./">Examples</a> <a href="kcp_cdf.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 { border: 0px; } td.jqplot-table-legend-label { padding: 0.25em; } td.jqplot-table-legend-label + td.jqplot-table-legend-swatch { padding-left: 1.5em; } div.jqplot-table-legend-swatch { border-width: 4px 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(){ var labels = ['Rural', 'Urban']; // make the plot var makePlot = function (data, textStatus, jqXHR) { plot1 = $.jqplot('chart1', [data.rural, data.urban], { title: 'Contribution of Urban and Rural Population to National Percentiles (edited data)', stackSeries: true, seriesColors: ['#77933C', '#B9CDE5'], seriesDefaults: { showMarker: false, fill: true, fillAndStroke: true }, legend: { show: true, renderer: $.jqplot.EnhancedLegendRenderer, rendererOptions: { numberRows: 1 }, placement: 'outsideGrid', labels: labels, location: 's' }, axes: { xaxis: { pad: 0, min: 1, max: 100, label: 'Population Percentile', labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickInterval: 3, tickOptions: { showGridline: false } }, yaxis: { min: 0, max: 1, label: 'Percentage of Population', labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickOptions: { formatter: $.jqplot.PercentTickFormatter, showGridline: false, formatString: '%d%%' } } }, grid: { drawBorder: false, shadow: false, // background: 'rgba(0,0,0,0)' works to make transparent. background: 'white' } }); }; // data is in json format in plain file. // Each series is represented by a 1-D array of y values. // X values will be added by jqPlot and will start 1 by default. $.getJSON('kcp_area2.json', '', makePlot); // 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.enhancedLegendRenderer.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="jquery-ui/js/jquery-ui.min.js"></script> <!-- End additional plugins --> </div> <script type="text/javascript" src="example.min.js"></script> </body> </html>