CODEWITHSUNDEEP
javascripthighcharts
Robert
Robert

Reputation: 59

How to display last 7 days data

hi can someone help me i want to display last seven day data in my chart it works in this chart type https://www.highcharts.com/demo/line-time-series but not working in https://www.highcharts.com/demo/areaspline

for example if today is 05/04/2019 chart will display data from 30-03-2019 to 05-04-2019 (7 days) and areaspline chart has pointStart but how to make it dynamic to display last 7 days? here is my example

$(function() {
	Highcharts.setOptions({lang:{thousandsSep:","}});
	$('#container').highcharts({
		chart:{
			type:'areaspline',
			zoomType: 'x'
			},
		title:{
		    text:null,
			margin:0,
			floating:true,
			verticalAlign:'bottom',
			x:0,
			y:0	
		},	
		xAxis:{
			type:'datetime',
			maxZoom:48*3600*1000	
		},
		plotOptions:{
			series:{
				pointStart: Date.UTC(2019, 03-1, 30),
                pointInterval: 24 * 3600 * 1000 // one day
		
			}
		},
		yAxis:{
			title:{
				text:null,
			},
		},		
		credits:{
			enabled:false
		},				
		series:[{
			showInLegend:false,
			name:"Dollar",
			data:[1,0.5,3,2,5,2.5]
	});
});

Upvotes: 0

Views: 2232

Answers (1)

Ashu
Ashu

Reputation: 2266

You can use tickPositioner to return the 7 days positions point of last 7 days.

Point start needs to be set with the current date which you can do it by:

pointStart: Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()),


var d = new Date();
d.setDate(d.getDate() - 7);
Highcharts.chart('container', {
  chart: {
    type: 'areaspline',
    zoomType: 'x'
  },
  xAxis: {
    type: 'datetime',
    maxZoom: 48 * 3600 * 1000,

    tickInterval: 24 * 3600 * 1000,
    tickPositioner: function(min, max) {
      var interval = this.options.tickInterval,
        ticks = [],
        count = 0;

      while (min < max) {
        ticks.push(min);
        min += interval;
        count++;
      }

      ticks.info = {
        unitName: 'day',
        count: 1,
        higherRanks: {},
        totalRange: interval * count
      }
      return ticks;
    }

  },


  series: [{
    showInLegend: false,
    name: "Dollar",
    data: [88, 96, 97, 105, 0,84,86],
    pointStart: Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()),
    pointInterval: 24 * 3600 * 1000 // seven days
  }]

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

<div id="container"></div>

For different datatype:

var d = new Date();
d.setDate(d.getDate() - 7);
Highcharts.chart('container', {
  chart: {
    type: 'areaspline',
    zoomType: 'x'
  },
  xAxis: {
    type: 'datetime'  
  },
  series: [{
    showInLegend: false,
    name: "Dollar",
    data: [
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()),88],
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()+1),89],
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()+2),0],
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()+3),102],
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()+4),114],
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()+5),120]],
  }]

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

<div id="container"></div>

API references:

https://api.highcharts.com/highcharts/xAxis.tickPositioner https://api.highcharts.com/highcharts/series.line.pointStart

Upvotes: 2

Related Questions