joewalnes / smoothie Goto Github PK

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.

I hate to be that guy, but it doesn't appear to work in IE8. Any chance of supporting it?

(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

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.

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 (!)

(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?

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?

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

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);

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

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.

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.

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,

If label size is differ, position of larger label is not correct.
For example precision:0 minValue:-113 maxValue:0

Hi, I was wondering if there's a way to have custom labels on both axis.

Thx a lot.

ps
this lib rulez :)

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

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?

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! 👍

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?

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 had add some small improvements to this great library:

1. [For IE9] remove the redandunt 'globally' lastTime variable, so we can create multiple charts without interference.
2. improve the render method: only render in needed.

here is it:
http://baiy.cn/tmp/smoothie.zip

please search "by BaiYang" to review the patch. :)

Hi,

• Would it be possible to add a feature to pause the scrolling at a specific interval, via a key, like the escape key?

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!

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.

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.

Test this page in Firefox:

http://jsfiddle.net/drewnoakes/ZWHbm/

Clicking the button has no effect.

Thanks to Natkamol Sornprayad for the bug report.

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.

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?

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?

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.

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.

I have plotted data stream from web socket on a chart, with x-axis values defined by new Date().getTime().

• Is it possible to plot with time as hh:mm:ss?
• And how to label x and y-axis?

Thanks.

How Can I set customized values in X-axis? rather than the default values that you are providing??

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

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 :)

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.

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.

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?

Something like this would do the trick:

if(options.labels.font){
canvasContext.font = options.labels.font;
}

Where font is something like '15px sans-serif'

Timestamp not displayed when series filled with full opacity, to reproduce bug:

• Enable Show Timestamp
• Enable Series fill color
• Set full opacity for series fill color

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?

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};
  },

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.

If I have a datasource that on average is between 0-10, and ocassionally spikes 30-1500, when the datasource settles back down again, the spike is cropped as it goes over the top of the canvas

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.

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?

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

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:

1. Make 'dimensions' globally accesable by 'this.dimensions'
2. At this part:

return Math.round(self.dimensions.width - ((time - t) / chartOptions.millisPerPixel));

'this' is not accessible, so I did a

var self = this;

1. Block this behaviour :

// 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 };

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;
    }
  }
};