Test to use Highstock interface in standard charts

Mike Zavarello

by Mike Zavarello

HTML

<script src="https://code.highcharts.com/stock/6.1.3/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div class="tabs">
  <div class="DataCharts" id="container_UnemploymentRateGap"></div>
  <div class="DataCharts" id="container_ShareOfLaborForce"></div>
</div>

CSS

/*
.DataCharts { height: 500px; width: 98%; margin: 0 auto; }
*/
    .DataCharts, .DataChartsTall, .DataTables { width: 75%; margin: 0 auto 20px; background: url('https://www.frbatlanta.org/-/media/C69B5325393C495482EDE8A4810581E4.ashx?h=92&amp;w=128'); background-repeat: no-repeat; background-position: center 120px; }
    .DataCharts { height: 500px; }
    .DataChartsTall { height: 650px; }
    .DataTables>table { padding: 10px; width: 100%; margin: 10px auto 0px; background-color: #FFFFFF; }
    .DataTables>table caption { font: 16px Arial, sans-serif; font-weight: bold; text-align: left; margin-bottom: 10px; }
    .DataTables>table td, th { border: 1px solid #CDCDCD; padding: 4px; color: #000000; }
    .DataTables>table th { font-weight: bold; background: #bed3de; }
    .DataTables>table td { background: #FFFFFF; }
    .DataTables>table td.shadedCell { background-color: #e0eaef; }
    .DataTables>table th:nth-child(1), .DataTables>table td:nth-child(1) { text-align: left; }
    .DataTables>table th:nth-child(1), .DataTables>table td:nth-child(1) { width: 40%; }
    .DataTables>table th:nth-child(2), .DataTables>table td:nth-child(2), .DataTables>table th:nth-child(3), .DataTables>table td:nth-child(3), .DataTables>table th:nth-child(4), .DataTables>table td:nth-child(4) { width: 20%; text-align: center; }
    .buttonActive { background-color: #666; }
    .GoToChart { cursor: pointer; text-decoration: underline; }
    .shadedCell { background-color: #e0eaef; }
	.toolButtonContainer { text-align: center; }
	.toolButton { background-color: #00577e; }
	@media screen and (max-width: 700px) {
		.DataCharts, .DataChartsTall, .DataTables { width: 95%; }
		.toolButtonContainer { display: none; }
	}
    @media print {
		.DataCharts, .DataChartsTall, .DataTables>table { width: 100%; page-break-inside: avoid; } /* prevent charts and tables from appearing on more than one page of printout */
		.tabHead, .btn, .highcharts-button, .toolButtonContainer { display: none; } /*...

JavaScript

/* set global settings for all Highcharts visualizations */
function setChartDefaults(chartWidth,chartHeight,chartSourceLine,chartSourceLineOffset) {
	if (!chartWidth) chartWidth = 650;
	if (!chartHeight) chartHeight = 450;
	if (!chartSourceLine) chartSourceLine = 'Source: Atlanta Fed';
	if (!chartSourceLineOffset) chartSourceLineOffset = 50;
	Highcharts.setOptions({
		chart: { borderColor: '#CDCDCD', borderWidth: 1, zoomType: 'x' },
		colors: [
			'#0E4768', /* "Bank" blue */
			'#768F40', /* green */
			'#F5892F', /* orange */
			'#581F54', /* purple */
			'#5588A3', /* light blue */
			'#084225', /* dark green */
			'#B59236', /* gold */
			'#8B4823', /* dark orange */
			'#756A5C', /* brown */
			'#A01D23', /* red */
			'#000000', /* black */
			'#B89078', /* faded dark orange; tan */
			'#CF8788', /* faded red; coral */
			'#AB8EA9', /* faded purple; mauve */
			'#9BB4A9', /* faded dark green; mint */
			'#B5C7D1'  /* faded "Bank" blue; sky */
		],
		credits: { enabled: true, text: '', style: { color: '#ABABAB', font: '9px Arial, sans-serif' }, position: { align: 'right', y: -10 } },
		exporting: {
			chartOptions: {
				chart: {
					height: chartHeight, width: chartWidth
				},
				legend: { enabled: true },
				rangeSelector: { enabled: false }
			},
			enableImages: true,
			buttons: {
				contextButton: { 
					text: 'Export',
                    menuItems: [{
                        text: 'Print this chart', onclick: function () { this.print(); thisTitle = this.options.title.text; newTitle = thisTitle.replace("<br>",": "); newTitle = thisTitle.replace("<br />",": "); ga('send', 'event', 'Highcharts', 'print', newTitle + ' | ' + document.title); $.get('/dms-goal-items-for-javascript-calls/highcharts-exports'); }
					}, {
                        separator: true, 
					}, {
                        text: 'Save as PNG', onclick: function () { this.exportChart(); thisTitle = this.options.title.text; newTitle = thisTitle.replace("<br>",": "); newTitle =...