I would like to replicate this D3js Dynamic Tree example using Raphael. I am not able to use this example in IE8 since it doesn't support SVG. I need to find a alternative to this problem.
I have already been trying this using d34raphael but there is not much documentation for me to get something working except for only a couple of basic examples.
Any suggestions on how to convert this Dynamic tree into Raphael would be much appreciated.
You can build this visualization with Protovis. The example on the Protovis page page isn't dynamic but there are some examples of dynamic trees in the tests.
Protovis has pretty good MSIE 7/8 support through a VML rendering add-on: Protovis-MSIE (disclaimer: I am the author of this).
Related
I am looking for an html5/css/javascript chart library that supports the "follows" on line charts with mobile.
To be precise on what am I refering to by "follows" on line charts, here are good examples:
http://code.shutterstock.com/rickshaw/examples/extensions.html
https://google-developers.appspot.com/chart/interactive/docs/gallery/trendlines
even slightly different, this one would be nice also
http://www.flotcharts.org/flot/examples/tracking/index.html
I have made some tests using the extensive comparison provided here. Unfortunately, I was not able to find a line chart demo with "follows" that worked "out-of-the-box" with both Chrome and Chrome Android. Chrome is my targeted browser for now, I am writing a non commercial app just for fun.
It seems that most of these implementations are based on :hover css selector which is not available for mobile. I tried to bind the :hover logic with the "touchmove" but it was not straightforward (with rickshaw at the very least).
My question is: am I missing a library or an option in the existing libraries or should I keep on trying to implement my custom logic ?
You missed amCharts in your list, it does support "follows", for example:
http://www.amcharts.com/javascript-charts/line-with-duration-on-value-axis/
Note, you should set chart.panEventsEnabled = true in order touch events to work on mobile.
Disclaimer - I am the author of amCharts and amMap.
you can try echarts, it's really good at rendering large data and does supoort "follow", here's the example and the code
http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-dataZoom-all
I wanted to build a product customizer similar to http://www.getuncommon.com. But instead of Flash, I will utilize HTML5 canvas and Javascript.
Is there a library which I can use to create and achieve similar editor/product customizer as Uncommon?
I did look at jQuery UI but it is seem more focused on interface than creating my own editor.
Take a look at Fabric.js canvas library.
We're using it in production for design editor on printio.ru
I did something similar to this a while ago.
I used JQuery and Raphael JS. Raphael uses VML in Internet Explorer and SVG and Canvas in other browsers making it a very good cross-browser compatible option.
A good demo of a project using Raphael can be found here.
I used a lot of code from this demo to develop my own tool.
Hope that helps.
I used kineticjs to create an E-Card editor. It was a great experience using the library.
This question already has answers here:
Closed 12 years ago.
I want to have a JavaScript pie chart, I already have one with PlotKit, but it's a too large library and my bandwidth is low. I want a good and low weighted one in JavaScript (or better, in jQuery).
Google supplies a webservice returning charts. More info here :
http://code.google.com/intl/nl-NL/apis/chart/
i used this http://www.jqplot.com/index.php library on one of my projects. powerful and easy to use!
And here is an example with pie charts: http://www.jqplot.com/tests/pieTests.php
There is a growing number of Open
Source and commercial solutions for
pure JavaScript charting that do not
require Flash. In this response I will
only present Open Source options.
There are 2 main classes of JavaScript
solutions for graphics that do not
require Flash:
Canvas-based, rendered in IE using ExplorerCanvas that in turns relies on
VML
SVG on standard-based browsers, rendered as VML in IE
There are pros and cons of both
approaches but for a charting library
I would recommend the later because it
is well integrated with DOM, allowing
to manipulate charts elements with the
DOM, and most importantly setting DOM
events. By contrast Canvas charting
libraries must reinvent the DOM wheel
to manage events. So unless you intend
to build static graphs with no event
handling, SVG/VML solutions should be
better.
For SVG/VML solutions there are many
options, including:
Dojox Charting, good if you use the Dojo toolkit already
Raphael-based solutions
Raphael is a very active, well
maintained, and mature, open-source
graphic library with very good
cross-browser support including IE 6
to 8, Firefox, Opera, Safari, Chrome,
and Konqueror. Raphael does not depend
on any JavaScript framework and
therefore can be used with Prototype,
jQuery, Dojo, Mootools, etc...
There are a number of charting
libraries based on Raphael, including
(but not limited to):
gRaphael, an extension of the Raphael graphic library
Ico, with an intuitive API based on a single function call to create
complex charts
Disclosure: I am the developer of one
of the Ico forks on github
(http://github.com/uiteoi/ico).
by Jean Vincent
And other than this:
Top 5 jQuery Chart Plug-ins
If it is OK to use other than jQuery than EJS Charts are also very slick.
Here are some links to sites with JQuery charting plug-ins:
http://www.jscharts.com/
http://www.reynoldsftw.com/2009/02/6-jquery-chart-plugins-reviewed/
http://www.1stwebdesigner.com/resources/top-jquery-chart-libraries-interactive-charts/
and THIS SO thread, which is asking essentially the same question:
Pie chart with jQuery
EDIT: Added some other options
I recently used Flot to do some bar charts
http://people.iola.dk/olau/flot/examples/
and we're using Raphael for some pie charts and other stuff
http://raphaeljs.com/
I really want something that is eye catching and modern. I like how Digg does the Digg swarm (http://labs.digg.com/swarm/)
Have a look at
http://raphaeljs.com/
a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
I don't know if it is the best.
Take a look at flot; http://code.google.com/p/flot/. You can check out some pretty cool-looking implementations of flot, here.
Flot is a pure Javascript plotting
library for jQuery. It produces
graphical plots of arbitrary datasets
on-the-fly client-side.
The focus is on simple usage (all
settings are optional), attractive
looks and interactive features like
zooming and mouse tracking.
The plugin works with Internet
Explorer 6/7/8, Firefox 2.x+, Safari
3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas
Javascript emulation helper is used
for IE).
Protovis is an option.
Edit:
The team behind Protovis has since created D3, so this is likely a better option than Protovis.
Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?
The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.
So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i'd appreciate some help!
Thanks
Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I've used Flot (haven't tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you'll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.
You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that's not as easy or consistent across browsers as drawing charts with the canvas.
If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.
My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.
EDIT:
Another library I forgot to mention is PlotKit which extends MochiKit. I haven't used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I'm not sure how crossbrowser an SVG based solution would be (particularly in IE).
EDIT:
Here is a jQuery plugin which charts using div elements. I personally don't like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.
According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.
For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).