Line Chart series query

General
1

I have a chart setup what I needed to show positive and negative numbers in different colours,
how I have achieved this is to check the value before hand and set the topic to High or Low depending on its value.

But now I have graphs that look like this.
image
Ideally it would put both lines on top of each other, or not plot the 0 for the the other topic when the value isn't being used.

Below is the code I used to find the negativity

if (pl <= 0){
    pl2 = pl
    pl1 = 0
} else {
    pl2 = 0
    pl1 = pl
}
//series 1 #green
msg = {
    payload: pl1,
    timestamp: ts,
    topic: "high"
},

//series 2 #red
msg2 = {
    payload: pl2,
    timestamp: ts,
    topic: "low"
}

if (pl > 0){
    return msg
}
else {
    return msg2
}
2

The answer may be somewhere in this thread

3

That does get me part way there, I'm still showing 0 values though which I'd like to hide if possible.

image

4

What if you set null for values you don't need to show?

5

I'm not sure how I would do this because I only ever send one payload just with a different topic.

Edit: Also I hate how the time has decided to slant itself, looking at the docs now to see fi that can be controlled.

6

Infact after the chart has moved on a bit I've noticed its working exactly as required, just need to sort the text out and it'll be perfect
image

7

@hotNipi Sorry to tag you.

I use a chart pre-formatter to set my axis max and min to fix values so all charts (9) loot the same and can be compared without interpreting the axis.
Is there a way to fix the values using ui control as I am not having much luck.

8

If they really are always the same why not fix them in the config ?

image
image810Ă—108 1.86 KB

But yes you can set them with ui_control - see

9

I have set them in the config, but since adding the ui_control lines above it is ignoring them

image

10

@hotNipi @dceejay
Its funny both those code work individually but when I put them together whichever one is on top wins.

I'm currently using

ui= {
        options: {
            "Max": 60,
            "Min": -140
        },
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }

but that doesn't stack the bars, if I put the mix/max at the bottom it does fit the axis.
Hopefully I'm just doing something stupid.

I pass ui_control: ui when I build my message

edit: Sorry, when my code is like above I get fixed axis, when I use

ui= {
        options: {
            "Max": 60,
            "Min": -140,
        
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }}
    }

I lose the fix axis

11

@dceejay I notice that your the author of that config-fields.md you link me.

I've been playing with the interactive bit on this website: Stacked Bar Chart | Chart.js
And using

const config = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked'
      },
    },
    responsive: true,
    scales: {
      xAxes: {
        stacked: true,
      },
      yAxes: {
        stacked: true,
        min:-75,
        max:50
      }
    }
  }
};

limits the data as you would expect, but when I use the same options layout for the node it doesn't.
I don't know if the ui dashboard isn't using the latest version of Chart.js. I 'm wondering if you could explain why it doesn't work?

12

After a bit more digging and looking at the angular-chartjs documentation for 2.6.0 I see the options used to be under ticks. So I can do what i need to do by using

ui= {
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true,
                ticks: {
                    max: 60,
                    min: -140
                }
            }]
        }
    }    
}

What a journey, thanks for you time.

1 Like
13

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.