CODEWITHSUNDEEP
javascripthighcharts
Василий Пупкин
Василий Пупкин

Reputation: 25

single array timestamp as xAxis for multiple series

I am new to Java script and highcharts. How can I put the timestamp into a separate shared array for all series?

like this: 

 xAxis: { 
        data: [1577203210, 1577206808, 1577210408]
        }

       series: [{
                    name: 'one',
                    data: [1, 21, 8],
                },
                {
                    name: 'two',
                    data: [2,4,6],
                }]

what I have now

Highcharts.stockChart('container', {
  title: {
    text: 'Stock Price'
  },
  series: [{
      name: 'one',
      data: [
        [1577203210, 1],
        [1577206808, 21],
        [1577210408, 8],
      ],
    },
    {
      name: 'two',
      data: [
        [1577203210, 2],
        [1577206808, 4],
        [1577210408, 6],
      ],
    }
  ]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Upvotes: 0

Views: 132

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

  1. You can use the xAxis.categories feature to assign this array to xAxis, but categories feature is available only for Highcharts (not Highstock), however, you should be able to merge options from Highstock to Highcharts using the Highstock script. The disadvantage of this solution is that the labels and tooltip gets those values in the number format, not datatime.

Demo: https://jsfiddle.net/BlackLabel/ye1rxw49/

    let timestamp = [1577203210, 1577206808, 1577210408];

    Highcharts.chart('container', {
      title: {
        text: 'Stock Price'
      },

      xAxis: {
        categories: timestamp
      },
      ...
    });

To show x values in datatime you will need to use some parse function, like here:

Demo: https://jsfiddle.net/BlackLabel/2j3yswn5/

let categoriesTimeStamp = timestamp.map((val) => new Date(val).toUTCString())

However, this solution is still not perfect, because the rangeSelector don't work well with the categorie - you can see that the range is from Jan 1, 1970 to Jan 1, 1970, meanwhile the labels are 19 Jan.

  1. I think that a better approach will be to create some parse function which will merge your data and xAxis data arrays.

Something like this: https://jsfiddle.net/BlackLabel/woht0vpk/

let data1 = [1, 21, 8],
        data2 = [2,4,6],
    xAxisData = [1577203210, 1577206808, 1577210408];

 data1 = data1.map((val, i) => [xAxisData[i], val])
 data2 = data2.map((val, i) => [xAxisData[i], val])

Upvotes: 0

Related Questions