Флота прозрачная гистограмма с линиями?

Question

У меня был большой успех, получая флот, чтобы создавать линейные графики, отчасти из-за качества ответов на этом форуме!

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

Графики линий, представляющие температуры Гистограммы, которые отображаются, когда устройство активно (это значение 1 или 0 в RRD). Я хочу, чтобы это были прозрачные фоновые полосы, чтобы я мог видеть, правильно ли работает устройство и как долго оно работает.

У меня есть две проблемы;

• Я не могу получить данные устройства для отображения в виде прозрачных графиков. Просто данные линии
• Я еще не пробовал объединить два набора данных в одну диаграмму. Я хотел бы, чтобы данные панели устройств отображались как полный вертикальный стержень, прямо сейчас ось y от 0 до 1,2, поэтому в верхней части графика есть зазор. Когда я пытаюсь использовать вторую ось, я получаю номера справа, но линейный граф не показывает правильную ось.

Вот фрагмент данных, что я работаю с:

"data" : [ 
    { 
     "bars" : { 
      "fillColor" : { 
       "colors" : [ 
       { 
        "opacity" : 1 
       }, 
       { 
        "opacity" : 1 
       } 
       ] 
      }, 
      "lineWidth" : 0, 
      "show" : "true" 
     }, 
     "color" : "blue", 
     "data" : [ 
      [ 
       "1421280000000", 
       "0" 
      ], 
      [ 
       "1421452800000", 
       "0" 
      ], 
      [ 
       "1421625600000", 
       "0" 
      ], 
      [ 
       "1421798400000", 
       "1" 
      ], 
      [ 
       "1421971200000", 
       "1" 
      ], 
      [ 
       "1422144000000", 
       "1" 
      ], 
      [ 
       "1422316800000", 
       "0" 
      ], 
      [ 
       "1422489600000", 
       "0" 
      ], 
      [ 
       "1422662400000", 
       "0" 
      ], 
      [ 
       "1422835200000", 
       "0" 
      ] 
     ] 
    } 
     "label" : "D1", 
     "yaxes" : 1 
    }, 
    { 
     "bars" : { 
      "fillColor" : { 
       "colors" : [ 
       { 
        "opacity" : 1 
       }, 
       { 
        "opacity" : 1 
       } 
       ] 
      }, 
      "lineWidth" : 0, 
      "show" : "true" 
     }, 
     "color" : "red", 
     "data" : [ 
      ] 
       "1421280000000", 
       "1" 
      ], 
      [ 
       "1421452800000", 
       "1" 
      ], 
      [ 
       "1421625600000", 
       "1" 
      ], 
      [ 
       "1421798400000", 
       "0" 
      ], 
      [ 
       "1421971200000", 
       "1" 
      ], 
      [ 
       "1422144000000", 
       "0" 
      ], 
      [ 
       "1422316800000", 
       "0" 
      ], 
      [ 
       "1422489600000", 
       "0" 
      ], 
      [ 
       "1422662400000", 
       "1" 
      ], 
      [ 
       "1422835200000", 
       "0" 
      ] 
     ], 
     "label" : "D2", 
     "yaxes" : 1 
    } 
    ], 

Answer 1

Ваши бары имеют стандартную ширину 1 х блок оси и так как ваши значения х настолько велики, это означает, что полосы имеют ширину 0 пикселей. Добавить что-то вроде этого, чтобы ваши bars вариантов, чтобы сделать их шире и перейти оттуда:

"barWidth": 24 * 60 * 60 * 1000, // 1 day in milliseconds 

Вот fiddle с полным примером. Вы увидите, что некоторые бары скрывают друг друга, чтобы противостоять этому взгляду на бок о бок или сложенные бары plugins на сайте флота.