Нужна помощь в подготовке данных для диаграммы флота

Question

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

Ниже мой ответ сервера

"date_task_ids_relation_query": { 
    "1420761600000": { 
     "\"ODBC\"": 0, 
     "\"Oracle\"": 10, 
     "\"Salesforce\"": 10 
    }, 
    "1414281600000": { 
     "\"ODBC\"": 0, 
     "\"Oracle\"": 1, 
     "\"Salesforce\"": 1 
    }, 
    "1414972800000": { 
     "\"ODBC\"": 0, 
     "\"Oracle\"": 10, 
     "\"Salesforce\"": 10 
    }, 
    "1414713600000": { 
     "\"ODBC\"": 0, 
     "\"Oracle\"": 3, 
     "\"Salesforce\"": 3 
    }, 
    "1413504000000": { 
     "\"ODBC\"": 0, 
     "\"Oracle\"": 1, 
     "\"Salesforce\"": 1 
    } 
} 

Необходимость подготовки выше данных сервера в формате ниже, так что он может потребляться ФЛОТ графика. Или есть другой способ?

[ 
    { 
    "data": [ 
     [ 
     1420588800000, 
     150 
     ], 
     [ 
     1420675200000, 
     149 
     ], 
     [ 
     1420761600000, 
     140 
     ], 
     [ 
     1420848000000, 
     91 
     ] 
    ], 
    "label": "ODBC", 
    "bars": { 
     "show": "true", 
     "barWidth": 36000000, 
     "fillColor": "#8CC051", 
     "order": 1, 
     "align": "center" 
    }, 
    "stack": true 
    }, 
    { 
    "data": [ 
     [ 
     1420502400000, 
     30 
     ], 
     [ 
     1420588800000, 
     32 
     ], 
     [ 
     1420675200000, 
     31 
     ], 
     [ 
     1420761600000, 
     26 
     ] 
    ], 
    "label": "Oracle", 
    "bars": { 
     "show": "true", 
     "barWidth": 36000000, 
     "fillColor": "#967BDC", 
     "order": 1, 
     "align": "center" 
    }, 
    "stack": true 
    }, 
    { 
    "data": [ 
     [ 
     1420502400000, 
     14 
     ], 
     [ 
     1420588800000, 
     19 
     ], 
     [ 
     1420675200000, 
     9 
     ], 
     [ 
     1420761600000, 
     5 
     ] 
    ], 
    "label": "Salesforce", 
    "bars": { 
     "show": "true", 
     "barWidth": 36000000, 
     "fillColor": "#5D9CEC", 
     "order": 1, 
     "align": "center" 
    }, 
    "stack": true 
    } 
] 

Просьба помочь в подготовке данных для карты флота.

Примечание: 1420761600000 отметка времени на оси х

Обновлено с plunker link here

Попытка сопоставить данные здесь, ниже код может оказать ФЛОТ диаграмму, но отображение неверно , поэтому вам нужна помощь. Пожалуйста помоги.

var colorCodes = ["#8CC051","#967BDC","#5D9CEC","#FB6E52","#EC87BF","#46CEAD","#FFCE55","#193441","#193441","#BEEB9F","#E3DB9A","#917A56"; 
    angular.forEach(buckets, function(value, key) {    
     var objectSize = Object.size(value); 
     var dataArray = [], index = 0, label = ""; 
     angular.forEach(value, function(val, k) { 
      var dataArr = []; 
      dataArr.push('['+key+', '+val+']'); 
      dataArray.push(dataArr); 
      //console.log(val+"..."+k); 

      label = k.replace("\"", ""); //Updated 
      label = label.replace("\"", ""); 
     }) 
     var barObject = '"bars": {"show": "true", "barWidth":36000000, "fillColor": "'+colorCodes[idx]+'", "order": 1, "align": "center"}, "stack": true'; 
     var object = '{ "data": ['+dataArray+'], "label": "'+label+'", '+barObject+'}'; 
     //console.log(object); 
     mainArray.push(JSON.parse(object)); 
     idx++;    
    }); 

добавлен стек Lib в plunker here

Answer 1

Для стартера бы карты это временный объект, который имеет типов в качестве ключей и каждое свойство имеет массив х, у значения массивов

var tmp={}; 
for(time in data){ 
    var unix = 1*time; 
    for(type in data[time]){ 
    if(!tmp[type]){ 
     tmp[type] = []; 
    } 
    tmp[type].push([unix, data[time][type]]) 
    } 
} 

tmp выглядит

{ 
"ODBC": [ 
    [ 
     1420761600000, 
     0 
    ] 
} 

DEMO

Затем цикл по tmp объект на карту данные, необходимые для ФЛОТ

var flot=[], ctr=0; 
for(type in tmp){ 
    var typeData={ 
    label: type, 
    bars:{ 
     "show": "true", 
     "barWidth": 36000000, 
     "fillColor": colorCodes[ctr], 
     "order": 1, 
     "align": "center" 
    }, 
    data:tmp[type] 
    } 
    flot.push(typeData); 
    ctr++; 
} 
$scope.flotData=flot; 

DEMO 2