5

Tenho um objeto JSON com a seguinte estrutura:

[{
        "Codigo": 7,
            "Descricao": "Atividade 1",
            "CodigoMilestone": 6,
            "TempoRevisado": 2,
            "Inicio": "\/Date(1445738400000)\/",
            "InicioCedo": "\/Date(1445738400000)\/",
            "InicioTarde": "\/Date(-62135589600000)\/",
            "TerminoCedo": "\/Date(1445911200000)\/",
            "TerminoTarde": "\/Date(-62135589600000)\/",
            "Ativo": true,
            "Milestone": null,
            "Dependencia": [],
            "Dependencia1": []
    }, {
        "Codigo": 8,
            "Descricao": "Ativade 2",
            "CodigoMilestone": 6,
            "TempoRevisado": 2,
            "Inicio": "\/Date(1445997600000)\/",
            "InicioCedo": "\/Date(1445997600000)\/",
            "InicioTarde": "\/Date(1445911200000)\/",
            "TerminoCedo": "\/Date(1446084000000)\/",
            "TerminoTarde": "\/Date(1446084000000)\/",
            "Ativo": true,
            "Milestone": null,
            "Dependencia": [],
            "Dependencia1": []
    }]

Preciso modelar para que o código abaixo receba os valores desse objeto:

"dataProvider": [ {
    "milestone": "Infraestrutura",
    "atividade": [ {
        "InicioCedo": 1,
        "TempoRevisado": 2,
        "color": "#7B742C",
        "Descricao": "Instalar Banco de Dados"
    }, {
        "InicioCedo": 3,
        "TempoRevisado": 2,
        "color": "#7E585F",
        "Descricao": "Instalar Visual Studio"
    }]
} ],

O código completo está aqui: JS Fiddle

Deve algo parecido com isso, é que não domino Javascript

var atividades =
[{
    "Codigo":7,
    "Descricao":"Atividade 1", 
    "CodigoMilestone":6,
    "TempoRevisado":2, 
    "Inicio":"\/Date(1445738400000)\/",                
    "InicioCedo":"\/Date(1445738400000)\/", 
    "InicioTarde":"\/Date(-62135589600000)\/",         
    "TerminoCedo":"\/Date(1445911200000)\/",
    "TerminoTarde":"\/Date(-62135589600000)\/",
    "Ativo":true, 
    "Milestone":null, 
    "Dependencia":[],
    "Dependencia1":[]
}]

if (atividades != null) {
var dataprovider = '';    
 $.each(atividades, function (key, val) {
    dataprovider += '"dataProvider": [ {'
    '"milestone":' + val.CodigoMilestone,
    '"atividade": [ {'
        '"InicioCedo":' + val.InicioCedo + ',' +
        '"TempoRevisado":' + val.TempoRevisado + ',' +
        '"color": "#7B742C",'
        '"Descricao":' + val.Descricao +
    '}]'
'}],'
})          
}


  AmCharts.useUTC = true;
  var chart = AmCharts.makeChart( "chartdiv", {
  "type": "gantt",
  "theme": "dark",
  "marginRight": 70,
  "period": "bb",
  "dataDateFormat":"DD-MM-YYYY",
  "balloonDateFormat": "JJ:NN",
  "columnWidth": 0.5,
  "valueAxis": {
    "type": "month",
    "minimum": 1,
    "maximum": 30
   },
  "brightnessStep": 10,
  "graph": {
    "fillAlphas": 1,
    "balloonText": "<b>[[Descricao]]</b>: [[open]] [[value]]"
   },
   "rotate": true,
  "categoryField": "milestone",
   "segmentsField": "atividade",
   "colorField": "color",
   "startDate": "01-10-2015",
   "startField": "InicioCedo",
   "endField": "TerminoCedo",
   "durationField": "TempoRevisado",

    **dataprovider** // aqui ficaria a estrutura que está sendo construida no JAVASCRIPT

"chartScrollbar": {},
"chartCursor": {
    "valueBalloonsEnabled": false,
    "cursorAlpha": 0.1,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
    "fullWidth": true
},
"export": {
    "enabled": true
 }
} );
5
  • Você quer converter o primeiro objeto (um array, na verdade) no segundo? De onde vêm os valores do segundo objeto (i.e., milestone, color, Descricao, etc.)? Commented 30/10/2015 às 21:21
  • O color de preferência eu queria que ele alterna-se em 3 cores diferentes (para dar um destaque). O milestone vou ter que fazer um JOIN (para pegar a descrição do Milestone que tenho o CodigoMilestone ). o Descricao é o mesmo valor do Descricao do primeiro array.
    – user31040
    Commented 30/10/2015 às 21:27
  • Coloque mais informações na sua pergunta (por exemplo, a "tabela" dos milestones, o que significa o InicioCedo / TempoRevisado, etc.). Sem isso é impossível saber como transformar o primeiro JSON no segundo... Commented 30/10/2015 às 21:32
  • Pergunta atualizada.
    – user31040
    Commented 31/10/2015 às 16:07
  • 1
    Olha, fica difícil manipular um json como "string", então, crie o a var dataprovider como sendo um objeto var dataprovider = { milestone: "", atividade: [] }, assim você pode jogar o valor do objeto recebido direto no objeto dataprovider, assim dataprovider.milestone = val.CodigoMilestone, e para adicionar itens no array atividade, assim: dataprovider.atividade.push( { InicioCedo: val.InicioCedo, color: "#7B742C" } ). E ao final, você transforma esse objeto em uma string Json, assim: var strJson = JSON.stringify( dataprovider ) Commented 2/11/2015 às 2:28

2 Respostas 2

5
+150

Em primeiro lugar você precisa dos nomes das milestones, como já apontado em comentário. Vou assumir que você tem um objeto tipo:

var milestones = {
    "6":"Infraestrutura"
}

Ao receber o JSON, a primeira coisa que você precisa fazer (assumindo que você já o converteu de texto para um objeto JavaScript) é separar as atividades por milestones. Pois cada milestone será um objeto no dataProvider, que por sua vez terá uma lista de atividades que se aplicam a ela. Vamos começar fazendo isso, sem nenhuma conversão:

var separacao = { };
function adicionarAtividade(atividade) {
    if ( !separacao[atividade.CodigoMilestone] )
        separacao[atividade.CodigoMilestone] = [];

    separacao[atividade.CodigoMilestone].push(atividade);
}

atividades.forEach(adicionarAtividade);

Além disso, ajuda criar uma função auxiliar para converter uma atividade do formato que veio no JSON para o formato esperado no dataProvider. Eu não entendi muito bem a lógica dos seus campos que representam data, mas como o eixo X do seu gráfico vai de 0 a 30, imaginei que ele representa o dia do mês (se for, era pra ir até 31, não?):

var cores = ["#7B042C","#7B742C","#7E585F"];
var qualCor = 0;
function converterAtividade(atividade) {
    qualCor = (qualCor+1) % 3; // Alterna entre 3 cores diferentes
    return {
        InicioCedo: converterData(atividade.InicioCedo),
        TempoRevisado: atividade.TempoRevisado,
        color: cores[qualCor],
        Descricao: atividade.Descricao
    };
}

function converterData(data) {
    return new Date(parseInt(data.substring(6, data.length-2), 10)).getDate();
}

Depois, tudo o que você tem que fazer é criar o dataProvider. Como também já apontado em comentário, fazer isso manipulando strings é desnecessário, trabalhoso, sujeito a erros e com pior desempenho. Sugiro fazer manipulando objetos normais (mesmo porque o dataProvider é um objeto normal, não um JSON):

var dataProvider = [];
for ( var codMilestone in separacao ) {
    var atividades = separacao[codMilestone];
    dataProvider.push({
        milestone: milestones[codMilestone],
        atividade: atividades.map(converterAtividade)
    });
}

Então é só usá-lo na criação do seu gráfico:

...
"durationField": "TempoRevisado",
"dataProvider": dataProvider,
"chartScrollbar": {},
...

Exemplo completo no jsFiddle.

0

Use a função push() para adicionar elementos no array, você pode separar ele em camadas antes de renderizar:

Para mais informações sobre o gráfico, consulte a documentação:

AmCharts.useUTC = true;

function convertDate(dateConvert) {
  return  new Date(eval(dateConvert.match(/[0-9]+/gi).join(','))).getDate();
}
function convertDateStart(dateConvert) {
 var data = new Date(eval(dateConvert.match(/[0-9]+/gi).join(',')));
        var day = (data.getDate() < 10) ? data.getDate()+'0' : data.getDate();
        var month= (data.getMonth() < 10) ? data.getMonth()+'0' : data.getMonth();
        var year = data.getFullYear();
    return [day, month, year].join("-");
}

var atividades = [];
var collection = [{
        "Codigo": 7,
            "Descricao": "Atividade 1",
            "CodigoMilestone": 6,
            "TempoRevisado": 2,
            "Inicio": "\/Date(1445738400000)\/",
            "InicioCedo": "\/Date(1445738400000)\/",
            "InicioTarde": "\/Date(-62135589600000)\/",
            "TerminoCedo": "\/Date(1445911200000)\/",
            "TerminoTarde": "\/Date(-62135589600000)\/",
            "Ativo": true,
            "Milestone": null,
            "Dependencia": [],
            "Dependencia1": []
    }, {
        "Codigo": 8,
            "Descricao": "Ativade 2",
            "CodigoMilestone": 6,
            "TempoRevisado": 2,
            "Inicio": "\/Date(1445997600000)\/",
            "InicioCedo": "\/Date(1445997600000)\/",
            "InicioTarde": "\/Date(1445911200000)\/",
            "TerminoCedo": "\/Date(1446084000000)\/",
            "TerminoTarde": "\/Date(1446084000000)\/",
            "Ativo": true,
            "Milestone": null,
            "Dependencia": [],
            "Dependencia1": []
    }, {
        "Codigo": 9,
            "Descricao": "Ativade 3",
            "CodigoMilestone": 6,
            "TempoRevisado": 2,
            "Inicio": "\/Date(1445997600000)\/",
            "InicioCedo": "\/Date(1445997600000)\/",
            "InicioTarde": "\/Date(1445911200000)\/",
            "TerminoCedo": "\/Date(1446084000000)\/",
            "TerminoTarde": "\/Date(1446084000000)\/",
            "Ativo": true,
            "Milestone": null,
            "Dependencia": [],
            "Dependencia1": []
    }];

var dateStart = convertDateStart(collection[0].InicioCedo);

var c = 0;
for (var i in collection) {
    var colors = ["#7B742C","#7E585F",'#CF794A'];
    //primeiro registro
    if (i == 0) {
     atividades.push({
            "InicioCedo": convertDate(collection[i].InicioCedo),
            "TempoRevisado": collection[i].TempoRevisado,
            "color": color,
            "Descricao": collection[i].Descricao
        });
    //ultimo registro
    } else if (i == collection.length - 2) {
          atividades.push({
            "TerminoCedo": convertDate(collection[i].TerminoCedo),
            "TempoRevisado": collection[i].TempoRevisado,
            "color": color,
            "Descricao": collection[i].Descricao
        });
     //demais registros    
    } else {
      atividades.push({
            "TempoRevisado": collection[i].TempoRevisado,
            "color": color,
            "Descricao": collection[i].Descricao
        });
    }
    var color = colors[(c++) % 2];

}

var dataProvider = [{
                    "milestone": "Infraestrutura",
                    "atividades":atividades
                   }];

AmCharts.useUTC = true;
var chart = AmCharts.makeChart( "chartdiv", {
    "type": "gantt",
    "theme": "dark",
    "marginRight": 70,
    "period": "hh",
    "dataDateFormat":"YYYY-MM-DD",
    "balloonDateFormat": "JJ:NN",
    "columnWidth": 0.5,
    "valueAxis": {
        "type": "date",
        "minimum": 7,
        "maximum": 31
    },
    "brightnessStep": 10,
    "graph": {
        "fillAlphas": 1,
        "balloonText": "<b>[[Descricao]]</b>: [[open]] [[value]]"
    },
    "rotate": true,
    "categoryField": "milestone",
    "segmentsField": "atividades",
    "colorField": "color",
    "startDate": dateStart,
    "startField": "InicioCedo",
    "endField": "TerminoCedo",
    "durationField": "TempoRevisado",
    "dataProvider": dataProvider,
    "chartScrollbar": {},
    "chartCursor": {
        "valueBalloonsEnabled": false,
        "cursorAlpha": 0.1,
        "valueLineBalloonEnabled": true,
        "valueLineEnabled": true,
        "fullWidth": true
    },
    "export": {
        "enabled": true
     }
} );

Aqui tem ele funcionando

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