(function () { var script = document.getElementById('highcharts-script'); function addChart() { var onCustomCodeError; function customCode(options, product) { try { /* // Sample of extending options: Highcharts.extend(options, Highcharts.merge(options, { chart: { backgroundColor: "#bada55" }, plotOptions: { series: { cursor: "pointer", events: { click: function(event) { alert(this.name + " clicked\n" + "Alt: " + event.altKey + "\n" + "Control: " + event.ctrlKey + "\n" + "Shift: " + event.shiftKey + "\n"); } } } } })); */ // Extend default options for the chart Highcharts.extend(options, Highcharts.merge(options, { yAxis: [ // Primary yAxis, leave this alone. Note that Highcharts.merge does not deep merge arrays. options.yAxis || {}, { // Add secondary yAxis title: { text: 'S&P 500' }, opposite: true, // This puts the secondary yAxis on the opposite side of the chart // ---- // Here you can add more options to customize the second yAxis, as described in the API // http://api.highcharts.com/highcharts#yAxis // ---- } ] })); // Here we select which series to show on the secondary yAxis: options.series[1].yAxis = 1; } catch(error) { console.error(error) if (onCustomCodeError && onCustomCodeError(error) === false){ // stop execution return; } } var chart = new Highcharts['Chart'](options); } function parseData(completeHandler, chartOptions) { try { var dataOptions = { "seriesMapping": [ { "x": 0 }, { "x": 0 } ], "columnTypes": [ "float", "float", "float" ], "csv": "Year,Real Wage,Real S\u0026P 500\n1919,4.8,112.6\n1920,5.1,88.5\n1921,5.3,85.4\n1922,5.4,111.6\n1923,5.7,111.8\n1924,5.9,117.3\n1925,5.8,141.1\n1926,5.8,157.3\n1927,6,193.3\n1928,6.1,257\n1929,6.2,340.2\n1930,6.4,284.7\n1931,6.7,201.8\n1932,6.6,111.8\n1933,6.8,148.3\n1934,7.3,163.2\n1935,7.4,167.6\n1936,7.4,243.6\n1937,7.7,244\n1938,8.1,176.4\n1939,8.3,191.4\n1940,8.8,176.5\n1941,9.6,149.3\n1942,10.6,116.7\n1943,11.5,146.9\n1944,12.1,156.2\n1945,11.7,184.8\n1946,11.3,197.7\n1947,11.4,151.2\n1948,11.7,143.5\n1949,12.3,140.7\n1950,12.7,167.2\n1951,13,188.6\n1952,13.4,203.8\n1953,14.2,206\n1954,14.4,240.7\n1955,15.1,332\n1956,15.8,378.6\n1957,16,353.8\n1958,16,349.7\n1959,16.6,437.1\n1960,16.9,418.3\n1961,17.1,486.4\n1962,17.5,459.8\n1963,17.8,501.4\n1964,18.1,577.2\n1965,18.5,618.2\n1966,18.7,584.6\n1967,19,604.2\n1968,19.3,624.4\n1969,19.4,596.9\n1970,19.4,477\n1971,19.9,534.4\n1972,20.7,575.6\n1973,20.7,541.5\n1974,20,379.5\n1975,19.5,351.6\n1976,19.7,395.1\n1977,19.9,361\n1978,20.1,325.9\n1979,19.8,319.3\n1980,19.2,328.9\n1981,19.1,331\n1982,19,287\n1983,19,368.1\n1984,18.9,356.5\n1985,18.8,398.8\n1986,18.9,499.7\n1987,18.7,584.3\n1988,18.6,524\n1989,18.5,605.1\n1990,18.4,603.6\n1991,18.3,651.2\n1992,18.3,705.2\n1993,18.3,746.5\n1994,18.4,748.1\n1995,18.4,845\n1996,18.6,1024.5\n1997,18.9,1292.9\n1998,19.4,1587.9\n1999,19.7,1911.5\n2000,19.8,2020.7\n2001,20,1647\n2002,20.2,1366.4\n2003,20.3,1252\n2004,20.2,1447.4\n2005,20,1498.5\n2006,20.2,1571.3\n2007,20.4,1726.3\n2008,20.4,1423.9\n2009,21.1,1052.7\n2010,21.2,1245.9\n2011,21,1383.2\n2012,20.9,1451.7\n2013,21,1685.7\n2014,21.1,1976.9\n2015,21.5,2104\n2016,21.8,2113.8\n2017,21.8,2351.8" }; dataOptions.sort = true dataOptions.complete = completeHandler; Highcharts.data(dataOptions, chartOptions); } catch (error) { console.log(error); completeHandler(undefined); } } var shareUrl = 'https://cloud.highcharts.com/show/ucapini'; var encodedUrl = encodeURIComponent(shareUrl); Highcharts.setOptions({ "lang": { "thousandsSep": "," } }); var template = { chart: { renderTo: 'highcharts-ucapini' }, navigation: { menuItemStyle: { fontFamily: Highcharts.SVGRenderer.prototype.getStyle().fontFamily, padding: '2px 10px' } }, exporting: { buttons: { contextButton: { menuItems: [{ text: '' + 'Share on Facebook' }, { text: '' + 'Share on Google+' }, { text: '' + 'Share on Twitter' }, { text: '' + 'Share on LinkedIn' }, { separator: true }] .concat(Highcharts.getOptions().exporting.buttons.contextButton.menuItems) .concat([{ separator: true }, { text: '' + 'Edit chart' }, { text: '' + 'Create chart' }]) } } } }; var chartOptions = { "yAxis": { "title": { "text": "Wages (2016 Dollars)" }, "labels": { "format": "${value}" } }, "exporting": { "enabled": false }, "credits": { "position": { "x": 20, "y": -1, "align": "left" }, "href": null, "text": "Sources: BLS, Center for Research in Security Prices, Multipl" }, "legend": { "layout": "vertical", "verticalAlign": "top", "floating": true, "y": 30 }, "series": [ { "marker": { "symbol": "circle", "enabled": false }, "tooltip": { "valuePrefix": "$" }, "index": 0 }, { "marker": { "enabled": false }, "index": 1 } ], "tooltip": { "shared": true }, "title": { "style": { "fontSize": "14px" }, "text": "Real Wages and Real S\u0026P 500 (1919-2017)" }, "colors": [ "#B31021", "#000000" ] }; parseData(function (dataOptions) { // Merge series configs if (chartOptions.series && dataOptions) { Highcharts.each(chartOptions.series, function (series, i) { chartOptions.series[i] = Highcharts.merge(series, dataOptions.series[i]); }); } var options = Highcharts.merge(dataOptions, chartOptions, template); customCode(options, 'Chart'); }, chartOptions); } // Load the Highcharts script if undefined, and add the chart if (typeof Highcharts !== 'undefined') { addChart(); } else if (script) { script.deferredCharts.push(addChart); } else { script = document.createElement('script'); script.id = 'highcharts-script'; script.src = '//cloud.highcharts.com/resources/js/highstock-cloud-5.0.7.js'; script.type = 'text/javascript'; script.deferredCharts = [addChart]; script.onload = function () { // Prevent double firing of event in IE9/IE10 if (!script.chartsAdded) { script.chartsAdded = true; while(script.deferredCharts.length) { script.deferredCharts.shift()(); } } }; script.onreadystatechange = function() { if (this.readyState == 'complete' || this.readyState == 'loaded') { script.onload(); } }; document.getElementsByTagName('head')[0].appendChild(script); } }());