Changing Graph default colors

dafyddhirst · 17 April 2019 11:47

Can someone point me to where the graph module picks the default colors. im getting really board of changing them all the time.
Ive had a look but its not jumping out at me.

Ideally if just the first 4 can be changed to brown black gray and blue it would make my life easier.
Thanks

pb66 · 17 April 2019 15:38

Is this it?

github.com

emoncms/emoncms/blob/9.9.8/Lib/flot/jquery.flot.js#L517


      
          
          function Plot(placeholder, data_, options_, plugins) {
              // data is on the form:
              //   [ series1, series2 ... ]
              // where series is either just the data as [ [x1, y1], [x2, y2], ... ]
              // or { data: [ [x1, y1], [x2, y2], ... ], label: "some label", ... }
          
              var series = [],
                  options = {
                      // the color theme used for graphs
                      colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
                      legend: {
                          show: true,
                          noColumns: 1, // number of colums in legend table
                          labelFormatter: null, // fn: string -> string
                          labelBoxBorderColor: "#ccc", // border color for the little label boxes
                          container: null, // container (as jQuery object) to put legend in, null means default on top of graph
                          position: "ne", // position of default legend container within plot
                          margin: 5, // distance from grid edge to default legend container within plot
                          backgroundColor: null, // null means auto-detect
                          backgroundOpacity: 0.85, // set to 0 to avoid background

I think it is copied straight over from flot

github.com

flot/flot/blob/v3.0.2/source/jquery.flot.js#L105


      
          // The top-level container for the entire plot.
          function Plot(placeholder, data_, options_, plugins) {
              // data is on the form:
              //   [ series1, series2 ... ]
              // where series is either just the data as [ [x1, y1], [x2, y2], ... ]
              // or { data: [ [x1, y1], [x2, y2], ... ], label: "some label", ... }
          
              var series = [],
                  options = {
                      // the color theme used for graphs
                      colors: ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
                      xaxis: {
                          show: null, // null = auto-detect, true = always, false = never
                          position: "bottom", // or "top"
                          mode: null, // null or "time"
                          font: null, // null (derived from CSS in placeholder) or object like { size: 11, lineHeight: 13, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps" }
                          color: null, // base color, labels, ticks
                          tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)"
                          transform: null, // null or f: number -> number to transform axis
                          inverseTransform: null, // if transform is set, this should be the inverse function
                          min: null, // min. value to show, null means set automatically

dafyddhirst · 17 April 2019 17:18

Thanks for that . It should indeed work Doesn’t seem to make any difference… The Hunt Continues

pb66 · 17 April 2019 18:04

Just took a peek at the source of a random page and searched for “flot”, it seems to only ref <SERVER>/Lib/flot/jquery.flot.min.js navigate to that page and search for the color code “#edc240” shows it is included just once, so I’m guessing that’s where it needs changing perhaps?

That file contains just one (very long) line so it’s not easy to manipulate or link to a specific point. But if you look at the “raw” github page (https://raw.githubusercontent.com/emoncms/emoncms/9.9.8/Lib/flot/jquery.flot.min.js) and search “edc240” you can find it, (likewise I expect you can find it using ctrl-w if you open it with nano locally, maybe at /var/www/html/emoncms/Lib/flot/jquery.flot.min.js).

I would expect you would need to force a browser refresh (ctrl-f5) to reload the file from your server once edited though. Please let us know if that works.

[edit - Many of the default config in that file gets overridden by individual visualisations, perhaps the default colors could be (easily?) overridden by inserting a cleverly placed line in emoncms (eg in the theme?), but that’s all a bit above my pay grade I’m afraid]

dafyddhirst · 17 April 2019 18:15

Your a LEGEND!!!
Thats working nicely. i had been in that earlier but not managed to find it .
Ill have a tinker now see what else can be achieved.
Thanks Buddy

mcockerell · 23 October 2024 13:28

I came across this post on the forum and, although 5 years old, it relates to something I wish to do.

I am currently monitoring a number of temperatures and the on/off status of several pumps around our thermal store, 9 or 10 values in total - I need them all on a single graph so that I can see the various interactions over time.
As far as I can tell ‘flot’ provides 5 ‘base’ colours by default, any further ones required are generated from these - the problem is that they are not that distinguishable from the base set.
I have tried editing the file ‘jquery.flot.merged.js’ (this seems to be where the default set is now defined) to add additional base colours, and it almost worked - the extra colors came out black.
Can anyone advise how I might fix this?

Update: Oops! It works perfectly if you use the correct format for the new color values.

Thanks.