Gantt Chattering Alarms

Gantt chart that represent periods of time that a single alarm was in a chattering state

by Rafael Teles

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {

    var data1 = [[1, 0, 1], [2, 0, 1], [2, null, null], [3, 0, 1], [5, 0, 1], [5, null, null], [6, 0, 1], [10, 0, 1]]
    var data2 = [
        {
            x: 1,
            low: 0,
            high: 1,
            name: "Point2",
            color: "#00FF00"
        },
        {
            x: 2,
            low: 0,
            high: 1,
            name: "Point2",
            color: "#00FF00"
        }
    ]
    //var data2 = [[1, null, null], [2, 0, 1], [4, 0, 1], [10, null, null]]
    var dataNavigator = [[1, 1], [3, 1], [3, 2], [4, 2], [4, 1], [5, 1], [5, 0], [6, 0], [6, 1], [10, 1]]

    $('#container').highcharts('StockChart', {

        chart: {
            type: 'arearange'
        },

        xAxis : {
            ordinal: false
        },

        navigator : {
            series : {
                data: dataNavigator
            }
        },

        yAxis: [{
            gridLineWidth: 0,
            opposite: false,
            height: '50%',
            offset: 0,
            lineWidth: 2,
            labels: {enabled: false},
            title : {
                text: "y0"
            }
        }, {
            gridLineWidth: 0,
            opposite: false,
            top: '50%',
            height: '50%',
            offset: 0,
            lineWidth: 2,
            labels: {enabled: false},
            title : {
                text: "y1"
            }
        }],

        title: {
            text: 'Temperature variation by day'
        },

        tooltip: {
            pointFormat: '<span style="color:{point.color}">\u25CF</span> {point.name}: <b>{point.y}</b><br/>'
            //pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}<br/>'
        },

        series: [{
            name: 'Serie Name 1',
            data: data1,
            step: true,
            yAxis: 0
        }, {
            name: 'Serie Name 2',
            data: data2,
            step: true,
            yAxis: 1,
           ...