Develop Reference

Creating charts in java or javascript without images

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

Which chart library is used in the kickstarter dashboard?

I am trying to find the chart library used in the kickstarter dashboard:
(source: alexgpr.com)
Why?
Because I need some functionality not available in many of the libraries I have found.
Money in one side, percentage in the opossite side.
An horizontal line parallel to the axis (like the green one in the image)
Look nice and professional

I can't say which library they use but it looks like it could be raphael.js or similar.
You can also do some great animations with http://raphaeljs.com/ It creates SVG graphics and is great on all browsers including IE6
Also for graphs specifically check out http://g.raphaeljs.com/

the library that it is used looks like http://www.chartjs.org/

Pie Chart with JavaScript [duplicate]

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/

Image editor component in Flex / JavaScript

I'm looking for a simple Flex or JavaScript based image editing component which can be embedded in a web application. It shouldn't be a web service but rather a component that I can download and customize (i18n etc.).
I only need some basic features: most important is cropping, optional features would be rotating and adjusting brightness/contrast.
Basically something like splashup.com, but as an open source application rather than a web-service.
Thanks a lot in advance for any hints!
-- Andreas

There is pixastic.
Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
Be sure to read the documentation to make sure the operations you are looking to perform are supported by all browsers. There are some issues with IE.
They have a editor you can try. It shows off some of the features.

Your question suggests you want an out of the box solution, or at least a base to stand on.
Quick Google search reveals editImage. This doesn't look polished or bug free, however building on this or rolling your own should not be difficult.
Here is a good article on Image Manipulation in Flex. Towards the end of it read "Cropping, Panning and Zooming", your basically looking at 5 lines of code. I think you might even be happier building this yourself.

Thanks for your answers!
I ended up customizing and extending this component:
http://blog.mediablur.com/2008/02/20/flex-image-cropping-component/

Displaying a Multidimensional Array in a Bar Graph (in JavaScript)?

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).