joewalnes / smoothie Goto Github PK
View Code? Open in Web Editor NEWSmoothie Charts: smooooooth JavaScript charts for realtime streaming data
Home Page: http://smoothiecharts.org
License: Other
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data
Home Page: http://smoothiecharts.org
License: Other
Hi,
And when pressing this key again, to resume the scrolling?
I could even use this in animation in a presentation! </selfish_thought>
Anyway, great code you wrote here!
Step charts look quite fuzzy. It would be nice if there were an option for sharp lines, similar to the option that is available for grid lines.
I hate to be that guy, but it doesn't appear to work in IE8. Any chance of supporting it?
Test this page in Firefox:
http://jsfiddle.net/drewnoakes/ZWHbm/
Clicking the button has no effect.
Thanks to Natkamol Sornprayad for the bug report.
It seems to have an issue when values are interpreted as Strings and values are negative. The comparison does not work the way it should, and the maxValue / minValue calculation is wrong.
To fix the issue, I have added a "parseFloat(value)" at first line of the method "TimeSeries.append".
I think it should be safer to include it in the code instead of making sure people are sending numeric values. When working with JSON this is not always true :)
On https://github.com/joewalnes/smoothie/blob/master/smoothie.js#L571, dimensions
should use canvas.width
/canvas.height
.
In my use case, the canvas
element is sized responsively (width: 100%
, that sort of stuff) and in the case that its actual dimensions don't match the element's width
and height
attributes, the chart is squeezed or stretched.
The TimeSeries
class is missing public members:
minValue: number;
maxValue: number;
The SmoothieChart
class is missing public member:
options: IChartOptions;
Use Case:
yRangeFunction: (): Smoothie.IRange => {
const Min = Math.min(line1.minValue, line2.minValue) - 5; // Access minValue
const Max = Math.max(line1.maxValue, line2.maxValue) + 5; // Access maxValue
smoothie.options.grid.verticalSections = Max - Min; // Change element within options
return {max: Max, min: Min};
},
Hey i was using your library for a little project and i just couldn't get the chart to fit in the container. This was only when the container was set with a percentage. When i used absolute numbers there wasn't an issue.
After exploring a little bit through your library i found that it couldn't get the height and width attributes.
I fixed the problem by just getting the width and height from the id's, but this ofcourse isn't a fix for the library.
In Smoothiechart.prototyppe.resize = function() -at line 438
var dpr = window.devicePixelRatio;
//var width = parseInt(this.canvas.getAttribute('width')); //getting NaN
//var height = parseInt(this.canvas.getAttribute('height')); //getting NaN
var width = document.getElementById("chart-div").width; //added these as a fix
var height = document.getElementById("chart-div").height; //added these as a fix
if (!this.originalWidth || (Math.floor(this.originalWidth * dpr) !== width)) {
this.originalWidth = width;
this.canvas.setAttribute('width', (Math.floor(width * dpr)).toString());
this.canvas.style.width = width + 'px';
this.canvas.getContext('2d').scale(dpr, dpr);
}
if (!this.originalHeight || (Math.floor(this.originalHeight * dpr) !== height)) {
this.originalHeight = height;
this.canvas.setAttribute('height', (Math.floor(height * dpr)).toString());
this.canvas.style.height = height + 'px';
this.canvas.getContext('2d').scale(dpr, dpr);
}
hi there, i am doing a project with MEAN stack and trying to graph live temperatures to HTML file on front end, i have live data going to page but can not get it to graph with Smoothiecharts. would have a tutorial i could use or implement please?
(Reported by Rob Knapp)
I just discovered something about smoothie charts that I wanted to point out.
In render, you chop off the TimeSeries data based on age. If it happend more than the clientWidth*MillisPerPixel millis ago, it gets dropped.
At least on Chrome, the clientWidth of a canvas can be 0 under some circumstances.
For example, I have some smoothie charts on a JQuery tab. If I move to a different tab, the clientWidth goes to zero and all the data gets chopped off.
I've gotten around this by adding dimension.width>0 as a condition on the while loop that culls the data... but I'm sure there is a better solution... perhaps an option that grabs the dimension array once and reuses it?
removeTimeSeries
is broken because it is trying to find the index of the TimeSeries to remove by using indexOf
, but the array object is not pointing to the TimeSeries directly so it always returns -1, which deletes the last element on the array.
The array seriesSet
stores objects that do point to a TimeSeries, so the correct code should be something like this:
SmoothieChart.prototype.removeTimeSeries = function(timeSeries) {
var numSeries = this.seriesSet.length;
for (var i = 0; i < numSeries; i++)
{
if (this.seriesSet[i].timeSeries === timeSeries)
{
this.seriesSet.splice(i, 1);
break;
}
}
};
I had add some small improvements to this great library:
here is it:
http://baiy.cn/tmp/smoothie.zip
please search "by BaiYang" to review the patch. :)
(From: http://blog.kwwika.com/plotting-tweets-in-real-time-using-smoothie-c)
One thing we've noticed is that the Smoothie chart stops working and throws an exception and as yet we've not been able to work out what the problem is due to lack of time. It's probably something to do with not getting any updated values in a TimeSeries. This is what the exception look like in Firebug:
An invalid or illegal string was specified. code: 12
x, y); // endPoint (B) [smoothie.js line 204]
Using this version: http://github.com/joewalnes/smoothie/blob/d65b1f702f1d831964dd255935f2b5038aa46101/smoothie.js
The logic operation when setting resetBounds
on a TimeSeries is wrong:
options.resetBounds = options.resetBounds || true
The logical or
will always return the operand that makes the condition true or the last one, so if you set resetBounds
to false
it will always pick the true
at the end.
Something like this should work:
options.resetBounds = ("resetBounds" in options ? options.resetBounds : true);
From the mailing list:
I found smoothie charts and I'm trying to build an application that will use multiple charts in a dashboard. An issue I have run into is being able to display a tool tip for each chart/graph. The examples only show you how to use the following, but it only works for a single chart/graph. Once a second chart/graph is added it breaks the tooltip on all the charts. How can this be modified to work for multiple charts/graphs (like four)?
div.smoothie-chart-tooltip { background: #444; padding: 1em; margin-top: 20px; font-family: consolas; color: white; font-size: 10px; pointer-events: none; }
@Sly1024 have you observed this behaviour?
Hey,
As I was checking other libraries, they seem to be using namespaces for the entire script (for example: http://inspirit.github.com/jsfeat/js/compatibility.js ), I was wondering if it would be better for smootie as well to move into a namespace, as it would avoid potential overlap with outside naming (e.g. the AnimateCompatibility added in 589bd98 is si awkwardly named because I don't want to accidentally overlap with outside animate or compatibility sections.
Since it this change would breaking (needing action by the library users), wanted to ask if it makes sense?
Timestamp not displayed when series filled with full opacity, to reproduce bug:
Since smoothie.js does not have mouseover tooltip feature (and it may not be all that useful because data moves too fast)...
Is there a way to play/pause the real time chart?
hi @joewalnes , @mape @imrehg @ngd @pftg guys, I interested to use this very lightweight library for manual frame control ,I mean append data with manual textbox event , in another word , insert one data , then redraw the chart and then, stop until new event data ,I mean stop continues frame animation, but when I disable 'window.setTimeout(function() ' in ' SmoothieChart.AnimateCompatibility = (function())' , code ease to function
any your any comments is really appreciated
There is a wrong unicode character on line 275:
http://en.wikipedia.org/wiki/B�zier_curve#Quadratic_curves
Replacing it with a simple "e" makes the link work.
Here is my codes.
<div style="display:flex;flex:1;flex-direction:row;">
<canvas id="pitch_graph" style="flex:1;"></canvas>
</div>
I set the verticalSections:2
. Here is what happen in smaller resolution.
Which is fine. However, when I scaled the window, the verticalSections
appeared to be off and not scaled properly.
How can I have the chart to be responsive with any size?
This code:
https://github.com/joewalnes/smoothie/blob/master/smoothie.js#L44
Won't work because "|| true" will always force the option to become true.
Hi every body,
This Feature is a very good one!
and I ussing it!
But, when I push to start it again .... the entire graphics "jumps" to "actual time" .
is it possible to just stop it all? for real? like.. if I had a "lack" of time?
Tks! Sena,
Currently the horizontal grid lines are positioned so that a given number fit evenly within the visible space.
It'd be nice if these lines could be used to track values on a scale, as is done in most charts. This is especially the case when the max/min y-values are determined automatically.
To do this well, an algorithm should find values on a scale that feels right to a human. The builder has an example of some code that does this reasonably well.
Hi, I was wondering if there's a way to have custom labels on both axis.
Thx a lot.
ps
this lib rulez :)
It would be nice, if there would be a bool conf to change the movement to the right.
There was a question with suggestion in the forum but as i need labels this does not work for me.
The smoothie.d.ts file is not updated and is giving strange compilation errors on angular2 (module smoothie not found) solvable touching .angular-cli.json file.
The origin of the problem seems to be the d.ts file not being updated and using "declare module "smoothie". The source of the smoothie.d.ts file has an updated version that solves the issue
index.d.ts
Instead of filling from line y=0, it fills from bottom of the screen. This is a bug (!)
I cannot draw two filled series one of the between [0,100] and other [-100, 0] since filled area of that series will overlap, but should not (!)
When resizing the canvas, I'd like to millisPerPixel stay relative to the canva's width. Can I do that?
var elem = document.getElementById("chart");
var chart = new SmoothieChart({millisPerPixel: 1000 * 100 / elem.width, maxDataSetLength:2, grid: { millisPerLine: 1000, verticalSections: 1 }});
This way I always has 100 seconds of data worth on the chart with data points arriving one per second. The desire is to keep it this way even when the canvas is resized. Possible?
In an example created in your amazing builder (code below), time labels are displayed in 6-seconds intervals. The offset cycles after some frames - between 0, 2 and 4, probably depending on the scroll position. Visually, this leads to very distracting jumps.
This may be a duplicate of #53 - depending on what "flickering" is.
html:
<canvas id="smoothie-chart" width="893" height="258">
javascript:
var chart = new SmoothieChart({millisPerPixel:78,maxValueScale:1.23,interpolation:'step',scaleSmoothing:0.092,grid:{fillStyle:'rgba(0,0,0,0.97)',strokeStyle:'#2f2e2f',sharpLines:true,millisPerLine:2000,verticalSections:10,borderVisible:false},labels:{fillStyle:'rgba(255,255,255,0.51)',fontSize:12},timestampFormatter:SmoothieChart.timeFormatter,horizontalLines:[{color:'#ffffff',lineWidth:1,value:0},{color:'#880000',lineWidth:2,value:3333},{color:'#880000',lineWidth:2,value:-3333}]}),
canvas = document.getElementById('smoothie-chart'),
series = new TimeSeries();
chart.addTimeSeries(series, {lineWidth:2,strokeStyle:'none',fillStyle:'rgba(75,177,255,0.30)'});
chart.streamTo(canvas, 342);
I don't use smoothie yet, but it's a great library, really cool! I'm definitely going to use it! 👍
Doesn't work on Firefox 3.6.15 (ubuntu 64 bit).
Graph doesn't scroll and doesn't draw new things. Initial image drawn.
Also tried on firefox 4 and firefox 5.
How Can I set customized values in X-axis? rather than the default values that you are providing??
Hi,
Thanks for the library.
Im working on plotting data stream received through a web socket using smoothie.js. Able to get the plot on the web browser, but there are blips in the chart and it is occurring more or less consistently about every 30secs. I looked at the data output on the server terminal (raspberry pi) and it is fine. So, not sure, what is causing these blips.
I tried changing the chart update rates, it didn't help.
Request some advise on getting over this.
Thanks.
Hi, i try to use Smoothie, but the append method doesn't work.
I make the initializations in document.ready method:
$(document).ready(function(){
var smoothie = new SmoothieChart({
millisPerPixel:51,
//maxValueScale:1.40,
//minValueScale:1.37,
interpolation:'linear',
//scaleSmoothing:0.035,
grid:{
fillStyle:'#ffffff',
strokeStyle:'rgba(119,119,119,0.90)',
sharpLines:true,
millisPerLine:4000,
verticalSections:13
},
labels:{fillStyle:'#000000'},
tooltip:true,
timestampFormatter:SmoothieChart.timeFormatter
//maxValue: 40,
//minValue: 10
});
var Temp1 = new TimeSeries();
smoothie.addTimeSeries(Temp1,{lineWidth:2,strokeStyle:'#214dbe'});
smoothie.streamTo(document.getElementById('schart'),158);
setInterval(refreshCharts,800,areaChartInstance,Temp1);
});
function refreshCharts(Temp1){
//get time and y value
Temp1.append(new Date.getTime(), y);
}
Is any wrong?
Only data points which are visible on the chart are kept in memory. We could run an average on these (essentially a time-boxed moving average determined by the speed/width of the chart) and display the average as a horizontal line.
An advanced form of this may be a moving average series, where the window size is independent of the chart speed/width. This may be better suited as an advanced example of using the chart, especially if the framework would not require modification.
The TimeSeries
constructor sets an interval to update the bounds, but that interval is never removed if the TimeSeries
object is removed from the chart or if the series is discarded. Which means that if you create and destroy series on demand you will end up with a lot of useless intervals firing.
The variable holding the interval id is never used:
this.boundsTimer = setInterval(...);
I would recommend that the interval is created on addTimeSeries
and removed on removeTimeSeries
.
The canvas seems to double in size and the max/min numbers are off the canvas on Retina displays. This can be seen simply by visiting http://smoothiecharts.org/ on a Retina Mac.
At the point the chart becomes invisible, the canvas.clientWidth go to zero.
Based on that oldestValidTime is incorrect calculated.
Then in dropOldData the data array is cleared.
Found a little workaround, there must be a better way:
EDIT : "There must be a better way."
Much better: use stop and start in your script.
This also prevents rending graphs, that cannot be seen.
Closed, was'nt a real issues afterwards.
Old: just for reference:
return Math.round(self.dimensions.width - ((time - t) / chartOptions.millisPerPixel));
'this' is not accessible, so I did a
var self = this;
// Round time down to pixel granularity, so motion appears smoother.
time -= time % this.options.millisPerPixel;
var w = canvas.clientWidth,
h = canvas.clientHeight,
context = canvas.getContext('2d'),
chartOptions = this.options;
if (w > 0) this.dimensions = { top: 0, left: 0, width: w, height: h };
Didn't dig deep, but the graphs don't move in FF trunk (nightly build) and latest beta. In the hello world example you can therefore only see the the background grid and the other examples are not much fun.
Chart rendering on Chrome mobile is not correct since updating from v1.21 to v1.22. The charts are scales far too large and cannot fully be viewed on the mobile device.
Using Samsung Galaxy S4
Chrome 34.0.1847.114 (latest)
Android 4.4.2
Javascript version V8 3.24.35.21
I have plotted data stream from web socket on a chart, with x-axis values defined by new Date().getTime().
Thanks.
If label size is differ, position of larger label is not correct.
For example precision:0 minValue:-113 maxValue:0
Hi,
this is not an issue, but a RFC about a potential feature of smoothiecharts.
Charts are dandy, they really are, but either they look live (fast moving charts) or not so much (if set too slow). If they move fast, there is almost no historic reference to compare to.
It would be splendid if charts would compress the x axis logarhitmically. This means that on the right side where data comes in, it would move fast, but as it progresses towards the left it would gradually slow down.
It is just an idea, but I can see myself using it for cluster management dashboard, for example.
b.
Something like this would do the trick:
if(options.labels.font){
canvasContext.font = options.labels.font;
}
Where font is something like '15px sans-serif'
It would be awesome if smoothie charts could be updated to be responsive. Looks like there have been a few investigations into this in the past, yet nothing has come of it.
Hi
please change line 172 jn smoothie.js
SmootheiChart.AnimateCompatibility.cancelAnimationFrame( this.frame );
to
SmoothieChart.AnimateCompatibility.cancelAnimationFrame( this.frame );
Looks like the .org web site is down. Moving it to github pages?
Hello,
is it possible to turn the autoscale option off. I would like to chart some audio stream in the smoothie chart and would like to have a dB scale from 0 to -100 db.
Is that possible?
Best regards
Jonanova
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.