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.
Related
In my project I work on a web app that shall provide interactive charts to the user. Interactive is meant in that way that the user can adjust single data points by dragging them around in chart.
More specifically, assume a line chart consisting of six data points. The user clicks one data point and drags it to different coordinates within the chart (drag and drop). Afterwards the line should be rendered again considering the adapted coordinates.
I had a look into Chart.js already but found that this feature is not provided out-of-the-box. I rather have to implement that myself.
Are you aware of any chart library for JS that provides such feature?
UPDATE
Meanwhile I found two potential solutions:
Plugin for Highcharts
Draggable charts of FusionCharts
You can take a look to D3.js, it's battery-included and drag&drop is supported too.
But you have to make the chart in HTML/CSS yourself.
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 have been looking for some javascript code that I can use to create something similar to this.
I need something that can show the links between boxes when clicked on/hovered over. As of this point I have not yet been able to determine what the name of this particular type visualisation is.
I have already looked at:
Google Charts
d3.js
graphdracula
processing.js
Raphael
Protovis
MooWheel
PlotKit
You may want to focus in learning D3.JS because it seems to meet your requirements, and it does things very well.
The two vector graphic libraries you can focus are Raphael and D3.JS, but D3.JS is much more powerful with data binding. You can find a large amount of resources through the internet for D3JS.
Here are some of the tutorials that I think useful:
https://github.com/mbostock/d3/wiki/Tutorials
Examples gallery is here:
https://github.com/mbostock/d3/wiki/Gallery
Besides, D3js is the successor of Protovis, you can find this information at the following Wiki:
http://en.wikipedia.org/wiki/Protovis#Context
Google Charts may have some good features, but it's not a very active and well up to date as some other vector graphic tools.
For other libraries, I think should not spend much time.
Enjoy
Not exactly boxes, but more fluid network layout.
http://datavisualizationsoftwarelab.com/
Graphs are pure HTML5, no dependancies on other libs, thus easy to integrate with any JS framework (such as jQuery). Uses Canvas for rendering, has full multi-touch support for navigation, interaction and exploration of data.
An example of network chart:
Charts come with extensive API and Settings, so you can control every aspect of the charts.
I need to include a dashboard in a JavaScript application I am building. The Google Visualization API would provide all the features I am looking for, except that I need a tool that works without internet access and could be embedded in my application.
My main requirements:
Standard pie, bar and line charts
hover and onclick behaviors
data aggregation: sum, average, etc. (like Google datatables)
time scale with time range filters
nice to have: heat maps, gauges, geo maps, Gantt, etc.
Alternately, I'd be interested in recommendations on a graphing toolkit that would be a good starting point. I've read good things about d3.js, but there is not much documentation around. I haven't even found which browsers d3 supports (I need IE 7).
dojox charting is rich in features, open-source and extensible, works cross browser, and supports multiple rendering engines: svg, canvas, vml - it is being actively evolved and has come a long way since its introduction. I have used it successfully in several projects.
High Charts and Fusion charts also now offer JS based charting
Raphael JS is also good for lightweight charting needs -
You may want to weigh the features/richness with performance, open-source/extensibility and other factors to make the choice - good news is that there are many libraries out there now :-)
There are some different frameworks for it, for example:
flot for jQuery
g.raphael for Raphaël
Highcharts JS as framework for Javascript
But there are many more. Try searching and look for a framework/plugin that fits your needs.
The FusionCharts Suite seems to be the best fit for your needs.
Column, bar, pie charts - http://www.fusioncharts.com/demos/gallery/#column-and-bar
Hover and on-click behaviours - http://www.fusioncharts.com/demos/features/#interactive-legend & http://www.fusioncharts.com/demos/features/#informative-tool-tips
Data aggregation - http://www.fusioncharts.com/demos/gallery/#zoom-line
Time scale charts - http://www.fusioncharts.com/demos/features/#self-updating-charts
Heat map charts - http://www.fusioncharts.com/demos/gallery/#heat-map-chart
Visually editable charts - http://www.fusioncharts.com/demos/gallery/#visually-editable-charts
Gauges with real-time capabilities - http://www.fusioncharts.com/demos/gallery/#gauges
Funnels - http://www.fusioncharts.com/demos/gallery/#funnel-chart
Pyramid charts - http://www.fusioncharts.com/demos/gallery/#pyramid-chart
It has exhaustive documentation too - http://docs.fusioncharts.com/
Just to contribute to the discussion I suggest you check out amCharts.
Their JavaScript Charting library is quite robust, actively developed and supported, well documented. IE7 is supported as well.
The JavaScript Stock Chart product provides most of the features you mentioned like datapoint aggregation. It's even dynamic based on the zoom scope.
Take a look at InfoCaptor Dashboards http://www.infocaptor.com
It can be self hosted and embeddable with other applications. The backend is PHP and it is completely javascript/html5 based charting engine.
Suppports all of the following requirements
Standard pie, bar and line charts - Out of box
hover and onclick behaviors - out of box
data aggregation: sum, average, etc. (like Google datatables) -
provides connectors to all SQL database and
including Google spreadsheet time scale with time range filters -
Dashboard prompts/parameters and filters nice to have: heat maps,
gauges, geo maps, Gantt, etc. - contains Gantts and variety of Gauges
It does not have maps but you can build the charts using jvectormaps or other map api and the custom html widget within the dashboard.
Hope this helps
I am aiming to build a site that will contain a lot of user generated data, hopefully.
I'm in my first year of self learning programming: Python, Django, MySQL, HTML and Javascript.
I can chart dummy data on a table just fine, but I'm now looking at turning that data into nice colorful looking graphs.
I am in my first day of investigation into finding out how to do this. But before I continue, I would like to ask a few questions.
There seems to be many JavaScript frameworks for building charts, such as Google charts and jquery charts, and some object orientated programs for building charts, such as Cairo Plot and matplotlib.
The Javascript frameworks seem initially like a nice easy way to do it. However, whereas with tables, where you can enter variable data tags in the body of an HTML page, and have Javascript make it look pretty, the data of a graph goes in the scripting area, where the variable data tags don't quite seem to work the same way. I'm using Django, so a variable tag looks like:
{{ uniquenum }}
Q1. Should this work and am I just doing it wrong, or am I right in thinking variable tags can't go in the scripting area?
Q2. Can you have Javascript frameworks produce graphs from data outside the <script> area?
Q3. I've read that Javascript frameworks are getting more powerful, but because I'll be potentially using large amounts of dynamic data, should I be concentrating on using OO style graph programs like Cairo Plot and matplotlib, which to me don't seem to have the same levels of support?
Just looking for a nudge in the right direction.
How are the plots (typically) placed on the web page?
Here's the usual API schema for javascript-based data visualization libraries:
i. pre-allocate a div as the chart container in your markup (or template); typically using an id selector using an id selector, like so:
<div id="chart1"> </div>
Often these libraries also require that this container be pre-sized--styled with height and width properties e.g.,
<div id="chart1" style="height:300px;width:500px; "></div>
HTML5 libraries are particular about the container--i.e., they require the chart to be placed inside the canvas tag, e.g.,
ii. call the plot constructor from your included javascript file and pass in (i) a data source; (ii) aesthetic options (e.g., axis labels), and (iii) the location in your markup of the container that will hold the plot; this location is usually expected to be in the form of an id selector. So in jqplot for instance inside the jQuery ready event,
plot1 = $.jqplot('chart1', [dataSet1, dataSet2], chartOptions)
javascript-based data visualization libraries i recommend (based on having used each for multiple projects).
I. conventional plotting formats: bar, line, point, pie
Among javascript plotting libraries, i recommend the jQuery-based options because you need less code to create yoru plots and because it's easier to use jQuery's AJAX methods to load your data, for instance, jqplot, flot, and HighCharts (the three libraries that i recommend below) all include in their basic distribution, complete (html, css, js) example plots that demonstate loading data via AJAX.
HighCharts (open source but requires paid license for commercial use, but the most polished and longest feature list; active and fairly high signal-noise ratio forums on the HighCharts Site)
flot (perhaps the most widely used)
jqplot (large selection of plot types, highly modular, e.g,. most functinality beyond the basics is added one plugin at a time)
II. graphs, trees, network diagrams, etc.
d3 (the successor to protovis; stunning graphic quality, rich interactive elements, animation; not strictly jQuery-based, but the author clearly borrowed the basic syntax patterns from jQuery; excellent tutorials on d3 by an accomplished data visualization specialist, Jan Willem Tulp Unlike the others mentioned here, this is a low-level library; indeed there are (at least) several plotting libraries based on d3, e.g., rickshaw by shutterstock, and cube by Square. If you want conventional x-y line/bar plots then for instance, you can build your plots in e.g., HighCharts much faster. D3 becomes more interesting as use cases become more specific--in particular animation and unorthodox visualization (sunburst diagrams, chord diagrams, parallel line plots, geographic maps, etc.)
RafaelJS, renders in SVG, along with d3 and processing.js, you can make just about anything (e.g., two-player games in the browser) with this library; gRafael is a separate library for creating the usual plot types (bar, line, pie)
III. time-series plots
dygraphs (a javascript library dedidated soley to time-series plotting, and its feature set reflects this mission, e.g., capacity
to process and render plots with high volumes of data (>10,000
points), wide range of opdtions for tick labels of time axis with
many formatting options
HighStock (a time-series library from the HighChart guys)
IV. real-time/streaming data
Smoothie Charts (sparse feature set, only intended to do one thing well which is smoothly render streaming data; HighCharts, jqplot, and flot will also do this, but depending on the character of your data (variance, rate) these three general-purpose libraries might not show the data as "spiky", which is precisely what Smoothie was designed to eliminate)
If you're going to deal with very large datasets (>10000 elements), you will probably run into performance problems, no matter what Javascript library you end up picking.
Having said that, there's a growing number of Javascript toolkits which dynamycally load the data set with an HTTP request as a JSON, XML, etc... flot is pretty fast and open source. Highcharts is very feature rich and free for non-commercial projects. And if you need more esoteric visualizations, you must take a look at d3.js.
I have found another javascript charting library to be useful for streaming data = https://github.com/INRIA/VisualSedimentation. The code is baed on d3.js, but has some good extensibility.