var trace1 = {
  name: "Energy consumption",
  x: [
    "1.3.2019 00:00",
    "1.3.2019 03:00",
    "1.3.2019 06:00",
    "1.3.2019 09:00",
    "1.3.2019 12:00",
    "1.3.2019 15:00",
    "1.3.2019 18:00",
    "1.3.2019 21:00"
  ],
  y: [20, 50, 92, 82, 14, 20, 50, 62],
  text: ['20 kw/H', '50 kw/H', '92 kw/H', '82 kw/H', '14 kw/H', '20 kw/H', '50 kw/H', '62 kw/H'],
  hoverinfo: 'x+text+name',
  type: "bar",
  marker: {
    color: '#270657'
  }
};

var trace2 = {
  name: "Air pressure",
  x: [
    "1.3.2019 00:00",
    "1.3.2019 03:00",
    "1.3.2019 06:00",
    "1.3.2019 09:00",
    "1.3.2019 12:00",
    "1.3.2019 15:00",
    "1.3.2019 18:00",
    "1.3.2019 21:00"
  ],
  y: [81.32, 72.1, 121.41, 71.31, 40.98, 30.96, 51.2, 71.92],
  text: ['81.32 Pa', '72.1 Pa', '121.41 Pa', '71.31 Pa', '40.98 Pa', '30.96 Pa', '51.2 Pa', '71.92 Pa'],
  hoverinfo: 'x+text+name',
  type: "line",
};

var trace3 = {
  name: "Lights",
  x: [
    "1.3.2019 00:00",
    "1.3.2019 03:00",
    "1.3.2019 06:00",
    "1.3.2019 09:00",
    "1.3.2019 12:00",
    "1.3.2019 15:00",
    "1.3.2019 18:00",
    "1.3.2019 21:00"
  ],
  y: ["off", "on", "on", "on", "off", "off", "on", "on"],
  type: "line",
  line: {
    shape: "hv",
    color: '#45b5c6'
  },
  yaxis: "y2"
};

var data = [trace1, trace2, trace3];

layout = {
  showlegend: false,
  yaxis2: {
    type: "category",
    side: "right",
    overlaying: "y"
  }
};

Plotly.newPlot("myDiv", data, layout, {
  responsive: true,
  displaylogo: false
});