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).
Related
One of the project requirements for my new java web project is to have dynamic charts that will load really fast.
While in discussion , it was asked if we could implement charts without using images ie without loading jpg, png files etc. Also files like pdf cannot be used.
Basically my question is
Can charts be implemented in jsp/javascript without using images,pdf etc ?
ie even api's used should not provide end result as image,or pdf etc.
I did not say no right away , as I have implemented charts in console applications in C on screen. Can we do something like that on a webpage ? ie show a graph by drawing on screen dots,lines,circles etc.But it should be possible inside a div ?
PS : Comments and answer from Lucien Stals helped to understand that the technology i was looking for was svg.
I am looking for some nudging in the right direction from some of the experienced java , javascript programmers in SO.
Many JavaScript chart libraries exist that render in HTML5 on your page. You can probably find one that meets other requirements or wishes of your team, since each have feature areas in which they excel. http://www.zingchart.com has also been adding many ways to include them in your charts if you decide to go with something other than vanilla JavaScript (jQuery, Angular, etc). Full disclosure: I'm on the ZingChart team. I can help you weigh the pro's and con's if you find a few that catch your interest.
A simple bar chart would be easy enough to create with DIVs and CSS.
Anything more complicated and I think you are talking SVG, which could be drawn using http://raphaeljs.com/, or maybe http://d3js.org/ .
Also look at the HTML5 canvas element.
I would suggest to use Google Chart Framework. I did use it in past for my project and it is good.
You can check highcharts http://www.highcharts.com/ . This can be integrated easily with your javascript .
Most of this js chart plugins expects data in array or json format and can dynamically render the charts.Easy to integrate in the web pages
jgccharts.js Jquery charts
jquery charts plugin
I'm building a modeling tool that contains 2 sets of sliders -- one set that changes the amount per month payment (at top), and one set that shows user the date their debt is paid off (bottom), effectively so that changes to one can be seen in the other:
modeling tool http://doufeel.com/model.png
I was able to use jQuery UI slider to generate the payment data that creates the line graph at the bottom (using D3) but now I realize that I will probably need to create both sets of sliders in svg using either D3 or Raphael to make this work smoothly. I'm hoping to find someone who has addressed this, perhaps created something similar and might be able to advise on the best approach. Thanks in advance!
Need to support older browsers? Use Raphael. If not then D3.
I am trying to make a browser-based tool that lets you inspect dependency graphs as they appear in module systems of programming languages and Makefiles.
I am looking for a visualization framework that does the drawing for me.
The requirements are that the toolkit can
label nodes (and hopefully edges)
automatically space out the graph to the right size (I don't have to guess good dimensions) given that I have infinit space (scroll bars are fine)
layout the graph nicely so that it doesn't look as messy
be fine with <= 5000 nodes
run with JS only (no Flash or desktop apps)
Optionally, it would be nice if it made it easy to move nodes around and highlight or hide parts of the graph for better overview.
It does not matter much what backed is used (SVG, canvas, all fine).
I have looked at quite a few libraries so far (especially from Graph visualization library in JavaScript), but not found a fitting one yet:
d3 is nice but the only node-graph it delivers is a force graph, which is focused on real time physics. Once loaded, you have to wait and watch for the physics engine to stabilize. I don't need animations nor the Force, and want to show the graph right away.
GraphDracula's examples are pretty much what I am looking for, but already with 70 nodes and 400 edges, the drawing performance becomes really bad. It also has very little documentation (being a 35 line code example).
Do you know something that meets my requirements? Thanks!
In a commercial scenario you might want to consider yFiles for HTML:
Regarding your requirements it can:
Add any number of labels to nodes and edges
Provide virtually infinite scrolling/panning/zooming area
Layout your graph automatically using a great variety of automatic layout algorithms. For dependency graphs, the Hierarchic Layouter is very well suited
works nicely on desktop browsers with larger numbers of nodes. Depending on the visual complexity and graph structure, 5000 elements might proove difficult with todays browser implementations, though.
It's a pure Javascript library with no dependencies whatsoever
Uses SVG as the main backend, but can also leverage Canvas
The library is well documented, which is necessary given its complexity
Here is a screenshot showing some of the above features in action - the layout was calculated automatically:
Disclaimer: I work for the company that creates the library. On SO/SE I do not represent my employer. This is my own post.
Dagre works pretty well for graph layout (horizontal/vertical alignment, labels, etc.) and has D3 renderer.
https://github.com/cpettitt/dagre-d3 (check images at the end)
https://github.com/cpettitt/dagre
I would like to know about the available js libraries for drawing multilevel trees. Some functionalities I'd like to add to the created tree would be to make the nodes click-able and to be able to select an area on the graph and do actions based on the selection.
Maybe you should try arbor.js?
I'd check out Protovis. I've had good success with it. However, it is a very general library, giving you lots of building blocks to make nice graphs, but it won't be a turnkey solution.
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/