Rice | |
Bread and other cereals | |
Meat | |
Fish and seafood | |
Fruits and vegetables | |
Other food products | |
Catering services | |
Non-alcoholic beverages | |
Alcoholic beverages | |
Tobacco and narcotics | |
Clothing and footwear | |
Rentals (actual or imputed) and maintenance and repair of the dwelling | |
Water supply and miscellaneous services related to the dwelling | |
Electricity gas and other fuels | |
Furnishing household equipment and routine household maintenance | |
Health | |
Transport | |
Communication | |
Recreation and culture | |
Education | |
Personal care | |
Other miscellaneous goods and services | |
Food and non-alcoholic beverages | |
Non food |
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 | $(document).ready( function (){ /////////// // This is NOT a full csv parser. // It does not handle quoated text. // It is for demonstration only. // For a full featured csv parser, look at: // /////////// 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); } else { labels.push(line[0]); values.push(line.slice(1, line.length)); temp = values[values.length-1]; for (n in temp) { values[values.length-1][n] = parseFloat(temp[n]); } } } } ret = [values, labels, ticks]; } }); return ret; }; var jsonurl = "./KCPsample4.csv" ; var infos = parseCSVFile(jsonurl); var data = infos[0]; var labels = infos[1]; var ticks = infos[2]; // make the plot plot1 = $.jqplot( "chart1" , data, { title: "Engel Curves" , animate: true , axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, seriesDefaults: { showMarker: false }, legend: { show: true , renderer: $.jqplot.EnhancedLegendRenderer, placement: "outsideGrid" , labels: labels, location: "ne" , rowSpacing: "0px" , rendererOptions: { // set to true to replot when toggling series on/off // set to an options object to pass in replot options. seriesToggle: 'normal' , seriesToggleReplot: {resetAxes: true } } }, axes: { xaxis: { label: 'Population Percentile' , pad: 1.01, tickOptions: { showGridline: false } }, yaxis: { label: 'Share in Total Expenditure (%)' , tickOptions: { suffix: '%' }, padMin: 0, padMax: 1.05 } }, 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(); }); }); |
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 = "../plugins/jqplot.canvasTextRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.canvasAxisLabelRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.enhancedLegendRenderer.min.js" ></ script > < script type = "text/javascript" src = "jquery-ui/js/jquery-ui.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" /> |