Test #2 for Economy Matters article on Southeast migration

author(s): Mike Zavarello

by Mike Zavarello

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="result"></div>
<table id="table-sparkline">
    <thead>
        <tr>
            <th>State</th>
            <th>Change</th>
        </tr>
    </thead>
    <tbody id="tbody-sparkline">
        <tr>
            <th>Alabama</th>
            <td data-sparkline="88, 73, 70 "/>
        </tr>
        <tr>
            <th>Florida</th>
            <td data-sparkline="43, 33, 36 "/>
        </tr>
        <tr>
            <th>Georgia</th>
            <td data-sparkline="85, 58, 55 "/>
        </tr>
        <tr>
            <th>Louisiana</th>
            <td data-sparkline="84, 79, 78 "/>
        </tr>
        <tr>
            <th>Mississippi</th>
            <td data-sparkline="89, 74, 72 "/>
        </tr>
        <tr>
            <th>Tennessee</th>
            <td data-sparkline="80, 65, 61 "/>
        </tr>
        <tr>
            <th>California</th>
            <td data-sparkline="37, 50, 55 "/>
        </tr>
        <tr>
            <th>Illinois</th>
            <td data-sparkline="68, 67, 67 "/>
        </tr>
        <tr>
            <th>Michigan</th>
            <td data-sparkline="65, 75, 77 "/>
        </tr>
        <tr>
            <th>Nevada</th>
            <td data-sparkline="25, 21, 25 "/>
        </tr>
        <tr>
            <th>New York</th>
            <td data-sparkline="67, 65, 63 "/>
        </tr>
        <tr>
            <th>Texas</th>
            <td data-sparkline="76, 62, 60 "/>
        </tr>
    </tbody>
</table>

CSS

#result {
    text-align: right;
    color: gray;
    min-height: 2em;
}
#table-sparkline {
    margin: 0 auto;
    border-collapse: collapse;
}
th {
    font-weight: bold;
    text-align: left;
}
td, th {
    padding: 5px;
    border-bottom: 1px solid silver;
    height: 20px;
}

thead th {
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}
.highcharts-tooltip>span {
    background: white;
    border: 1px solid silver;
    border-radius: 3px;
    box-shadow: 1px 1px 2px #888;
    padding: 8px;
}

JavaScript

var labels_WhereAreWeFrom = ['1950','2000','2015']; 


/**
 * Create a constructor for sparklines that takes some sensible defaults and merges in the individual
 * chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
 */
 
Highcharts.SparkLine = function (a, b, c) {
    var hasRenderToArg = typeof a === 'string' || a.nodeName,
        options = arguments[hasRenderToArg ? 1 : 0],
        defaultOptions = {
            chart: {
                renderTo: (options.chart && options.chart.renderTo) || this,
                backgroundColor: null,
                borderWidth: 0,
                type: 'area',
                margin: [2, 0, 2, 0],
                width: 120,
                height: 20,
                style: {
                    overflow: 'visible'
                },

                // small optimalization, saves 1-2 ms each sparkline
                skipClone: true
            },
            title: {
                text: ''
            },
            credits: {
                enabled: false
            },
            xAxis: {
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                },
                startOnTick: false,
                endOnTick: false,
                tickPositions: []
            },
            yAxis: {
                endOnTick: false,
                startOnTick: false,
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                },
                tickPositions: [0]
                , min: 0, max: 100
            },
            legend: {
                enabled: false
            },
            tooltip: {
                backgroundColor: null,
                borderWidth: 0,
                shadow: false,
                useHTML: true,
                hideDelay: 0,
                shared:...