Highcharts - Line Chart with date

Question

Hello, I can’t create a Chart line using the plugin Highcharts, where the X-axis is separated by months (Jan, Feb, etc...) and the Y-axis is the number of new customers based on those months.

Below is how my json is formed.

[{
 "newCustomers": "1",
 "creationDate": "2017-08-07 09:33:18"
 }, {
 "newCustomers": "1",
 "creationDate": "2017-08-07 17:35:28"
 }, {
 "newCustomers": "1",
 "creationDate": "2017-08-07 17:52:45"
 }, {
 "newCustomers": "1",
 "creationDate": "2017-08-08 18:08:16"
 }, {
 "newCustomers": "1",
 "creationDate": "2017-08-09 15:41:03"
 }, {
 "newCustomers": "1",
 "creationDate": "2017-08-09 16:13:48"
 }, {
 "newCustomers": "1",
 "creationDate": "2017-08-09 16:17:18"
 }, {
 "newCustomers": "1",
 "creationDate": "2017-08-10 09:47:40"
}]

---

I would like to take this data above and put it in the format below. Where in the "date" parameter of "series" would be the amount of new customers and in the X axis, it would be the "creationDate" formatted and separated by month "Jan, Feb, etc.."

Highcharts.chart('container', {
chart: {
    type: 'line'
},
title: {
    text: 'New Customers Per Month'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
    title: {
        text: 'New customers'
    }
},
plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        },
        enableMouseTracking: false
    }
},
series: [{
            name: 'BEARLabs',
            data: [7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 9]
        }]
});

Answer 1

The problem seems to be the way the totalization in json is like the timestamp when it should be for the month. I wrote a function that does this. Basically what it does is create an array of 12 positions that repress the months (0 for January and 11 for December). Then catch the string in creationDate and create a date and get the month to know what is the position of the array to be incremented.

I modified the json values to improve the chart display.

var  lin = [{
     "newCustomers": "1",
     "creationDate": "2017-03-07 09:33:18"
     }, {
     "newCustomers": "1",
     "creationDate": "2017-07-07 17:35:28"
     }, {
     "newCustomers": "1",
     "creationDate": "2017-03-07 17:52:45"
     }, {
     "newCustomers": "1",
     "creationDate": "2017-08-08 18:08:16"
     }, {
     "newCustomers": "1",
     "creationDate": "2017-02-09 15:41:03"
     }, {
     "newCustomers": "1",
     "creationDate": "2017-09-09 16:13:48"
     }, {
     "newCustomers": "1",
     "creationDate": "2017-08-09 16:17:18"
     }, {
     "newCustomers": "1",
     "creationDate": "2017-02-10 09:47:40"
    }];


function totalizaClientes(clientes){
    var total = [0,0,0,0,0,0,0,0,0,0,0,0];
    for(var i=0; i<clientes.length;i++){
        let mes = new Date(clientes[i].creationDate).getMonth();
        total[mes]++;
    }
    return total;
}

When creating the chart you can do it this way:

series: [{
   name: 'BEARLabs',
   data: totalizaClientes(lin)
}]