Highcharts - Line chart with date

Question

Highcharts - Line chart with date

Navigation

#1 by (1 votes)

1

Hello, I can not create a chart line using the Highcharts plugin, where the X axis is separated by months (Jan, Feb, etc ...) and the Y axis is the number of new clients based on these 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 get the above data and put it in the format below. Where the "date" parameter of "series" would be the number of new clients and the X-axis 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]
        }]
});

jquery json highcharts

asked by anonymous 24.08.2017 / 16:56

1 answer

Open Program with dragging file (PDF) and recovering the path Array inside PHP Array

score 1 · Accepted Answer

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

I have modified the json values to improve the graph 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;
}

At the time of creating the chart you can do this:

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