I have a requirement to create a custom HTML5 based control which a cross between a timeline and a gantt chart:
However I cannot get a hold of a 3rd party control already on the market that would cut down some dev time.
It needs to have the miniature zoomed out timeline at the top for fast navigation which when scrolled updates the main section.
Is there anything that already exists, be that open source or paid, that can handle this scenario?
Yes, there is. RadiantQ FlexyGantt does exactly what you want. Here is a screenshot:
You can see online demos of our gantt here. When the page loads, select FlexyGantt on the left which is what you need and has a number of "timline" samples.
Ideal for visualizing resource utilization in a timeline, also very interactive and comes with a lot of useful features.
It looks like something I'd start from scratch - but that's just my way, I'm a Sheridan/Infragistics casualty from the early 2000s :-)
You could try to use two gantt controls as they are both just gantts. If there's nothing good for the zoomed out timeline, draw that using canvas, it's just rectangles and a draggable on top.
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'm looking for an library, to generate charts on client side.
I found a lot, by searching on web and stackoverflow, like here
https://stackoverflow.com/questions/2227421/good-javascript-library-for-drawing-charts-using-json
or this very good collection:
http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
There are so much alternatives, I'm a bit overwhelmed. Which one can use JSON data, which one is up to date, which one is easy to use (because I'm absolutely new on this topic), which one is robust, works on mobile phone (or not), which project is still alive, etc.
I need different chards, an line chart is mandatory. Also zoom in and zoom out is mandatory.
So I took a closer look on jqplot an flot.
Both providing zoom, but it looks like zooming is more an scaling. Which means: the granularity will not change by zoom in.
Because the graph will have a lot of data/points, i need to consolidate informations before sending them to the client. By zooming in, I need to rise the granularity, so the chart should be able to process new data for the zoomed area. (I hope I've made myself clear.)
Thanks for any kind of attention.
Raphael.js http://raphaeljs.com/
HTML5 Graph http://chrisvalleskey.com/html5-graph/
Google Visualization API: http://code.google.com/apis/chart/interactive/docs/gallery.html
Flot: http://code.google.com/p/flot/
Unfortunately there is no helpful answer, so I like to write down, what i learned the last days for this question.
jqPlot and frot are supporting zooming at an basic level. That means, it's more an scaling.
By looking at the google groups for qjPlot and flot, the support for jqPlot is better (lot's of unanswered questions at the flot group).
jqPlot has an better axis-label-handling by zooming.
jqPlot also provides hooks. By using those hooks, it's seems to be possible to combine zooming and loading new JSON data in order to get an better granularity of the zoomed view.
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.