Looking to create some visualizations of our server infrastructure and nerdy IT data. Want to do animated graphs that scroll from right to left in real-time, no page refreshes. Any good HTML5 canvas libraries to do such things?
Prefer a JS library. Thanks.
Try jQuery Sparklines or this link.
Also, you can do it yourself: Flot jQuery Plugin or Google Chart API, coupled with jQuery-UI and jQuery AJAX you can do your real-time graph.
i've had a very pleasant experience with HighCharts.
Related
I've come across Plotly and I am wondering whether it is possible to animate things like bar charts with it. I noticed the Streaming API but I do not think that is what I need...
Can I use JavaScript to manually do this?
you can probably check out the postMessage API here.
Animations were just released in in Plotly.js. Docs are here: https://plot.ly/javascript/animations/
To answer your question, yes you can animate bar charts made with Plotly. Plotly has an open-source JS library built on top of D3 which should make it very easy for you to create your own animated bar charts. You could also just use D3 instead of Plotly.
I want to create an animated pie chart in JavaScript. I have done some R&D myself and found the Google Charts API.
But my major concern is the actual data is sent to the Google server for creating the charts. I am concerned about sending my data to a third party.
If you're concerned about sharing data with a third party, you might consider an offline charting library, like ZingChart. It gives you the ability to create animated pie charts quickly and easily without the need to transfer any of your data to a third party. This charting library works offline, and is dependency free. There are a number of animations that can be applied to the various types of charts, including pie charts. Check out this animated pie chart demo.
Lists of the different animation effects, methods, and sequences can be found on the animation docs page.
I'm a member of the ZingChart team, so please feel free to ask if you have any questions! :)
I suggest you use jPlot! You can do Pie and Donut Charts, Bar Charts, Line Charts and much more!. See the API here.
A DEMO here.
D3pie is also a good option
They also have a generator that you can use if you want to build your an example and work from there.
I am trying to learn D3 JS and how it can be applied in current application.I am new to this application.
While going through the application I found that there is already a feature providing data visualization in the form of graphs using EXT Js charts.
Could anybody help me understand the advantage of data visualization using ext js over D3 JS and is there any reason for going with one over other? Thanks in advance.
ExtJS is a commercial web app framework for many things including data visualization. D3.js is an open source low level library for creating svg-based charts.
The first question you need to figure out is if you only want charts or all the features that come with ExtJS.
If you just want to draw standard charts (bar, line, area, pie etc.) you may consider using highcharts, google charts, or a higher level library on top of d3.js such as nvd3.js or Rickshaw since they are easier to use. Otherwise if you want a very non-standard and customized chart, d3.js is very powerful for implementing any possible kind of visualization.
D3 is just for visualization, ExtJS is a full framework that hast a lot of other components (grids, windows, layouts, etc...).
Also ExtJS doesn't get well with other libraries, since it overrides several things in the global CSS.
Therefore, if you have a full page that has more than just graphs... feel free to use ExtJS for the whole page, but if you already have something else on the page, then go for D3.
I have been looking for some javascript code that I can use to create something similar to this.
I need something that can show the links between boxes when clicked on/hovered over. As of this point I have not yet been able to determine what the name of this particular type visualisation is.
I have already looked at:
Google Charts
d3.js
graphdracula
processing.js
Raphael
Protovis
MooWheel
PlotKit
You may want to focus in learning D3.JS because it seems to meet your requirements, and it does things very well.
The two vector graphic libraries you can focus are Raphael and D3.JS, but D3.JS is much more powerful with data binding. You can find a large amount of resources through the internet for D3JS.
Here are some of the tutorials that I think useful:
https://github.com/mbostock/d3/wiki/Tutorials
Examples gallery is here:
https://github.com/mbostock/d3/wiki/Gallery
Besides, D3js is the successor of Protovis, you can find this information at the following Wiki:
http://en.wikipedia.org/wiki/Protovis#Context
Google Charts may have some good features, but it's not a very active and well up to date as some other vector graphic tools.
For other libraries, I think should not spend much time.
Enjoy
Not exactly boxes, but more fluid network layout.
http://datavisualizationsoftwarelab.com/
Graphs are pure HTML5, no dependancies on other libs, thus easy to integrate with any JS framework (such as jQuery). Uses Canvas for rendering, has full multi-touch support for navigation, interaction and exploration of data.
An example of network chart:
Charts come with extensive API and Settings, so you can control every aspect of the charts.
Are there any charting libraries that fall back to VML instead of excanvas for IE6-8?
An additional requirement is the ability to combine line charts with a scatter chart (simply dots in the chart) (so I can't use the google visualization api)
Lastly, if a javascript library is required, preferrably jquery based.
Thanks,
Wesley
gRaphael uses VML for IE but I believe its charting is fairly rudimentary. You could extend it with your own charts fairly easily. It is not reliant on jquery.
would you check this http://code.google.com/apis/chart/interactive/docs/quick_start.html