Kendo UI - диаграмма столбцов из массива JSON

Question

В моем приложении AngularJS я использую пользовательский интерфейс Kendo для создания диаграмм. У меня есть массив JSON, как показано ниже.

 [ 
      { 
      "date": "2016-06-24", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-23", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-22", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-21", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-20", 
      "competitor": [ 
      { 
       "price": 1223, 
       "competitorName": "competitorA" 
      }, 
         { 
       "price": 1222, 
       "competitorName": "competitorB" 
      } 
      ] 
     }, 
      { 
      "date": "2016-06-19", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-18", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-17", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-16", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-15", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-14", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-13", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-12", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-11", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-10", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-09", 
      "competitor":  [ 
         { 
       "price": 1345, 
       "competitorName": "competitorA" 
      }, 
         { 
       "price": 1604, 
       "competitorName": "competitorC" 
      } 
      ] 
     }, 
      { 
      "date": "2016-06-08", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-07", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-06", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-05", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-04", 
      "competitor": [ 
      { 
       "price": 1343, 
       "competitorName": "competitorB" 
      }, 
         { 
       "price": 1604, 
       "competitorName": "competitorC" 
      } 
      ] 
     }, 
      { 
      "date": "2016-06-03", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-02", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-06-01", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-05-31", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-05-30", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-05-29", 
      "competitor": [ 
       { 
       "price": 1370, 
       "competitorName": "competitorD" 
      } 
      ] 
     }, 
      { 
      "date": "2016-05-28", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-05-27", 
      "competitor": [] 
     }, 
      { 
      "date": "2016-05-26", 
      "competitor": [] 
     } 
    ] 

Я хочу создать диаграмму столбцов для этих данных. Диаграмма должна быть классифицирована по дате. Дело в том, что конкуренты меняются по дате по дате. В качестве примера на дату: 2016-06-20, конкуренты - конкурент & конкурент B. Также в некоторых датах нет конкурентов. У некоторых есть два или один. Это означает, что в графе столбцов количество столбцов столбцов изменяется по дате.

ОБНОВЛЕНО

Я просто хочу, чтобы установить цвета для серии диаграммы, как показано ниже.

CompetitorC - зеленый (каждый раз, когда CompetitorC должен быть зеленым) Каждый Другие конкуренты - синий с различными оттенками

И я хочу, чтобы установить диаграммы тему на «назад». Я пробовал следовать.

var transData = []; 
for (var i=0; i<data.length; i++){   
var date = data[i].date; 
if (data[i].competitor.length > 0){ 
    for (var j=0; j<data[i].competitor.length; j++){ 
    var obj = {} 
    obj.date = date; 
    obj.competitorName = data[i].competitor[j].competitorName; 
    obj.price = data[i].competitor[j].price; 
    if(obj.competitorName==='CompetitorC') { 
     obj.color = 'green'; 
    } 
    transData.push(obj);    
    }   
} else { 
    var obj = {} 
    obj.date = date; 
    obj.competitorName = ""; 
    obj.price = ""; 
    transData.push(obj); 
}   
} 

Тогда на графике:

series: [{ 
       field: 'price', 
       categoryField: "date", 
       name: "#= group.value #", 
       colorField: 'color' 
      }] 

Тогда мой график набор цвет зеленый к competitorC но легенда не меняется на зеленый. Как исправить это & Как я могу установить синий цвет с другими оттенками другим конкурентам?

Любые предложения будут высоко оценены.

Спасибо

Answer 1

Я бы превратить вас JSON, так и затем использовать группировку по competitorName. В итоге вы получите более простой массив:

[ 
    { date: "", competitorName: "", "price: ""}, 
    ... 
] 

Даты будут повторяться, если в эту дату существует более одного конкурента.

var transData = []; 
    for (var i=0; i<data.length; i++){   
    var date = data[i].date; 
    if (data[i].competitor.length > 0){ 
     for (var j=0; j<data[i].competitor.length; j++){ 
     var obj = {} 
     obj.date = date; 
     obj.competitorName = data[i].competitor[j].competitorName; 
     obj.price = data[i].competitor[j].price; 
     transData.push(obj);    
     }   
    } else { 
     var obj = {} 
     obj.date = date; 
     obj.competitorName = ""; 
     obj.price = ""; 
     transData.push(obj); 
    }   
    } 

С датой преобразованной, можно использовать функциональные группировки кендо источника данных:

$("#chart").kendoChart({ 
theme: "material", 
dataSource: { 
     data: transData, 
     group:{field: 'competitorName'}, 
     sort: {field: "date", dir: "asc"}, 
     schema: { 
      model: { 
       fields: { 
        date: { 
         type: "date" 
        } 
       } 
      } 
     } 
    }, 
    legend: { visible: true, position: "bottom" }, 
    seriesDefaults: {type: 'column',}, 
    series: [{ 
     field: 'price', 
     categoryField: "date", 
     name: "#= group.value #" 
    }], 
    tooltip: { 
    visible: true, 
    template: "#= series.name #<br />#= kendo.toString(category, 'yyyy-MM-dd') # = #= value #" 
    }, 
}); 

Вот додзё демо:

DEMO