Other miscellaneous goods and services | |
Personal care | |
Education | |
Recreation and culture | |
Communication | |
Transport | |
Health | |
Furnishing household equipment and routine household maintenance | |
Electricity gas and other fuels | |
Water supply and miscellaneous services related to the dwelling | |
Rentals (actual or imputed) and maintenance and repair of the dwelling | |
Clothing and footwear | |
Tobacco and narcotics | |
Alcoholic beverages | |
Non-alcoholic beverages | |
Catering services | |
Other food products | |
Fruits and vegetables | |
Fish and seafood | |
Meat | |
Bread and other cereals | |
Rice |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | $(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: /////////// 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' ); }); }); |
The charts on this page depend on the following files:
< script type = "text/javascript" src = "../jquery.min.js" ></ script > < script type = "text/javascript" src = "../jquery.jqplot.min.js" ></ script > < script type = "text/javascript" src = "jquery-ui/js/jquery-ui.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.canvasTextRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.canvasAxisLabelRenderer.min.js" ></ script > < link rel = "stylesheet" type = "text/css" hrf = "../jquery.jqplot.min.css" /> < link rel = "stylesheet" type = "text/css" hrf = "jquery-ui/css/smoothness/jquery-ui.min.css" /> |