lifecyclechart

by Pawan Jadhav

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            
        },
        title: {
            text: 'US and USSR nuclear stockpiles'
        },
        subtitle: {
            text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                'thebulletin.metapress.com</a>'
        },
        xAxis: {
        type : 'datetime',
            
            labels: {
            	format: '{value:%Y-%m-%d}'
            },
            tickmarkPlacement : 'on',
            plotBands: [{ // mark the weekend
                color: 'rgba(34,197,159 ,1)',
                from:Date.UTC(2013,0,1),
                to:  Date.UTC(2014,9,13)
            },
            { // mark the weekend
                color: 'rgba(137,37,108  ,1)',
                from:Date.UTC(2015,0,1),
                to: Date.UTC(2015,2,1)
            },
            { // mark the weekend
                color: 'rgba(193,123,127 ,1)',
                from:Date.UTC(2015,2,1),
                to: Date.UTC(2015,5,15)
            },
            { // mark the weekend
                color: 'rgba(216,134,79  ,1)',
                from:Date.UTC(2015,9,1),
                to: Date.UTC(2016,3,1)
            },
            { // mark the weekend
                color: 'rgba(140,173,86 ,1)',
                from:Date.UTC(2016,7,1),
                to: Date.UTC(2016,8,14)
            },
            { // mark the weekend
                color: 'rgba(26,152,71 ,1)',
                from:Date.UTC(2016,0,17),
                to: Date.UTC(2016,2,1)
            }]
           
        },
        yAxis: {
            title: {
                text: 'Nuclear weapon states'
            },
        
        },
        series: [ {
        		type: 'line',
            data: [
            {x: Date.UTC(2013,0,1), y: 10},
            {x: Date.UTC(2014,9,13), y: 10},
            
            {x: Date.UTC(2015,0,1), y: 10},
            {x: Date.UTC(2015,2,1), y: 10},
...