Possible to draw two graphs, with 1 metric but different color?

[seeker25]

Hello, I was toying around with Graphene, it's a beautiful thing excellent work!
I had been trying to figure out how to change the line and stroke color for an individual graph.
It seems like something very simple to do but I cannot figure it out.

I've tried setting it in the div container like that, but it only changes the horizontal lines color and not the color of the graph itself.

I know if i go into the CSS and change h-col-1 then all of my graphs will change in color. But i'm wanting to change 1 graph for example to blue tracelines and have another graph with green tracelines.

It's probably something very silly.

Thank you.

[jondot]

Thanks!
I don't think I ever implemented a dash with different colors per metric because I never needed it.
Nevertheless, I think if you need it, then it must be useful.
I'll be building some new dashboards this week, I'll try and see if there's an easy way of doing what you need and keep you updated

[seeker25]

I was thinking an option in the example-dash.js file, (where you can specify the size etc). It would use the h1, h2 (i think that's what they are labeled) etc color schemes in the CSS.
IE:

example-dash.js

          "Zoomed Uploads Bandwidth": {
  source: "http://blahblahblha/render?from=-15minutes&until=now&width=300&height=130&target=system.loadavg_1min&fgcolor=000000&bgcolor=FFFFFF&majorGridLineColor=C0C0C0&format=json",
  TimeSeries: {
    num_labels: 1,
    width: 500,
    height: 150,
    padding: 0,
    parent: '#largeg1-3',
    title: 'Upload Bandwidth',

color: <=============== here
}

[jondot]

Yes, that makes sense, thanks. I'll try it this week - if it can't be done using the existing implementation (intuitively I think my first try will be CSS child rules 1st, 2nd, last-child etc.) then I will probably implement it the way you're suggesting.

[seeker25]

Well if you get it going using the CSS child rules, please show me how! I spent a good chunk of time trying to figure it out. Thanks again jondot :).

[jondot]

So I looked at this for a bit, looks like I didn't intend for such functionality so Graphene doesn't support it at its core.
You have a couple of solutions in the meanwhile, all using CSS, you can choose what you feel more comfertable with.

1. Wrap the graph you want to change color for in a div and give it a unique id (or give an existing div containing it a unique id).
   For this DOM container, we will want to override the h-col-X definitions of color. This way you can:

#my-graph .h-col-1{ stroke: red; fill: red;}
#my-graph .h-col-2{ stroke: green; fill: green;}

/* this is needed because it was overwritten by above definitions */
.line{ fill:none;}

1. Wrap your graph again with your ID (here my-graph), surgically change colors by using nth-child CSS selectors like so:

 #my-graph .area:nth-last-child(3)   {
        stroke:purple;
        fill:purple;
 }

The position of the .area path will change depending on how many graph lines you have in one timeseries view.

hope this helps.

Please let me know if you need a more elaborate solution, in that case I'll consider implementing a color selection solution at the Graphene core. I always prefer leaving styling to CSS - but if there's a good reason I'd be happy to consider it.

[seeker25]

THANK YOU JONDOT!

The second one works perfectly. First makes it a little strange. I was trying stroke and fill before but had no idea about the nth-last-child.

[seeker25]

I realised later on down the line that the second one didn't apply styling to the legend.

The first one would still break because line isn't actually being set to none (still overwritten by the first and second rules.)

    #s1_g1-1 .h-col-1 
{
    stroke:teal;
    fill:teal;
}
    #s1_g1-1 .line.h-col-1 
{
    stroke:teal;
    fill:none;
}

worked great 👍

[jondot]

Excellent! happy this is working for you :)
I'll close this one but feel free to reopen if you have more questions in this topic 👍