Simple Sparklines made using Highcharts

by shivkumarganesh

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<table class="table table-condensed table-bordered" id="symptomSummary">
    <tbody>
        <tr>
            <td>
                <div id="table1" class="spark-line"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="table2" class="spark-line"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="table3" class="spark-line"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="table4" class="spark-line"></div>
            </td>
        </tr>
    </tbody>
</table>
<br />

CSS

.symp {
    vertical-align: middle;
    line-height: 40px;
    padding: 0.5em;
    border-bottom: 1px solid #ddd;
}
.spark-line {
    height: 30px;
    width: 200px;
    display: inline-block
}
.table > tbody > tr > td {
    vertical-align: middle;
}

JavaScript

$(function () {
    /*Highcharts.setOptions({ // This is for all plots, change Date axis to local timezone
        global: {
            useUTC: false
        }
    });*/

    Highcharts.setOptions({
        chart: {
            margin: [0, 0, 0, 0],
            style: {
                overflow: 'visible'
            }
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        xAxis: {
            labels: {
                enabled: false
            },
            tickLength: 0
        },
        yAxis: {
            title: {
                text: null
            },
            maxPadding: 0,
            minPadding: 0,
            gridLineWidth: 0,
            ticks: false,
            endOnTick: false,
            labels: {
                enabled: false
            },
            min: 0,
            max: 10
        },
        tooltip: {
            formatter: function () {
                if (this.point.date == undefined) {
                    return '<b>' + this.series.name + '</b><br/>' + this.point.status;
                } else {
                    return '<b>' + this.series.name + '</b><br/>' + this.point.date + " - " + this.point.status;
                }
            },
            borderWidth: 0,
            shadow: false,
            useHTML: true,
            hideDelay: 0,
            padding: 0,
            positioner: function (w, h, point) {
                return {
                    x: point.plotX - w / 2,
                    y: point.plotY - h
                };
            }
        },
        plotOptions: {
            series: {
                enableMouseTracking: true,
                lineWidth: 1,
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                marker: {
                    radius: 2
    ...