1

Olá, não consigo criar um chart line usando o plugin Highcharts, onde o eixo X é separado por meses (Jan, Fev, etc...) e o eixo Y é o número de novos clientes baseado nesses meses.

Abaixo está como o meu json está formado.

[{
 "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"
}]

Eu gostaria de pegar esses dados acima e colocar no formato abaixo. Onde no parâmetro "data" de "series" seria a quantidade de novos clientes e no eixo X, seria o "creationDate" formatado e separado por mês "Jan, Fev, 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]
        }]
});
4
  • Poderia colocar o código fonte que tentou? o problema é agrupar?
    – rray
    24/08/2017 às 15:14
  • Coloquei ali @rray. 24/08/2017 às 15:23
  • Esse gráfico vai exibir os valore somente de um ano?
    – rray
    24/08/2017 às 15:51
  • Sim, somente de um ano. Digamos que desde Jan/2017 até Dez/2017 24/08/2017 às 15:54

1 Resposta 1

1

O problema parece ser a forma da totalização no json ela está como o timestamp quando deveria ser pelo mês. Escrevi uma função que faz isso. Basicamente o que ele faz é criar um array de 12 posições que represetam os meses (0 para janeiro e 11 para dezembro). Depois pego a string em creationDate e crio uma data e obtenho o mês para saber qual é a posição do array a ser incrementada.

Modifiquei os valores do json para melhorar a exibição do gráfico.

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;
}

Na hora de criar o gráfico pode fazer dessa forma:

series: [{
   name: 'BEARLabs',
   data: totalizaClientes(lin)
}]
1
  • Obrigado @rray. Fiz algumas modificações e ficou exatamente como eu estava tentando fazer. 24/08/2017 às 17:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .