<!DOCTYPE html> <html> <head> <title>Area Chart</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="index.html">Previous</a> <a href="./">Examples</a> <a href="kcp_area2.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; border-collapse: collapse; } td.jqplot-table-legend-label { width: 20em; } div.jqplot-table-legend-swatch { border-width: 2px 6px; } div.jqplot-table-legend-swatch-outline { border: none; } tr.jqplot-table-legend td { padding: 2px; } .legend-row-highlighted { background-color: #666666; } .legend-text-highlighted { color: #ffffff; } #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(){ /////////// // Function to parse a csv file. // Note, this IS NOT a complete parser. It does not handle quoted text. // It is implemented to demonstrate functionality from within JavaScript. // If a full csv parser is needed, check out: // 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); for (var n=0, nl=ticks.length; n<nl; n++) { ticks[n] = [n+1, ticks[n]]; } } else { labels.push(line[0]); values.push(line.slice(1, line.length)); temp = values[values.length-1]; // make a copy of temp temp = temp.slice(0, temp.length); for (var n=0, nl=temp.length; n<nl; n++) { values[values.length-1][n] = parseFloat(temp[n]); } } } } ret = [values, labels, ticks]; } }); return ret; }; var jsonurl = "./KCPsample4.csv"; var infos = parseCSVFile(jsonurl); // area plots are made with all series except last 2 data = infos[0].slice(0, infos[0].length-2); labels = infos[1].slice(0, infos[1].length-2); ticks = infos[2]; // make the plot plot1 = $.jqplot('chart1', data, { title: 'Area Plot', stackSeries: true, seriesDefaults: { showMarker: false, fill: true, fillAndStroke: true }, legend: { show: true, placement: 'outsideGrid', labels: labels, location: 'ne', rowSpacing: '0px' }, axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, axes: { xaxis: { pad: 0, ticks: ticks, label: 'Population Vingtile', tickOptions: { showGridline: false } }, yaxis: { min: 0, max: 100, label: 'Share of Item in Total Expenditure (%)', tickOptions: { showGridline: false, suffix: '%' } } }, 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(); }); $('#chart1').bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) { var idx = 21 - seriesIndex $('tr.jqplot-table-legend').removeClass('legend-row-highlighted'); $('tr.jqplot-table-legend').children('.jqplot-table-legend-label').removeClass('legend-text-highlighted'); $('tr.jqplot-table-legend').eq(idx).addClass('legend-row-highlighted'); $('tr.jqplot-table-legend').eq(idx).children('.jqplot-table-legend-label').addClass('legend-text-highlighted'); }); $('#chart1').bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) { $('tr.jqplot-table-legend').removeClass('legend-row-highlighted'); $('tr.jqplot-table-legend').children('.jqplot-table-legend-label').removeClass('legend-text-highlighted'); }); }); </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="jquery-ui/js/jquery-ui.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> <!-- End additional plugins --> </div> <script type="text/javascript" src="example.min.js"></script> </body> </html>