I have a huge set of data with varieties of entities and key Metrics, and trying to create a analytic based application.
I would like to implement customized charts say of around 200-300 which helps me render all varieties of charts for all these entities.
Which is the best way to create such huge number of customized charts as a library?
Well it depends on what kind of analytic and charts are required.You can select any d3 or highcharts. Like my application required only Bar, pie and line with Multiple Axis and was relating to stocks thus i used HighStocks.If you want to use extensive Customization and variety of charts and graphs D3 is always a good option.
We are developing a web application using Spring+Tiles. We have a requirement that we have to create a bar graph in a jsp page. We searched a lot on web regarding this issue. Means how we can create a bar graph using Open source Charts API. We found many suggested APIs like JFreeChart, charts4j and etc.
But we are not sure which one to use. Actually our requirement is we have to create a bar graph which can be drillable.
Please help us. If you could give any examples that will be highly appreciated.
Thank you very much in advance. Thanks a lot.
I would recommend you to use the rest services and send the json to highcharts OR D3.js OR DDChart, its the best thing to do in your case below link can do what you want :
http://www.highcharts.com/demo/column-drilldown
Highchart (licence) : http://jsfiddle.net/yPVX9/2/
D3 (free) : http://jsfiddle.net/mcuepavh/1/
DDChart (free) : http://kiersimmons.com/DDChart/index.html
You can try FusionCharts for a drill down chart.
Have a look to this and you can use this in your application : Fusion Charts Linked Charts. Regarding licensing issues,you may get in touch Sales Team.
Apart from that, you can use Raphael.js . Start from the basics say try creating a small rectangle, fill some color, opacity, binding some events,etc. With a day effort you can make a simple bar chart. Once you make a bar chart, attach an event to clear your container and redraw another bar chart with the drill down data. Thats the concept you need for your drill-down.
Having said that, I would still recommend you to use Fusion Charts because they takes care of some smart things - like space management of the bars, the intervals, the colour codes of the bars(if not hard-coded), axis part... Its a finished product which abstracts you from the technical obstructions and give your application a beautiful add-on.
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.
Has anyone seen an open-source library that produces charts similar to Github.com's commit timeline charts? Check out this profile (picked one at random) and note the bar graphs below each project.
I've been trying to dominate Flot into behaving correctly but it just doesn't have the flexibility of formatting options to come up with a decent clone. Personally, I'd prefer a Javascript implementation but I'm open to looking at server-side stuff as well.
Definitely has to be a stand-alone implementation, the application is headed to a network separated from the Internet, so Google Charts API is out of the question.
I'd suggest using jQuery Sparklines. You'll need to create two separate graphs and position them on top of one another (one for the blue bars, another for the gray bars). You'll also need to make the dotted line/legend an image, but github also uses an image for that.
Here are some decent values to get you started:
EDIT: I originally overlapped two separate sparklines with relative positioning, but it would be better to use the "composite" option to draw two graphs on the same canvas.
I want to create a pie chart in JavaScript. On searching I found the Google Charts API. Since we are using jQuery I found that there is jQuery integration for Google Charts available.
But my problem is here the actual data is sent to the Google server for creating the charts. Is there a way to prevent the data from being sent to Google? I am concerned about sending my data to a third party.
Flot
Limitations: lines, points, filled areas, bars, pie and combinations of these
From an interaction perspective, Flot by far will get you as close as possible to Flash graphing as you can get with jQuery. Whilst the graph output is pretty slick, and great looking, you can also interact with data points. What I mean by this is you can have the ability to hover over a data point and get visual feedback on the value of that point in the graph.
The trunk version of flot supports pie charts.
Flot Zoom capability.
On top of this, you also have the ability to select a chunk of the graph to get data back for a particular “zone”. As a secondary feature to this “zoning”, you can also select an area on a graph and zoom in to see the data points a little more closely. Very cool.
Sparklines
Limitations: Pie, Line, Bar, Combination
Sparklines is my favourite mini graphing tool out there. Really great for dashboard style graphs (think Google Analytics dashboard next time you login). Because they’re so tiny, they can be included in line (as in the example above). Another nice idea which can be used in all graphing plugins is the self-refresh capabilities. Their Mouse-Speed demo shows you the power of live charting at its best.
Query Chart 0.21
Limitations: Area, Line, Bar and combinations of these
jQuery Chart 0.21 isn’t the nicest looking charting plugin out there it has to be said. It’s pretty basic in functionality when it comes to the charts it can handle, however it can be flexible if you can put in some time and effort into it.
Adding values into a chart is relatively simple:
.chartAdd({
"label" : "Leads",
"type" : "Line",
"color" : "#008800",
"values" : ["100","124","222","44","123","23","99"]
});
jQchart
Limitations: Bar, Line
jQchart is an odd one, they’ve built in animation transistions and drag/drop functionality into the chart, however it’s a little clunky – and seemingly pointless. It does generate nice looking charts if you get the CSS setup right, but there are better out there.
TufteGraph
Limitations: Bar and Stacked Bar
Tuftegraph sells itself as “pretty bar graphs that you would show your mother”. It comes close, Flot is prettier, but Tufte does lend itself to be very lightweight. Although with that comes restrictions – there are few options to choose from, so you get what you’re given. Check it out for a quick win bar chart.
jqPlot looks pretty good and it is open source.
Here's a link to the most impressive and up-to-date jqPlot examples.
Tons of great suggestions here, just going to throw ZingChart onto the stack for good measure. We recently released a jQuery wrapper for the library that makes it even easier to build and customize charts. The CDN links are in the demo below.
I'm on the ZingChart team and we're here to answer any questions any of you might have!
$('#pie-chart').zingchart({
"data": {
"type": "pie",
"legend": {},
"series": [{
"values": [5]
}, {
"values": [10]
}, {
"values": [15]
}]
}
});
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>
<div id="pie-chart"></div>
A few others that have not been mentioned:
For mini pies, lines and bars, Peity is brilliant, simple, tiny, fast, uses really elegant markup.
I'm not sure of it's relationship with Flot (given its name), but Flotr2 is pretty good, certainly does better pies than Flot.
Bluff produces nice-looking line graphs, but I had a bit of trouble with its pies.
Not what I was after, but another commercial product (much like Highcharts) is TeeChart.
Chart.js is quite useful, supporting numerous other types of charts as well.
It can be used both with jQuery and without.
There is a new player in the field, offering advanced Navigation Charts that are using Canvas for super-smooth animations and performance:
https://zoomcharts.com/
Example of charts:
Documentation: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/
What is cool about this lib:
Others slice can be expanded
Pie offers drill down for hierarchical structures (see example)
write your own data source controller easily, or provide simple json file
export high res images out of box
full touch support, works smoothly on iPad, iPhone, android, etc.
Charts are free for non-commercial use, commercial licenses and technical support available as well.
Also interactive Time charts and Net Charts are there for you to use.
Charts come with extensive API and Settings, so you can control every aspect of the charts.
Check TeeChart for Javascript
Free for non-commercial use.
Includes plugins for jQuery, Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript, etc...
Interactive demos here and here.
Some screenshots of some of the demos: