Last active
September 7, 2015 23:48
-
-
Save DimsumPanda/5020d8468e01c905aa07 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
| <html> | |
| <head> | |
| <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> | |
| <title>Highcharts Extract Example</title> | |
| <!-- Code example for class extracted from http://datatools.urban.org/Features/wealth-inequality-charts/ with code from Tim Meko and Ben Chartoff --> | |
| <style> | |
| body { | |
| font: 16px/24px'Lato', Helvetica, Helvetica Neue, Arial; | |
| width: 90%; | |
| } | |
| .aside-content { | |
| background: #f9f9f9; | |
| margin: 20px; | |
| width: 600px; | |
| } | |
| .btn { | |
| display: inline; | |
| font-size: 14px; | |
| padding: 14px; | |
| cursor: pointer; | |
| border: none; | |
| color: white; | |
| background-color: #1696d2; | |
| display: block; | |
| line-height: 12px; | |
| text-transform: uppercase; | |
| text-align: center; | |
| float: left; | |
| margin-right: 1px; | |
| } | |
| .chart { | |
| margin: 0 auto; | |
| margin-top: 0px; | |
| position: relative; | |
| width: 600px; | |
| height: 70%; | |
| } | |
| .btn:hover { | |
| background-color: #000; | |
| } | |
| .clearfix:before, | |
| .clearfix:after { | |
| content: ' '; | |
| display: table; | |
| } | |
| .clearfix:after { | |
| clear: both; | |
| } | |
| .clearfix { | |
| *zoom: 1; | |
| } | |
| .hide { | |
| display: none; | |
| } | |
| .show { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='aside-content'> | |
| <div id='income-mortality-scatterplot' class='chart show'></div> | |
| <div id='income-mortality-linegraph' class='chart hide'></div> | |
| <div class='btn-group clearfix'> | |
| <button id='incomegap' class='btn autocompare'>Show Linechart</button> | |
| </div> | |
| <p class='chart-notes'><b>Source:</b> World Health Organization <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> Child mortality has declined in all income levels.</p> | |
| </div> | |
| </body> | |
| <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 type='text/javascript'> | |
| // style theme | |
| Highcharts.theme = { | |
| colors: ['#0096d2', '#00578b', '#fcb918', '#f47d20', '#6d6d6d', '#c6c6c6', '#ec008c', | |
| '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'], | |
| chart: { | |
| backgroundColor: null, | |
| style: { | |
| fontFamily: 'Univers, sans-serif' | |
| }, | |
| marginTop: 0, | |
| marginBottom: 40 | |
| }, | |
| title: { | |
| style: { | |
| fontSize: '18px', | |
| color: '#5a5a5a' | |
| }, | |
| align: 'left' | |
| }, | |
| tooltip: { | |
| backgroundColor: '#000000', | |
| borderWidth: 0, | |
| shape: 'square', | |
| style: { | |
| color: '#ffffff', | |
| fontWeight: 'bold' | |
| } | |
| }, | |
| subtitle: { | |
| align: 'left' | |
| }, | |
| legend: { | |
| itemStyle: { | |
| fontWeight: 'bold', | |
| fontSize: '13px' | |
| } | |
| }, | |
| exporting: { | |
| enabled: false | |
| }, | |
| credits: { | |
| enabled: false | |
| }, | |
| xAxis: { | |
| gridLineWidth: 0, | |
| gridLineColor: 'rgba(219,219,216,0.5)', | |
| labels: { | |
| style: { | |
| fontSize: '12px' | |
| } | |
| }, | |
| tickmarkPlacement: 'on' | |
| }, | |
| yAxis: { | |
| minorTickInterval: 'none', | |
| gridLineColor: 'rgba(219,219,216,0.5)', | |
| title: { | |
| }, | |
| labels: { | |
| style: { | |
| fontSize: '12px' | |
| } | |
| } | |
| }, | |
| plotOptions: { | |
| candlestick: { | |
| lineColor: '#404048' | |
| }, | |
| area: { | |
| fillOpacity: 0.5 | |
| }, | |
| series: { | |
| marker: { | |
| enabled: false, | |
| radius: 3, | |
| lineWidth: 2, | |
| symbol: 'circle', | |
| fillColor: '#ffffff', | |
| lineColor: null | |
| }, | |
| connectNulls: true | |
| } | |
| }, | |
| }; | |
| // Apply the theme | |
| Highcharts.setOptions(Highcharts.theme); | |
| $(function() { | |
| // 2 charts created | |
| //chart5-mean | |
| $('#income-mortality-scatterplot').highcharts({ | |
| chart: { | |
| marginTop: 100, | |
| marginBottom: 40 | |
| }, | |
| plotOptions: { | |
| series: { | |
| marker: { | |
| enabled: true | |
| }, | |
| dataLabels: { | |
| enabled: false, | |
| align: 'right', | |
| x: 0, | |
| y: -5, | |
| formatter: function () { | |
| if ((this.point.x == this.series.data.length - 1) || (this.point.x == 0)) { | |
| return '$' + Highcharts.numberFormat(this.y, 0, ','); | |
| } else { | |
| return null; | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| title: { | |
| text: 'Average Maternal vs. Average Under-Five Mortality Rate (Measured in Thousands)' | |
| }, | |
| subtitle: { | |
| text: '', | |
| x: 0, | |
| y: 35 | |
| }, | |
| xAxis: { | |
| gridLineWidth: '0', | |
| lineWidth: 2, | |
| tickInterval: 4, | |
| categories: ['1990', '1995', '2000', '2005', '2010', '2013'], | |
| plotLines: [{ | |
| value: 0, | |
| width: 0 | |
| }], | |
| labels: { | |
| step: 0, | |
| x: 0, | |
| y: 20 | |
| } | |
| }, | |
| yAxis: { | |
| title: { | |
| text: '' | |
| }, | |
| min: 0, | |
| startOnTick: false, | |
| labels: { | |
| format: '{value:,.0f}' | |
| } | |
| }, | |
| tooltip: { | |
| shared: true, | |
| formatter: function () { | |
| var s = ''; | |
| $.each(this.points, function () { | |
| s += '<b>' + this.series.name + ', ' + this.series.options.cohortAges[this.point.x] + ':</b> ' + | |
| Highcharts.numberFormat(this.y, 0, ',') + '<br>'; | |
| }); | |
| return s; | |
| } | |
| }, | |
| credits: { | |
| enabled: false, | |
| text: '', | |
| href: 'http://www.neighborhoodinfodc.org' | |
| }, | |
| legend: { | |
| enabled: true, | |
| floating: 'true', | |
| align: 'center', | |
| verticalAlign: 'left', | |
| layout: 'horizontal', | |
| borderWidth: 0, | |
| itemDistance: 9, | |
| y: 40 | |
| }, | |
| series: [ | |
| { | |
| name: 'Average Maternal Mortality', | |
| data: [166.3701657,184.1657459,220.2209945,266.6906077,309.6464088,344.4143646], | |
| cohortAges: ['1990', '1995', '2000', '2005', '2010', '2013'] | |
| }, | |
| { | |
| name: 'Average Under-Five Mortality', | |
| color: '#ec008c', | |
| data: [3167.25,2727.25,2436.25,2054.75,1733,1571.5], | |
| cohortAges: ['1990', '1995', '2000', '2005', '2010', '2013'] | |
| }] | |
| }); //end chart racial weawlth gap | |
| // this one is hidden by default: | |
| //chart5-median | |
| $('#income-mortality-linegraph').highcharts({ | |
| chart: { | |
| marginTop: 100, | |
| marginBottom: 40 | |
| }, | |
| plotOptions: { | |
| series: { | |
| marker: { | |
| enabled: true | |
| }, | |
| dataLabels: { | |
| enabled: false, | |
| align: 'right', | |
| x: 0, | |
| y: -5, | |
| formatter: function () { | |
| if ((this.point.x == this.series.data.length - 1) || (this.point.x == 0)) { | |
| return '$' + Highcharts.numberFormat(this.y, 0, ','); | |
| } else { | |
| return null; | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| title: { | |
| text: 'Mortality Rates of Children Under Five by Income Levels, measured in thousands' | |
| }, | |
| subtitle: { | |
| text: '', | |
| x: 0, | |
| y: 35 | |
| }, | |
| xAxis: { | |
| gridLineWidth: '0', | |
| lineWidth: 2, | |
| tickInterval: 4, | |
| categories: ['1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013'], | |
| plotLines: [{ | |
| value: 0, | |
| width: 0 | |
| }], | |
| labels: { | |
| step: 0, | |
| x: 0, | |
| y: 20 | |
| } | |
| }, | |
| yAxis: { | |
| title: { | |
| text: '' | |
| }, | |
| min: 0, | |
| startOnTick: false, | |
| labels: { | |
| format: '{value:,.0f}' | |
| } | |
| }, | |
| tooltip: { | |
| shared: true, | |
| formatter: function () { | |
| var s = ''; | |
| $.each(this.points, function () { | |
| s += '<b>' + this.series.name + ', ' + this.series.options.cohortAges[this.point.x] + ':</b> ' + | |
| Highcharts.numberFormat(this.y, 0, ',') + '<br>'; | |
| }); | |
| return s; | |
| } | |
| }, | |
| credits: { | |
| enabled: false, | |
| text: '', | |
| href: 'http://www.neighborhoodinfodc.org' | |
| }, | |
| legend: { | |
| enabled: true, | |
| floating: 'true', | |
| align: 'center', | |
| verticalAlign: 'left', | |
| layout: 'horizontal', | |
| borderWidth: 0, | |
| itemDistance: 9, | |
| y: 40 | |
| }, | |
| series: [ | |
| { | |
| name: 'Low-income', | |
| data: [3209,3208,3207,3204,3216,3198,3181,3173,3158,3118,3067,3004,2919,2821,2718,2619,2523,2430,2341,2259,2214,2117,2049,2000], | |
| cohortAges: ['1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013'] | |
| }, | |
| { | |
| name: 'Lower-middle-income', | |
| data: [6475,6362,6234,6096,5957,5828,5699,5570,5438,5297,5154,5009,4858,4708,4557,4412,4274,4144,4014,3886,3771,3659,3554,3456], | |
| cohortAges: ['1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013'] | |
| }, | |
| { | |
| name: 'Upper-middle-income', | |
| data: [2766,2616,2395,2144,1909,1726,1593,1517,1475,1440,1392,1332,1266,1196,1130,1072,1022,976,933,892,844,805,768,736], | |
| cohortAges: ['1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013'] | |
| }, | |
| { | |
| name: 'High Income', | |
| color: '#ec008c', | |
| data: [219,206,193,180,168,157,148,142,138,135,132,129,125,122,119,116,114,112,109,106,103,100,97,94], | |
| cohortAges: ['1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013'] | |
| }] | |
| }); //end chart racial weawlth gap | |
| // Handle the toggle button with class setting: | |
| document.getElementById('income-mortality-linegraph').className = 'chart hide'; | |
| $('#incomegap').click(function () { | |
| var incomegap = document.getElementById('income-mortality-scatterplot'); | |
| if (incomegap.className === 'chart show') { | |
| document.getElementById('income-mortality-scatterplot').className = 'chart hide'; | |
| document.getElementById('income-mortality-linegraph').className = 'chart show'; | |
| document.getElementById('incomegap').innerHTML = 'Under-Five Mortality by Income' | |
| } else { | |
| document.getElementById('incomegap').innerHTML = 'Maternal vs. Under-Five Mortality' | |
| document.getElementById('income-mortality-linegraph').className = 'chart hide'; | |
| document.getElementById('income-mortality-scatterplot').className = 'chart show'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment