How to replace x-axes with our own timestamp data from API in Highcharts using highstocks

Question

This is my first time using highcharts. I kinda confused because last time I used Chart.js. I want my chart can show data per month, week, year, and day. And I want it to have datepicker. So I try to search some example. And finally I make my own. But there is not option to show my data per week and day. And the x-axes of the graph are not from my own data. How can I make my x-axes to use my own timestamp API data? And how to change the option to show data per day,week,and month?

This is my code: https://jsfiddle.net/estri012/y1usoxd7/6/

Anyone please help me. I am a newbie programmer and still have lot of problem with programming. But this is for my school task. So I need to finish it. Thankyou!

<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<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"></div>

Highcharts.getJSON('https://gmlews.com/api/data', function (data) {
console.log(data);
var accelero_x = [], timestamp = [];
      for (var i=0; i<data.length; i++){
        accelero_x.push(data[i].accelero_x);
        timestamp.push(data[i].timestamp);
     }
      console.log(accelero_x);
      console.log(timestamp); 
// Create the chart
Highcharts.stockChart('container', {

    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'Accelero X'
    },


    series: [{
        name: 'Accelero X',
        data: accelero_x,
        type: 'spline',
        tooltip: {
            valueDecimals: 2
        }
    }]
 });
 });

Answer 1

The idea behind using highchart stockchart is it uses x-axis label as timestamp.

Solution to "How can I make my x-axes to use my own timestamp API data? " should be converting data[i].timestamp by parsing to real timestamp and create nested array of 'accelero_x' and pass that array to series data.

Highcharts.getJSON('https://gmlews.com/api/data', function (data) {
console.log(data);
var accelero_x = [], timestamp = [];
      for (var i=0; i<data.length; i++){
      //modification start -----
      let inArr = [];
      let trimDate = data[i].timestamp.split('T')[0]; // here we have many ways to extract only the date correctly
      inArr.push(Date.parse(trimDate));
      inArr.push(data[i].accelero_x);
        accelero_x.push(inArr);
      //modification end -----
        timestamp.push(data[i].timestamp);
     }
      console.log(accelero_x);
      console.log(timestamp); 
// Create the chart
Highcharts.stockChart('container', {

    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'Accelero X'
    },


    series: [{
        name: 'Accelero X',
        data: accelero_x,
        type: 'spline',
        tooltip: {
            valueDecimals: 2
        }
    }]
 });
 }); 

Demo: https://jsfiddle.net/jinny/jrhz3ty7/20/

Answer 2

• Here is an API options how to set the range selections options: https://api.highcharts.com/highstock/rangeSelector.buttons

• Your second part of the question - Highcharts requires data in the following formats:

  • array of values - like: [10,20,30,40] - Highcharts reads it as an array of y values and set default x values - 1, 2, 3, 4

  • array of arrays - like: [[3, 24], [5, 42], [8,33]] - where first value in the array is an x and the second one is the y - [x, y]

  • array of objects - like: [{x: 3, y: 24}, {x: 5, y: 42}] - here is quite obvious

The xAxis could be a datatime type, where x value is a value in milliseconds format, that's mean you will need to convert your data into the milisecond value to set it, like here: https://jsfiddle.net/BlackLabel/w9hznsey/