Css Graph

[admin]

You can move the legend to the bottom of the graph but it won't work correctly when there are two legends or too many selected trends.

Code:

.flotr-legend-left {
  left: auto !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
}
.flotr-legend-left table {
  display: block;
}
.flotr-legend-left table tr {
  display: block;
  float: left;
}

Or you can make it semi-transparent:

Code:

.flotr-legend {
  opacity: 0.5;
}
.flotr-legend:hover {
  opacity: 1;
}

Styles can also target Trend logs that are shown via iframe:

Code:

.trends.view-frame .flotr-legend {
  opacity: 0.5;
}
.trends.view-frame .flotr-legend:hover {
  opacity: 1;
}

It's also possible to add custom CSS class to the body element via location hash:

Code:

var hash = window.location.hash;
if (hash.length > 1) {
  document.body.classList.add(hash.substr(1));
}

For example http://LM_IP/scada-vis/trends#mycustomcls will have "mycustomcls" class added.