I'm trying to find examples or tools that can create a bar graph in a web browser. I'll be sending the data from the server via a web socket and as the data is received I want the 'height' of each bar to change, reflecting the data received.
So the user can see the graph changing as data is received to.
I've seen a number of examples, but I can't see one that will do the above. Something like D3 looks really good but seems to have a steep learning curve and there seem to be quite a few out there it's getting quite confusing.
I'm looking for something simple and quick to do.
Thanks
What you really need to do is find a simple charting library which supports some form of redraw or a way of binding a data model and detecting changes to that model. The common steps are:
Create chart object with initial set of data
Draw initial chart
Get update over WebSocket connection
Update data set
Redraw chart
The complexity tends to come in with the libraries as the general process is pretty simple.
Some examples
A realtime charting example which just displays votes and updates in realtime can be found via .net magazine tutorial on Code a real-time survey with HTML5 WebSockets. It uses Pusher, who I work for.
There's also an example that uses DJ, Python, Pusher and the Twitter streaming API here:
http://bieber.nixonmcinnes.co.uk/
The code can be found here:
https://github.com/nixmc/pusher-d3-demo
Blog post here:
http://www.nixonmcinnes.co.uk/2012/04/20/what-can-we-learn-from-the-real-time-web-and-justin-bieber/
The simplest example
There's also a video of using Pusher with SmoothieCharts here:
http://www.youtube.com/watch?v=VLTsT30TZYw
You might want to look at d3.js for the client-side drawing of the "live" chart. It works really well, and doing things like live bar (or other type) charts is really easy, with syntax similar to JQuery. As for getting the data over the WebSocket, the various websocket packages (full disclosure--I work for Kaazing, that pioneered WebSockets) can pretty much all do this.
Have a look at XSockets.NET, there is an Nuget-Package available for setting up a WebSockets/Realtime service, the JavaScript API is easy to get started with. You can also use the hosted version , where you run JavaScript "only" , More info regarding XSockets.NET will be found on http://xsockets.net
The hosted service on http://live.xsockets.net for "javascript" version, A playground for JavaScript developers found on http://xfiddle.net/
Regarding Graph's, there is an example on jsfiddle, it contains an Wijmo chart (bar), that reacts on user input's in realtime. There is an link to that example in xfiddle.net
For new visitors to this old question, the following is currently one of the simplest and most straightforward examples of websocket use to change a plot in real-time (implemented using google charts paired with either python or perl):
https://github.com/albertobeta/UberSimpleWebsockets
Related
I'm currently working on a project using sigma.js where I need to show a large number of nodes and edges (~10000 to ~100000 of each one) stored in a JSON file. But the library is getting laggy when I load the JSON, on each refresh and also when it shows me the graph it doesn't space the nodes. I was wondering if someone knows how to represent this kind of dataset fine.
To be honest i am on the same issue if it can helps, i think the book example of Gephi.org tutorial is still the best.
For the moment i am on including sigmaJS from cloudflare but i don't have any proposition for this.
Something like you replace the library with a link to cloudflare like the one used for phaser.io explained in it git repository or even tweenJS use the same way (it's the way of web devs see #indiedev #indiegamedev on twitter, it helps)
<script src="sigma.min.js"></script>
<script src="sigma.parsers.json.min.js"></script>
http://jsfiddle.net/thefailtheory/L45ue3er/
The threejs random particle visualization performs really well with 20K points.
https://threejs.org/examples/#webgl_points_random
Will be a bit of work to repurpose for network display but the upside is you can leverage GPU for rendering.
I have installed ELK tools but somehow I wanna take the data from elasticsearch and created some graphs with the data on my own instead of using Kibana. I have notified there are some tools like elasticsearch.js but I couldn't get any ideas on how to start it out, i.e. what should I do in order to extract those data and customize my graphs with js.
Would anyone who have previous experience can share about it.
Great thanks in advance.
I have never worked on such a graph, but I guess it should not be very complicated to build. Since, elasticsearch does provide REST API and returns a JSON response, this JSON response can be handled by writing a custom toolkit which can represent that in format you want to.
There are toolkits available to handle JSON visualization like Protovis or json-stat. May be you can look at those, and even if nothing exists you can very well write your own toolkit
For a research project we are developing a system in python which takes raw data from a real time sensor and applies different DSP filters to it. So far so good. The other part of the system should be the plotting of the data and the access to some controllers for modifying the sample rate and other parameters. The last days I have been trying to use HTML5 + javascript as the technology to do the data plotting; I am using d3.js for the graphics and mimic.js to implement the xmlrpc protocol to communicate the python side with the HTML file. After a lot of tweaking i ALMOST managed to communicate both parts of the system. However, I ran into the 'Cross origin request' error (I am using chrome).
After that I have been thinking of some other strategies in order to communicate python with the GUI:
Using a SimpleHTTPServer. However, I need to have a SimpleXMLRPCServer running so I can register the function (register_function) to pass the value. Is there a way to implement a xmlrpc within a SimpleHTTPServer?
I have been thinking about using json but I am not sure if this is the best way to go as the data streaming will be quite big and fast(4 channels with constant updates).
So after all this testing I really would appreciate a piece of advice:
Is if feasible to have such HTML5 GUI? is it efficient for plotting such amounts of data?
if so, what would be a realistic strategy to implement a communication between Python and HTML/js?
Is xmlrpc the best protocol to use?
Yep. Also you can use some JavaScript charts libraries. Such as amCharts, highcharts, plot.
Really, JSON is better.
XMLRPC isn't very light. See p.2 :)
I have a page where i keep getting data from a database periodically. That data is depicted as a graph. At each period, i want to update the graph with new data. Meaning that i dont want to replace the old graph, but extend it. For example,im using a line chart which is currently displaying. When new data comes in, i want the lines in the chart to extend to represent the new data, but the previous lines should remain as-is. Which JavaScript graphing API can provide this functionality ? Is it possible with Google Charts ?
Well, whether you like it or not, you're in the middle of writing a real-time web application process :D
Here are your solutions:
Pure javascript
If you're in the mood of using a library:
I highly recommend using APE library. as I said multiple times before, it's a robust framework for developing real-time web apps.
Another great solution is HTML5's websockets. it's awesome but not cross-browser.
If you're not in the mood of using a library:
You may send an AJAX request to your server periodically to check whether any updates are available for your data or not.
Using third party plugins
The easiest and the most common solution is Adobe Flash's XMLSocket APIs.
You may use Silverlight too, but you know, it doesn't worth it (development time I meant).
EDIT:
Oh, almost forgot to say, this style of programming (updating data without user's interaction/awareness) is called Comet programming, so if you need a keyword to search further on this subject use this one.
I agree with 3p3r, and can elaborate on library implementation.
A topic you may want to keep in mind is Data-Binding.
It is a process commonly employed by MVC systems such as backbone.js.
The notion is that the model(data) is automatically updated into the View when data changes are detected .
Data-Binding is not only available in MVC it is also available in graphing widgets for libraries like ExtJS. Using a library can greatly reduce your maintenance overhead in development and avoid commonly encountered complications.
Other libraries that may easily incorporate a data-binding process are: D3, HighCharts, and Raphael.
All the best!
Nash
I have a very large data set that I'd like to craft into a scaling, zoomable, panning graph that goes back over the course of a decade of data. It appears that the best solution for the job is dygraphs vs other options.
I'm not opposed to other options if any meet the requirements of very high interactivity, so if'n you got someth'n else, please share...
Notwithstanding, I have not found a solid example of using dygraphs with Rails 3 and would really appreciate seeing an example of how to tie this into a dataset very quickly or a link to an example.
Initially I just need to throw all of the content out into the graph to see how it works out and for some analysis, so nothing super fancy's needed.
**EDIT: Just found Highstock. Seems to be a perfect match. In that light I'd like to modify my request to perhaps some examples of utilizing Highstock in this context.
I can't point to any tutorials or lessons. I actually had this exact same problem a while ago, trying to do the exact same thing. My answer is that you just have to generate the HTML/dygraphs functions to plot your data.
In case you are still trying to figure this out, I have created rails app that will interactively let the user choose and plot data from any basic database schema, any database. I'm a total RoR noob, but it works pretty well and is made to be generic and dynamic, as well as add checkboxes and linear regressions to each plot. Its not finished, or fully documented yet but you may find it helpful.
I think you can access it this way:
git clone https://bitbucket.org/zachd1_618/rails-stocks.git
or just get in contact with me if you are for some reason really interested.
I've tested it on multiple databases and different schemas, and it easily handles 50k+ points across multiple graphs.
I see that Highstock is nice too, but you shouldn't have any problems in adapting Dygraphs to what you describe. I have not used it with Rails, but have good experiences with it on Django. The approach would be quite similar: Either you serve the dataset in a separate request, or you generate the dataset within the template layer. The latter is probably the slowest.