Charts for Southeast Rural Manufacturing EM article

author: Mike Zavarello

by Mike Zavarello

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<!--<script src="https://code.highcharts.com/highcharts-more.js"></script>-->
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div class="economyMattersChart" id="container_SoutheastTotalEmployment"></div>
<div class="economyMattersChart" id="container_SoutheastManufacturingEmployment"></div>
<!--
<div style="width: 100%">

  <div style="width: 50%; float: left">-->
    <div class="economyMattersChartTall" id="container_SoutheastIndustryShare1998"></div>
 <!-- </div>
  <div style="width: 50%; float: left">
    <div class="economyMattersChartTall" id="container_SoutheastIndustryShare2017"></div>
  </div>
</div>-->

CSS

.economyMattersChart { height: 400px; width: 98%; margin: 0 auto; }
.economyMattersChartTall { height: 650px; width: 98%; margin: 0 auto; }

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 =...