Сложенная гистограмма не подходит должным образом

Question

Я пытался создать стек с гистограммой с таймингами на моей оси x, используя C3js из содержимого CSV, которое я получаю из Интернета. Ниже приведена часть содержимого csv, которое я хочу проанализировать.

Time Series,Category,Duration 
8/4/12 12:00 AM,Post Processor,387 
8/7/12 12:00 AM,Post Processor,407 
8/9/12 12:00 AM,Post Processor,398 
8/20/12 12:00 AM,Post Processor,327 
8/24/12 12:00 AM,Post Processor,391 
8/4/12 12:00 AM,Response Processing,517 
8/7/12 12:00 AM,Response Processing,543 
8/9/12 12:00 AM,Response Processing,532 
8/20/12 12:00 AM,Response Processing,436 
8/24/12 12:00 AM,Response Processing,522 
8/28/12 12:00 AM,Response Processing,457 
9/12/12 12:00 AM,Response Processing,471 
9/14/12 12:00 AM,Response Processing,453 
9/16/12 12:00 AM,Response Processing,510 
8/4/12 12:00 AM,External Calls,1035 
8/7/12 12:00 AM,External Calls,1087 
8/9/12 12:00 AM,External Calls,1064 
8/20/12 12:00 AM,External Calls,874 
8/24/12 12:00 AM,External Calls,1044 
8/28/12 12:00 AM,External Calls,915 
9/12/12 12:00 AM,External Calls,944 
8/4/12 12:00 AM,Internal Processing,1294 
8/7/12 12:00 AM,Internal Processing,1359 
8/9/12 12:00 AM,Internal Processing,1331 
8/20/12 12:00 AM,Internal Processing,1093 
8/24/12 12:00 AM,Internal Processing,1306 

Таким образом, столбец категории должен быть сгруппирован и представлен как значения. Поэтому мне пришлось выполнить ручную обработку содержимого. Я могу как-то генерировать график для этого, но стеки графов не являются правильными, и они перекрываются, я не уверен, почему. Я вставляю раздел генерации графа кода.

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     x: 'x', 
     xFormat: '%m/%d/%y %I:%M %p', 
     columns: final_data, 
     type: 'bar', 
     groups: val 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%b %d', 
       fit: true 
      } 
     } 
    }, 
    zoom: { 
     enabled: true 
    } 
}); 

где переменная final_data является массив массива с данными семантических, как показано ниже. Эта обработка была сделана для того, чтобы сделать вещи в правильной форме, чтобы сделать ее понятной для C3.

[ 
    ['x', ..... comma separated date in csv ....], 
    ['Post Processor', ..... values with post processor .....], 
    ['Response Processing', ..... values with request processing .....], 
    ['External Calls', .... values with external calls .....], 
    ['Internal Processing', ..... values with internal processing....] 
] 

Массив final_data генерируется очень расплывчатым кодом. Вклеивая его ниже.

var master_object = { 
    count: 0, 
    values: [], 
    data: [] 
}; 

var isKeyPresent = function(key) { 
    if(master_object.values.indexOf(key) == -1) 
     master_object.values.push(key); 

var trump = master_object.data; 
var check, returnable; 
trump.forEach(function loop(anElementInMaster, i) { 
    if(anElementInMaster[0] == key) { 
     check = 1; 
     returnable = i; 
     loop.stop = true; 
    } 
}); 
if(check != 1) 
     return -1; 
    else 
     return returnable; 
}; 

var kyaToBhiFunction = function(csvEntryArray) { 
    var index; 
    var key = csvEntryArray[0]; 
    if((index = isKeyPresent(key)) >= 0) { 
     master_object.data[index].push(csvEntryArray[1]); 
    } 
    else { 
     master_object.data.push(csvEntryArray); 
    } 
}; 

var resetMasterObject = function() { 
    master_object = { 
     count: 0, 
     values: [], 
     data: [] 
    }; 
}; 

playerForTimeSeries_c3 = function(csvReport) { 
    var csvReportArray = d3.csv.parseRows(csvReport).slice(1); 
    var timeseries_array = [], val = [], values; 
    var final_data; 
    csvReportArray.forEach(function(entry) { 
     timeseries_array.push(entry.shift()); 
     kyaToBhiFunction(entry); 
    }); 

    timeseries_array.unshift('x'); 
    final_data = master_object.data; 
    values = master_object.values; 

    // graph generation code continues here 
} 

и вот вид графа я получаю (штабеля бары, плохие оси Х) Пожалуйста, помогите мне с этим.

http://screencast.com/t/poax9WuIgv

Answer 1

Вы строили столбцы объекта неправильно. Каждая дата должна иметь запись для каждой из групп.

Вам нужно что-то вроде

var csvReportArray = d3.csv.parseRows(csvReport).slice(1); 

var final_data = [['x']]; 
var values = []; 

csvReportArray.forEach(function (entry) { 
    // date index 
    var xIndex = final_data[0].indexOf(entry[0]); 
    if (xIndex === -1) { 
     final_data[0].push(entry[0]); 
     xIndex = final_data[0].length - 1; 
     // push in 0 for all the groups 
     final_data.forEach(function (e, i) { 
      // skip the x array 
      if (i) 
       e.push(0); 
     }) 
    } 

    var valueIndex = values.indexOf(entry[1]) 
    if (valueIndex === -1) { 
     values.push(entry[1]) 
     valueIndex = values.length - 1; 
     // insert a new value (group) 
     final_data.push([entry[1]]); 
     // fill it with 0s 
     final_data[0].forEach(function (e, i) { 
      // skip the label 
      if (i) 
       final_data[valueIndex + 1].push(0); 
     }) 
    } 

    final_data[valueIndex + 1][xIndex] = entry[2]; 
}); 

var val = [values]; 

Поскольку вы выбрали временную ряд, ваш й массив будет интерпретироваться как даты, и они будут соответствующим образом разнесены т.е. 1 январь будет 5, как далеко от 5 января, как 5 января - с 6 января, даже если эти 3 являются последовательными элементами в массиве x.

Таким образом, вы можете избежать перекрытия бара за счет уменьшения ширины полосы. Однако точное значение зависит от ширины вашего графика и насколько близко 2 бара (что, в свою очередь, зависят от того, насколько близки значений х являются)

Вы можете установить ширину бара, пропуская его в через опцию

bar: { 
    width: 20 
}, 
... 

---

Fiddle - http://jsfiddle.net/7k2js964/

---