Logic Machine Forum
Css Graph - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Css Graph (/showthread.php?tid=4282)

Pages: 1 2

Css Graph - Chris - 04.10.2022

Bonjour,

is it possible to change the color on the charts?

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

Thanks

RE: Css Graph - admin - 04.10.2022

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

RE: Css Graph - Chris - 04.10.2022

(04.10.2022, 06:49)admin Wrote: 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.

RE: Css Graph - admin - 05.10.2022

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

RE: Css Graph - Chris - 05.10.2022

(04.10.2022, 18:24)Chris Wrote:
(04.10.2022, 06:49)admin Wrote: 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.

(05.10.2022, 06:14)admin Wrote: Do you mean this graph that's the part of standard visualization?
Hello,
attached is a link to the graph
Thank
[Image: njb8.png]

RE: Css Graph - Daniel - 05.10.2022

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;
} 


RE: Css Graph - Chris - 05.10.2022

Thank you Daniel, it's perfect !

RE: Css Graph - AlexLV - 06.10.2022

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

RE: Css Graph - admin - 06.10.2022

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.

RE: Css Graph - AlexLV - 06.10.2022

Super, thanks!!

As always clear answer

Alex

RE: Css Graph - Chris - 07.10.2022

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.

RE: Css Graph - admin - 07.10.2022

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

RE: Css Graph - Chris - 07.10.2022

(07.10.2022, 06:08)admin Wrote: Both objects must have the same units. If units are different then two Y axis are used.
Ok, Thank you !

RE: Css Graph - victor.back - 31.07.2023

(05.10.2022, 14:43)Daniel Wrote: 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?

RE: Css Graph - admin - 31.07.2023

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

RE: Css Graph - fee_connect - 04.09.2023

(31.07.2023, 08:55)victor.back Wrote:
(05.10.2022, 14:43)Daniel Wrote: 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?

RE: Css Graph - admin - 05.09.2023

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;
}


RE: Css Graph - fee_connect - 05.09.2023

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

RE: Css Graph - jose_dli - 25.09.2023

Hello,

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

Thanks,

RE: Css Graph - admin - 25.09.2023

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;
}