Need help in preparing data for flot chart

Question

I am getting data from server which I need to prepare in such a way that it can be consumed by flot chart .

Below is my server response

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

Need to prepare above server data in below format so that it can be consumed by flot chart. Or is there any other way?

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

Please help in preparing data for flot chart.

Note : 1420761600000 is a timestamp on x axis

Updated with a plunker link here

Trying to map the data here, the below code is able to render flot chart, but mapping is incorrect, so need some help. Please help.

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

added stack lib in plunker here

Answer 1

For starter would map this to a temporary object that has the types as keys and each property has an array of the x,y values arrays

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 looks like

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

DEMO

Then loop over the tmp object to map the data needed for flot

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