Css Graph

[Chris]

Bonjour,

is it possible to change the color on the charts?

- Background color
- Curve
- Caption
- Title (green)

Thanks

[admin]

Do you mean the graph that shows data from object logs or trend logs?

[Chris]

Do you mean the graph that shows data from object logs or trend logs?

Thank you for your reply. The graph that displays the temperature history, electricity consumption...

Thanks.

[admin]

Do you mean this graph that's the part of standard visualization?
   

[Chris]

Do you mean the graph that shows data from object logs or trend logs?

Thank you for your reply. The graph that displays the temperature history, electricity consumption...

Thanks.

Do you mean this graph that's the part of standard visualization?

Hello,
attached is a link to the graph
Thank

[Daniel]

Try this CSS to hide the buttons and change background.

Code:

.trends .navbar .btn {
   display: none !important;
}

.trends .btn-group {
   display: none !important;
}

.trends .container {
  background: black!important;
} 

[Chris]

Thank you Daniel, it's perfect !

[AlexLV]

Hi, is possible to do for selected graphs, not for all?
Also, can we change position of lines (graphs description)? Sometimes not possible to see graphs behind description. Could description be located outside graph zone?

BR,

Alex

[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.

[AlexLV]

Super, thanks!!

As always clear answer

Alex

[Chris]

Hello,

can you tell me if it is possible to put the 2 temperature curves at the same level, on the graph they are shifted.

Thanks, have a good day.

[admin]

Both objects must have the same units. If units are different then two Y axis are used.

[Chris]

Both objects must have the same units. If units are different then two Y axis are used.

Ok, Thank you !

[victor.back]

Try this CSS to hide the buttons and change background.

Code:

.trends .navbar .btn {
   display: none !important;
}

.trends .btn-group {
   display: none !important;
}

.trends .container {
  background: black!important;
} 

Can I use this only for a specific iFrame with additional classes?

[admin]

Add this to Custom JavaScript:

Code:

$(function() {
  var hash = window.location.hash;

  if (hash.indexOf('#cls-') == 0) {
    var cls = hash.split('-')[1];
    document.body.classList.add(cls);
  }
});

If you set iframe URL to /scada-vis/trends#cls-test then the body element will get an additional class named test

[fee_connect]

Try this CSS to hide the buttons and change background.

Code:

.trends .navbar .btn {
   display: none !important;
}

.trends .btn-group {
   display: none !important;
}

.trends .container {
  background: black!important;
} 

Can I use this only for a specific iFrame with additional classes?

Thank you this works great! In my case I want to keep the buttons but don't want the select colour to be green but, say, #005698. Can you help?

[admin]

Try this:

Code:

.nav .a {
  color: #005698;
}

.nav .a:hover {
  box-shadow: inset 0 0 0 1px #005698;
}

.nav .active .a, .nav .active .a:hover, .nav .a.active,
.datepicker .active, .datepicker .active:hover {
  background: #005698;
}

[fee_connect]

That's perfect! Thank you!
last one: the customer wants the colour of the curves to match its graphic identity, I need curve #1 to be #005698, #2 to be #D9632D, ...
can you help me?

Thanks

[jose_dli]

Hello,

Is it possible to remove the grid, horizontal and vertical lines, at the bottom of the graph? or reduce their number.

Thanks,

[admin]

Grid colors can be changed or hidden (if set to transparent) via CSS:

Code:

.flotr-grid-color {
  background-color: #005698;
}

.flotr-grid-minor-color {
  background-color: transparent;
}