Last active
October 22, 2015 17:51
-
-
Save yan2014/b94909715417107cb68d to your computer and use it in GitHub Desktop.
Week2: High Charts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| row | White | African American | |
|---|---|---|---|
| 32-40 | 204130.93 | 61454.078 | |
| 38-46 | 383043.64 | 122756.27 | |
| 41-49 | 410386.43 | 99313.841 | |
| 44-52 | 493450.35 | 109144.06 | |
| 47-55 | 671449.03 | 137073.24 | |
| 50-58 | 974449.18 | 171990.58 | |
| 53-61 | 1155156.3 | 265305.89 | |
| 56-64 | 1261739.3 | 249652.44 | |
| 59-67 | 1203205 | 172400.03 | |
| 62-70 | 1217942.5 | 115238.17 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> | |
| <title>Highcharts Extract Example</title> | |
| <link rel="stylesheet" href="main.css"> | |
| <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script> | |
| <script type='text/javascript' src='http://code.highcharts.com/highcharts.js'></script> | |
| <script src="http://code.highcharts.com/highcharts-more.js"></script> | |
| <script src="http://code.highcharts.com/modules/data.js"></script> | |
| <script src="http://code.highcharts.com/modules/exporting.js"></script> | |
| <!-- Code example for class extracted from http://datatools.urban.org/Features/wealth-inequality-charts/ with code from Tim Meko and Ben Chartoff --> | |
| </head> | |
| <body> | |
| <div class='aside-content'> | |
| <div id='racial-wealth-gap-mean' class='chart show'></div> | |
| <div id='racial-wealth-gap-median' class='chart hide'></div> | |
| <div class='btn-group clearfix'> | |
| <p></p> | |
| <button id='racegap' class='btn autocompare'>Show Median</button> | |
| </div> | |
| <p class='chart-notes'><b>Source:</b> Survey of Consumer Finances 1983–2013. <b>Example Code Source:</b> <a href='http://datatools.urban.org/Features/wealth-inequality-charts/'>Urban Institute</a></p> | |
| <p class='chart-notes'><b>Notes:</b> 2013 dollars. Hispanic sample size too small to show. Age is defined as the age of the household head. In 2013, these people were age 62–70. In 1983, ages 32–40.</p> | |
| </div> | |
| <div style="display:none"> | |
| <!-- Source: http://or.water.usgs.gov/cgi-bin/grapher/graph_windrose.pl --> | |
| </div> | |
| </body> | |
| <script type='text/javascript' src='main.js'></script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $.get('data.csv', function(data) { | |
| $(function() { | |
| // 2 charts created | |
| //chart5-mean | |
| $('#racial-wealth-gap-mean').highcharts({ | |
| data: { | |
| csv: data | |
| }, | |
| chart: { | |
| polar: true, | |
| type: 'column' | |
| }, | |
| title: { | |
| text: 'Average Family Wealth for Those Born 1943-51', | |
| align:'left' | |
| }, | |
| subtitle: { | |
| text: '', | |
| align:'left' | |
| }, | |
| pane: { | |
| size: '85%' | |
| }, | |
| legend: { | |
| align: 'right', | |
| verticalAlign: 'top', | |
| y: 100, | |
| layout: 'vertical' | |
| }, | |
| xAxis: { | |
| tickmarkPlacement: 'on' | |
| }, | |
| yAxis: { | |
| min: 0, | |
| endOnTick: false, | |
| showLastLabel: true, | |
| title: { | |
| text: '' | |
| }, | |
| labels: { | |
| formatter: function () { | |
| return this.value; | |
| } | |
| }, | |
| reversedStacks: false | |
| }, | |
| tooltip: { | |
| }, | |
| plotOptions: { | |
| series: { | |
| stacking: 'normal', | |
| shadow: false, | |
| groupPadding: 0, | |
| pointPlacement: 'on' | |
| } | |
| } | |
| }); | |
| }) | |
| // this one is hidden by default: | |
| //chart5-median | |
| $('#racial-wealth-gap-median').highcharts({ | |
| chart: { | |
| type: 'area' | |
| }, | |
| title: { | |
| text: 'Median Family Wealth for Those Born 1943-51', | |
| align:'left' | |
| }, | |
| subtitle: { | |
| text: '', | |
| align:'left' | |
| }, | |
| xAxis: { | |
| categories: ['32-40', '38-46', '41-49', '44-52', '47-55', '50-58', '53-61', '56-64', '59-67', '62-70'], | |
| tickmarkPlacement: 'on', | |
| title: { | |
| enabled: false | |
| } | |
| }, | |
| yAxis: { | |
| title: { | |
| text: 'people' | |
| } | |
| }, | |
| tooltip: { | |
| pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>', | |
| shared: true | |
| }, | |
| plotOptions: { | |
| area: { | |
| stacking: 'percent', | |
| lineColor: '#ffffff', | |
| lineWidth: 1, | |
| marker: { | |
| lineWidth: 1, | |
| lineColor: '#ffffff' | |
| } | |
| } | |
| }, | |
| series: [ | |
| { | |
| name: 'White', | |
| data: [98138.984, 158343.22, 132093.3, 174025.03, 213520.53, 265532.31, 397195.06, 353568.31, 302539.72, 331700] | |
| }, | |
| { | |
| name: 'African American', | |
| data: [13439.467, 4862.3657, 40196.652, 54734.781, 25688.508, 62180.785, 50854.777, 120925.08, 38795.387, 46200] | |
| }] | |
| }) | |
| // Handle the toggle button with class setting: | |
| document.getElementById('racial-wealth-gap-median').className = 'chart hide'; | |
| $('#racegap').click(function () { | |
| var racegap = document.getElementById('racial-wealth-gap-mean'); | |
| if (racegap.className === 'chart show') { | |
| document.getElementById('racial-wealth-gap-mean').className = 'chart hide'; | |
| document.getElementById('racial-wealth-gap-median').className = 'chart show'; | |
| document.getElementById('racegap').innerHTML = 'Show Average' | |
| } else { | |
| document.getElementById('racegap').innerHTML = 'Show Median' | |
| document.getElementById('racial-wealth-gap-median').className = 'chart hide'; | |
| document.getElementById('racial-wealth-gap-mean').className = 'chart show'; | |
| } | |
| }); }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment