Nsryjdtyk

I have a CSV file with following format:

<pre id="csv" style="display:none">

DATES,WHOLESALE,ECOMMERCE,RETAIL,LOANS,BONDISSUER

01/10/2018 00:00,25,16,13,1,0

01/10/2018 01:00,24,5,9,3,2

01/10/2018 02:00,28,6,17,0,6

The data range is 01/10/2018 00:00 - 31/10/2018 00:00
Interval is every hour.
I am using highstock stacked column with 5 categories: WHOLESALE,ECOMMERCE,RETAIL,LOANS,BONDISSUER.
My problem is, that the highstock navigator displays the data incorrectly. I think I have to customise property in range selector or navigator, but I can't find any documentation online. I tried inputDateParser, but it didn't work. Here is the jsfiddle

inputDateParser: function (value) {

        value = value.split(/[:.]/);

        return Date.UTC(

            1970,

            0,

            1,

            parseInt(value[0], 10),

            parseInt(value[1], 10),

            parseInt(value[2], 10),

            parseInt(value[3], 10)

        );

    }

How do I get the data range to be correct: month of October 2018 according to the dates in CSV?
I should not see a whole year in the navigator, when I only have data for October.
Thanks much appreciated

You would need to format the dates correctly, it can be done using the beforeParse callback function, like this:

data: {

  csv: document.getElementById('csv').innerHTML,

  beforeParse: function(e) {

    let csv = e.split('n'); //split by newline

    let processedTable = 

    processedTable.push(csv[0].split(','))

    for (let i = 1; i < csv.length; i++) {

      let row = csv[i].split(',');

      if (row.length != 6) //skip empty rows or rows with more/less columns

        continue;

      let date = row[0].split(' ')[0].split('/')

      let time = row[0].split(' ')[1].split(':')



      processedTable.push(

        [(new Date(date[2], date[1] - 1, date[0], time[0], time[1], 0)).getTime(), //get the timestamp for the date 

          parseInt(row[1]),

          parseInt(row[2]),

          parseInt(row[3]),

          parseInt(row[4]),

          parseInt(row[5])

        ].join(',')

      )

    }

    return processedTable.join('n') //join the array into a string again

  },

},

Every row is parsed, by splitting it apart, the date is found, and milliseconds since 1970 is returned by getTime(). Then we join the cells into strings, and lastly the rows into a long string. The reason we convert this back into a string, is because highcharts is going to read it in from a string.

Working JSFiddle example: https://jsfiddle.net/ewolden/spmtgv3a/

API on beforeParse: https://api.highcharts.com/highcharts/data.beforeParse