Highcharts Demo

author(s): Torstein Hønsi

by sgearhart2

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.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>

<pre id="csv" style="display:none">Year,Annual mean,5 year...

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'Global temperature change'
    },

    subtitle: {
        text: 'Data module: parsed columns are modified, should start from 1950'
    },
    xAxis : {
    	tickInterval : null,
      tickPositions : []
    },

    data: {
        csv: document.getElementById('csv').innerHTML,
        parsed: function (columns) {
          let tickPositions = [];
          $.each(columns[0], function(index, value) {
            if(value % 20 === 0) {
              tickPositions.push(value);
            }
          })
          this.chartOptions.xAxis.tickPositions = tickPositions;
        }
    },

    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        }
    },

    series: [{
        lineWidth: 1
    }, {
        type: 'areaspline',
        color: '#c4392d',
        negativeColor: '#5679c4',
        fillOpacity: 0.5
    }]
});