Time data with irregular intervals

author(s): Torstein Hønsi

by jpeter06

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        This demo visualizes a data set with irregular time intervals.
        Highcharts comes with sophisticated functionality for dealing
        with time data, including support for different time zones and
        irregular intervals.
    </p>
</figure>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'line',
        zoomType: 'x',
        alignTicks: false
    },
    title: {
        text: 'Snow depth at Vikjafjellet, Norway'
    },

    xAxis: {
        type: 'datetime',      
        minorTickInterval: 'auto',
        minorGridLineDashStyle: 'Solid',
        minorGridLineWidth: 2,
        minorTickWidth: 0,
        tickInterval: (1158 * 3600 * 1000),
        dateTimeLabelFormats: {
          hour: '%k',
          day: '%k'
        },
        title: {
            text: 'Date'
        },
        min:Date.UTC(1970, 12, 1),
        max: Date.UTC(1971, 6, 2),
        labels: {
          y: (window.innerWidth >= 6000 ? 40 : 15),
        }
    },
    yAxis: {
        className: 'highcharts-ejeX',
        gridLineDashStyle: 'ShortDot',
        minorTickWidth: 0,
        min: 0,
        tickInterval: 1,
        title: {
            text: 'Snow depth (m)'
        },             
         y: (window.innerWidth >= 6000 ? 11.5: null)     
    },
      tooltip: {
        xDateFormat: "Hora: " + '<b>%H:%M:%S</b>',
        pointFormat: "<span style=\"color:{point.color}\">\u25CF</span> {series.name}: <b> {point.y} </b><br/>",
        shared: true,
        backgroundColor: 'white',
        style:{
          color:'',
        }
      },

    plotOptions: {
        series: {
         animation: false,
            marker: {
                enabled: false
            },
            states: {
              inactive: {
                opacity: 1
              }
            }
        }
    },

    colors: ['#6CF', '#39F', '#06C', '#036', '#000'],

    // Define the data points. All series have a dummy year
    // of 1970/71 in order to be compared on the same x axis. Note
    // that in JavaScript, months start at 0 for January, 1 for February etc.
    series: [{
        type: 'spline',
        name: "Energía Prevista",
        color: 'rgb(255, 255, 0)',
        data: [
            [Date.UTC(1970, 10, 25), 0],
           ...