Min/Max Value

643 views
Skip to first unread message

Chris Abrams

unread,
Sep 15, 2011, 1:21:26 AM9/15/11
to Smoothie Charts
Will there be an update that allows for manually setting the min/max
values?

I appreciate the hard work that went into creating this. It's pretty
sweet.

Mike Sheen

unread,
Feb 22, 2013, 4:23:57 AM2/22/13
to smoothi...@googlegroups.com
I wanted this also for my cpu usage graphs.  I need the graph to always have 0% as the lowest value, and 100% as the highest value to stop smoothie auto scaling it. I ended up simply adding a data value for 0 and 100 which are invisible (transparent), and this achieves the same result.

For example :

When defining the chart and adding the time series I did the following :

var cpuc00smoothie = new SmoothieChart({ grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 250, verticalSections: 6 } });
cpuc00smoothie.addTimeSeries(cpulinec00l01, { strokeStyle: 'rgb(0, 255, 0)', fillStyle: 'rgba(0, 255, 0, 0.4)', lineWidth: 3 });
cpuc00smoothie.addTimeSeries(cpulinec00l02, { strokeStyle: 'rgb(0, 0, 0)', fillStyle: 'rgba(0, 0, 0, 0.0)', lineWidth: 3 });
cpuc00smoothie.addTimeSeries(cpulinec00l03, { strokeStyle: 'rgb(0, 0, 0)', fillStyle: 'rgba(0, 0, 0, 0.0)', lineWidth: 3 });
cpuc00smoothie.streamTo(document.getElementById("cpu00canvas"), 1000);

Note I've added 3 time series - the 0 value, the 100% value and the actual value.  The 0 and 100% value have their rgba set to be 0, 0, 0, 0.0 - meaning invisible.

Then, when I add the values, I add 3 values instead of just one : 0, 100 and the actual value

cpulinec00l02.append(new Date().getTime(), 100);
cpulinec00l03.append(new Date().getTime(), 0);
cpulinec00l01.append(new Date().getTime(), result.cpu00);

Hope this helps.

This can be seen in action here : http://sheen.id.au/serverstatus/

Mike

Drew Noakes

unread,
Feb 22, 2013, 6:04:11 AM2/22/13
to smoothi...@googlegroups.com
Hi Mike,

Can't you achieve the same by specifying a minValue and maxValue on your time series options?

cpuc00smoothie.addTimeSeries(cpulinec00l01, { strokeStyle: 'rgb(0, 255, 0)', fillStyle: 'rgba(0, 255, 0, 0.4)', lineWidth: 3, minValue: 0, maxValue: 100 });

That kind of thing seems to work for me.

Drew.


--
You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.
To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-char...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Drew Noakes

unread,
Feb 22, 2013, 6:05:36 AM2/22/13
to smoothie-charts
My mistake -- the setting is on the chart options:

new SmoothieChart({ minValue: 0, maxValue: 100, grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 250, verticalSections: 6 } });

Mike Sheen

unread,
Feb 25, 2013, 3:24:57 AM2/25/13
to smoothi...@googlegroups.com
Well, how about that - yes you can, that works great.  I didn't see anywhere the ability to set the minValue and maxValue... I've adjusted my javascript and it works great.  

Thanks !
Reply all
Reply to author
Forward
0 new messages