CODEWITHSUNDEEP
datetimehighchartsformataxis
luftikus143
luftikus143

Reputation: 1285

How to display monthly data in Highcharts graph?

Looks like a dumb question. And probably is. But I don't really get it.

I have monthly data over a ~30-year-period. I am neither sure how to format the data, nor am I sure how to format the Highcharts graph.

What is the correct way of data formatting? Like a "running month", from 1 to 433 (and more):

Date,Value
1,338.45
2,339.15
3,339.47

or in Date.UTC format:

Date,Value
Date.UTC(1980,1,1),338.45
Date.UTC(1980,2,1),339.15
Date.UTC(1980,3,1),339.47

I've done something similar like this, but don't think this is a good style:

Date,Value
1 Jan 1993,
2 Jan 1993,
3 Jan 1993,
4 Jan 1993,
5 Jan 1993,-4.19413878126
6 Jan 1993,
7 Jan 1993,

For the xAxis definition I've see different parameters being used. But as this depends on the data format, not quite sure what to put there:

xAxis: {
  type:"datetime",
  min: Date.UTC(1980, 1, 1),
  ...

Thanks a lot for any hints in which direction I should go.

Upvotes: 0

Views: 2586

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

A piece of advice, as you asked:

  1. Date.UTC(1980,1,1) - this is JavaScript function, to return timestamp. For example Date.UTC(1980,1,1) -> 318211200000. I suggest to use timestamp already in your data incoming for a chart. Note: Months in JS starts at 0 (0-> Jan, 1->Feb etc.).

  2. min: Date.UTC(1980, 1, 1) -> this is not necessary, Highcharts lib is smart enough to calculate extremes on the xAxis, you don't have to set it, unless you want to display only part of the data on the chart.

And for example, I would use that format:

Date,Value
318211200000,338.45
320716800000,339.15
323395200000,339.47

Note that all formats are fine - I just suggest to use the easiest one ;)

Upvotes: 4

mustapha mekhatria
mustapha mekhatria

Reputation: 3909

to set up teh xAxis as a time period you have these options: 1. using Date.UTC(Year, Month, Day):

data: [
  [Date.UTC(2016, 0, 5), 4],
  [Date.UTC(2016, 1, 6), 6],
  [Date.UTC(2016, 1, 7), 9],

check example

  1. using Dates written as numbers, specifies the number of milliseconds since January 1, 1970, 00:00:00.

    var xArr = [1455661712000, 1455661791000, 1455661869000, 1455661947000, ];

Check example

I hope these help, otherwise feel free to ask for more details.

Upvotes: 2

Related Questions