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/
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 am kind of new to javascript/html5. normally I would do that kind of stuff inside flash/as3. but since the iPad doesn't support that I need to switch the horse...
I want to build a website where words are floating in position and size and if the mouse comes over one word it should draw some lines to all the other words. are there any frameworks one could use? the whole should look like a tag cloud with lines between the tags.
Raphael is a good JS replacement for Flash. It's a vector graphics based library.
Take a look at EaselJs from Grant Skinner. The approach he used is similar to Flash display list and timeline.
Here are some example:
https://github.com/mikechambers/ExamplesByMesh/tree/master/HTML5/EaselJS/follow
http://www.mikechambers.com/blog/2011/01/24/easeljs-example-follow-drone/
http://gskinner.com/blog/archives/2010/12/easel-js-simplifies-working-with-canvas-in-html5.html
A game Grant did:
http://www.pirateslovedaisies.com/
I need do create a pretty complicated graph in Javascript. It's a line-graph with dots that are click-able. I've looked at the google-api, and it just won't do. Also, it needs to be able to rendre several graphs in one window.
Would be really nice if it was powered by jQuery, since the rest of the project is running on that platform.
Does anyone know about any good libraries? I have not gotten across any suitable yet.
Thomas
I'd recommend HighCharts
Try highcharts:
http://www.highcharts.com/
It uses either jQuery, MooTools or Prototype to run: http://www.highcharts.com/documentation/how-to-use
There are more jQuery alternatives though: http://www.1stwebdesigner.com/css/top-jquery-chart-libraries-interactive-charts/
We are also using HighCharts, but the HighStocks variation.
http://blog.supertext.ch/2011/09/a-new-charting-library-for-the-supertext-website/
We assembled a list of other tools via Choosle. (See factors link)
HighCharts may fit your needs, and it has amazing looks. Have a look at the demo page line chart with clickable dots where there is an example of line chart with multiple lines and clickable dots
Flot rocks! It is opensource, so no license costs!
http://code.google.com/p/flot/
You can do amazing things with it. See it's showcase here: http://code.google.com/p/flot/wiki/FlotUsage
Good luck!
gRaphaël is a plug-in that extends the super impressive Raphaël JavaScript vector library and provides extensive APIs for canned and 100% custom charts / graphs. It is also MIT licensed, which means it's free for commercial and non-commercial use!
gRaphaël
I want to build a drawing program in JS. (jQuery preferred but not mandatory).
Anyway, my vision is a big, blank, white canvas with a simple grid. The user could drag "layers" to the grid (such as icons, pictures, etc). Also, it would support drawing curves, lines, boxes, etc.
Think of Adobe Illustrator but much simpler. Honestly, it will be used to do database diagrams more than art (unless database diagrams are art to you...lol)
Is there anything out there like that?
Thanks
I'm sorry to inform you you won't be first with the idea.
Check out these
- diagramo.com (html5/canvas)
- lucidchart.com (html5/canvas)
- gliffy.com (flash)
There are few more in the wild, though new addition is always good for competition!
For vector graphics I would suggest using inline SVG rather than something like canvas.
To get you started here is something I wrote a long time back (before I knew about jslint, so it's not as neat as it should be) http://jsfiddle.net/ctrlfrk/mZzVD/
Here is a jquery svg library (I had it bookmarked, but haven't tried it): http://keith-wood.name/svgRef.html
The mozilla reference: https://developer.mozilla.org/en/SVG_Reference
And the actual spec: http://www.w3.org/TR/SVG11/index.html
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).