How to prevent reset-timeout in ZingChart - javascript

I'm making a dynamic graphic that shows me a variable curve.
I don't want to have the data reloaded. I want then continuously move in the screen.
Of course I can put a very long "reset-timeout" attribute, but sometime it will be reloaded, and I don't want this.
Any help?

Full disclosure, I'm a member of the ZingChart team.
Like you mentioned, just set a really high timeout. What is the graphs purpose and why can't it reset? How reasonable is it for this client side graph to run forever?
You can simply query the chart and save the current data before it resets using our API method getdata.

Related

Using Chrome DevTools timeline to measure: Function Call, Recalculate Style, Layout and Paint time

I'm building real time time layout.
If server sends packages every 200ms, then Function Call + Recalculate Style + Layout + Paint time must be less than 200ms.
By using performance.mark with performance.measure or just console.time('1') with console.timeEnd('1') i can measure Function Call what is not enough.
Is there any known way how to put some sort of anchors to get and log number that includes Paint?
That will be used for automated performance testing.
Thanks in advance!
It isn't possible to log Paint times using the Console API. It looks as though there was an attempt to integrate this into WebKit several years ago, but this never got implemented. Right now, you can only do CPU profiling using console.profile, but this isn't relevant for you.
You need to explicitly run the Timeline tool to gather Paint profiling data. You could look into using macros to run this. You can export your data into a JSON file, so that you can re-import and compare each one. It's not optimal for automated testing, but I'm not sure of other ways.
This isn't going to include the paint time itself, but requestAnimationFrame will be called just before the paint.
I also tried setTimeout(fn, 0), but it turned out to be called fairly long after the paint.
If all you want to know is that there is some time left at the end of a frame you might be able to use requestIdleCallback.

What's the best UI framework to annotate data points / data series?

Recently I got a requirement where
I have a certain amount of time series data, I need to show the data on a chart on a web page.
(I know this can be done easily since there is Highcharts, Google charts, etc)
However, a more complicated feature request came up. I need to be able to annotate one or more data points on the chart, and annotate them as - say Test Run 1, and maybe another series of data points at Test Run 2. (You can think of it as maybe someone is playing around with a hardware, the first time he collected a set of data, and the second time he collected another a set of data. I want to be able to annotate and diffenrentiate those data sets on the chart)
I will need to preserve those segmentations/groupings and save them in a persistent store, so that next time I load the chart, I can show those grouping again on the chart.
Does anyone know what is the best way to do this? Or are there existing features of any Javascript UI framework that's already capable of doing it?
Thanks so much.

Mashable velocity graph (image)

I was wondering how can i create Mashable like velocity graph.
I don't want it to be real actually, I just want to show random positive velocity graph.
How can i create such velocity graph image using PHP or JavaScript ?
I want it to look something like this: http://i.imgur.com/Y7R6JvZ.png
This is achievable using canvas & javascript.
I won't waste time listing relative resources here, simply google "Draw Canvas Graph" or similar.
You will need to store share data, which can be retrieved via social site API's. Facebook, Twitter, Pinterest, Linked In are all easy GET calls, and again a quick google will give you tutorials for that.
In principle though, you have to:
Record share counts over time (PHP + MySQL)
Load a page including this data
Write Javascript to draw a graph based on this data

processingjs set screen dimensions before loading sketch

I made an application on processing which requires these information in order to make correct measurements;
horizontalScreenResolution
verticalScreenResolution
screenWidth
screenHight
I would like to use processingjs and include my sketch in web page. I already done that. However, this application gives correct results for particular screen. In order to solve this problem I want to create a form using html and java-script. User will enter its monitor parameters and whenever he clicks on start button sketch will be loaded according to given parameters and program will give correct results for every screen. However, is it possible to set this parameters before processinjs loads sketch to web page? Normally, it is possible to reach projessing parameters from javascript vice versa using processingjs.
I don't know how to do achieve this task.
Regards,
I would use displayWidth and displayHeight instead, these were added in Processing 2.0 (They replaced screen.width and screen.height). These are int values that tell you the size of the screen. So instead of asking every single person what their monitor parameters are. Just use these variables, should make your life much simpler I hope.
You can use
void setup(){
size(desiredWidth, desiredHeight);
}
to change the width and height of the canvas in pixels.

css framework for draggable page elements and callback for server side position save

Are there any lightweight frameworks out there for this task. I have a collection of divs, that I want to be able to save positions when dragged/resized/pushed etc.
I was going to build one, to my spec, but if there is a lightweight one out there that might save me a lot of time. I've seen some jQuery plugins that push divs around a page fluidly.
I want to be able to save positions, but also snap divs to each other and save all news positions for divs moved or re-sized. I've looked briefly at shindig, but seems a bit heavy... at least I wanted to see if there are any lightweight front end alternatives.
I will be using php for my backend.
Consider midorijs (www.midorijs.com). It is lightweight and contains a simple drag and drop interface complete with a default drop callback function. You can also define your own. You mentioned you wanted a callback for position save, Midori's callback function does pass the x,y coordinates of the object.
Chceck out more drag and drop callback details at the bottom of this page: http://www.midorijs.com/midoriDragDrop.html
Another benefit since you mentioned you are using php is Midori's convertToFields function which converts javascript object to php.
Good luck!
Why not using jQuery ui? You can customize a bundle to fit your needs + when delivering from googlecode you can get sure that a huge amount of users already have that in their cache. And you can easily get the positionings and push them to your server.
http://jqueryui.com/download

Categories