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