Job Quality Tool

Job Quality Tracker Tool

by Mike Zavarello

HTML

<script src="https://www.frbatlanta.org/~/media/javascript/job-quality-tool/dataJobTool.js"></script>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script> 




<div id="container_JobTool">
  <div>
    <label>State:</label>
    <select id="state">
      <option value="USA">Nationwide</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
      <option value="CT">Connecticut</option>
      <option value="DE">Delaware</option>
      <option value="DC">District Of Columbia</option>
      <option value="FL">Florida</option>
      <option value="GA">Georgia</option>
      <option value="HI">Hawaii</option>
      <option value="ID">Idaho</option>
      <option value="IL">Illinois</option>
      <option value="IN">Indiana</option>
      <option value="IA">Iowa</option>
      <option value="KS">Kansas</option>
      <option value="KY">Kentucky</option>
      <option value="LA">Louisiana</option>
      <option value="ME">Maine</option>
      <option value="MD">Maryland</option>
      <option value="MA">Massachusetts</option>
      <option value="MI">Michigan</option>
      <option value="MN">Minnesota</option>
      <option value="MS">Mississippi</option>
      <option value="MO">Missouri</option>
      <option value="MT">Montana</option>
      <option value="NE">Nebraska</option>
      <option value="NV">Nevada</option>
      <option value="NH">New Hampshire</option>
      <option value="NJ">New Jersey</option>
      <option value="NM">New Mexico</option>
     ...

CSS

#wrapper {
    width: 830px;
    //border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
    padding-bottom: 15px;
}
#container_PieChart {
  border: 1px solid black; 
  height:100%;
  padding: 5px 10px 5px 25px;
  background-color: #FFFFFF;
  font-size: 14px;
   
   
    
}
#container_BarChartHr {
    
    float: left;
    width: 415px;
}

#container_BarChartAnnual {
   
    float: right;
    width: 415px;
}

#container_JobToolMap {
  height: 500px;
  width:  800px;
  margin: 0 auto; 
  margin-bottom: 25px;
}

#container_MoreInfo {
  border: 1px solid black; 
  height:100%;
  padding: 25px;
  background-color: #FFFFFF;
  font-size: 14px;
}

#barCompare{

  padding: 15px;
}

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: 'xy' },
        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,
   ...