Highchart - Datetime

DNU - Exemplo com datas no eixo dos x e de intervalo

by NunoMira

HTML

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

JavaScript

$(function ()
{
    Highcharts.chart('container',
    {
      	chart :
        {
          //renderTo:'container',
          backgroundColor : 'transparent',
          type: 'area',
          //width: 300,
          //maxHeight: 100,
          //borderWidth: 1,
          //plotBorderWidth: 1,
          //spacingLeft: 0
        },
        title:
        {
            text: 'Daily New Users'
        },
        subtitle:
        {
            text: '<a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                'Veja <span style="cursor: pointer; font-weight: bold;">aqui</span> mais informação sobre esta métrica.</a>'
        },
        navigation:
        {
            buttonOptions:
            {
              enabled: false
            }
        },
       yAxis:
       {
            title:
            {
                text: 'Total de novos utilizadores'
            },
				},
        xAxis:
        {
            type: 'datetime',
            dateTimeLabelFormats:
            {
                day: '%e/%b/%y',
            }
        },
        tooltip:
        {
            //pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
            pointFormat: '<b>{point.y:,.0f}</b> novos utilizadores'
        },
      	legend:
        {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'center',
            borderWidth: 0,
            enabled: true
        },
       series: 
       [{
       			name: 'DNU',
            data: [29, 71, 156, 79, 144, 66, 148, 54],
            pointStart: Date.UTC(2017, 0, 1),
            lineWidth: 6,
            color: '#1784C7',
            lineColor: '#3E454C',
        		//dashStyle: 'longdash', //'ShortDash',
            //dashStyle: 'longdash',
            //pointInterval: 24 * 3600 * 500 // one day (0.5 dias)
            pointInterval: 24 * 3600 * 1000 //(1 dia)
            //pointInterval: 24 * 3600 * 1500 // (1.5 dias)
      ...