Флот - объединить горизонтальную шкалу времени с «стандартной» линией

Question

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

Если я делаю это, я получаю Promos график на шкале времени успешно:

var d1 = [[(new Date("2016-12-01")).getTime(), 1], [(new Date("2016-12-10")).getTime(), 1]]; 
    var d2 = [[(new Date("2016-12-12")).getTime(), 2], [(new Date("2016-12-20")).getTime(), 2]]; 
    var d3 = [[(new Date("2016-12-21")).getTime(), 3], [(new Date("2016-12-31")).getTime(), 3]]; 
var plot = $.plot($chartDiv, [d1,d2,d3], { 
     xaxis:{mode:"time", timeformat:"%Y-%m-%d"}, 
     yaxis:{ticks:[[1, "Promo 1"],[2, "Promo 2"],[3, "Promo 3"]]} 
    }); 

Это производит что-то вроде этого: http://i.imgur.com/m0bjegQ.png

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

var d1 = [[(new Date("2016-12-01")).getTime(), 1], [(new Date("2016-12-10")).getTime(), 1]]; 
    var d2 = [[(new Date("2016-12-12")).getTime(), 2], [(new Date("2016-12-18")).getTime(), 2]]; 
    var d3 = [[(new Date("2016-12-16")).getTime(), 3], [(new Date("2016-12-24")).getTime(), 3]];   
    var d4 = [d1,d2,d3]; 
    var d5 = [ 
     [(new Date("2016-12-01")).getTime(),201000], 
     [(new Date("2016-12-02")).getTime(),201000], 
     [(new Date("2016-12-04")).getTime(),356897], 
     [(new Date("2016-12-05")).getTime(),201000], 
     [(new Date("2016-12-06")).getTime(),545122], 
     [(new Date("2016-12-07")).getTime(),100324], 
     [(new Date("2016-12-08")).getTime(),348645], 
     [(new Date("2016-12-09")).getTime(),201000], 
     [(new Date("2016-12-10")).getTime(),729646], 
     [(new Date("2016-12-11")).getTime(),206456], 
     [(new Date("2016-12-12")).getTime(),357713], 
     [(new Date("2016-12-15")).getTime(),280647], 
     [(new Date("2016-12-17")).getTime(),398654], 
     [(new Date("2016-12-18")).getTime(),412054], 
     [(new Date("2016-12-19")).getTime(),167545], 
     [(new Date("2016-12-20")).getTime(),512345], 
     [(new Date("2016-12-21")).getTime(),612454], 
     [(new Date("2016-12-22")).getTime(),760214], 
     [(new Date("2016-12-23")).getTime(),715546], 
     [(new Date("2016-12-24")).getTime(),650654], 
     [(new Date("2016-12-25")).getTime(),712547], 
     [(new Date("2016-12-26")).getTime(),780242], 
     [(new Date("2016-12-27")).getTime(),725454], 
     [(new Date("2016-12-28")).getTime(),799142] 
    ] 
    var chartData = [ 
     { 
      data:d4, 
      yaxis:1 
     }, 
     { 
      data:d5, 
      yaxis:2 
     } 
    ];  

    // plot it 
    var plot = $.plot($chartDiv, chartData, { 
     xaxis:{mode:"time", timeformat:"%Y-%m-%d"}, 
     yaxes: [ 
     { 
      position:"left", 
      ticks:[[1,"Promo 1"],[2,"Promo 2"],[3,"Promo 3"]], 
      max: 4 
     }, 
     { 
      position: "right", 
      max: 800000, 
     }], 
     grid: { 
      mouseActiveRadius: 50, 
      hoverable: true, 
      clickable: true 
     } 
    }); 

Результат таков: http://i.imgur.com/ChcvSbn.png

Я просто не могу показаться, чтобы получить промо, чтобы показать. Это потому, что два набора данных настроены по-разному? Если да, то как мне это сделать правильно? Мне нужно, чтобы «заполнить» даты для промо, так это выглядит, как это сделать:

var d1 = [ 
     [(new Date("2016-12-01")).getTime(), 1], 
     [(new Date("2016-12-02")).getTime(), 1], 
     [(new Date("2016-12-03")).getTime(), 1], 
     [(new Date("2016-12-04")).getTime(), 1], 
     [(new Date("2016-12-05")).getTime(), 1], 
     [(new Date("2016-12-06")).getTime(), 1], 
     [(new Date("2016-12-07")).getTime(), 1], 
     [(new Date("2016-12-08")).getTime(), 1], 
     [(new Date("2016-12-09")).getTime(), 1], 
     [(new Date("2016-12-10")).getTime(), 1] 
    ]; 

(я уверен, что я попробовал, что хорошо.)

Answer 1

Вам необходимо изменить формат вашего массива chartData, чтобы упасть в соответствии с тем, что ожидает платит как data format. Вместо определения нескольких наборов данных в одной серии (d1, d2, & d3 в d4), каждый набор данных это собственная серия:

var chartData = [ 
    { 
     data:d1, 
     yaxis:1 
    }, 
    { 
     data:d2, 
     yaxis:1 
    }, 
    { 
     data:d3, 
     yaxis:1 
    }, 
    { 
     data:d5, 
     yaxis:2 
    } 
];  

This JSFiddle имеет рабочий пример диаграммы. Если вам нужны цвета линий d1, d2 и d3 для соответствия, вы можете указать это в своем новом объекте chartData.

Answer 2

Ваш d4 массив внутри chartData - не правильный набор данных для Flot. Вы должны вставить d1, d2 и d3 прямо в chartData:

var chartData = [ 
    { 
     data:d1, 
     yaxis:1 
    }, 
    { 
     data:d2, 
     yaxis:1 
    }, 
    { 
     data:d3, 
     yaxis:1 
    }, 
    { 
     data:d5, 
     yaxis:2 
    } 
]; 

Смотрите эту fiddle для полного рабочего примера.