javascript - Creating a timeline with a bar chart in Google Charts? -

I want to create a timeline with Google charts to show the duration, repetition, and overlap to show the event. Each line should be a new event and the column time should increase.

I see, though, and do not think what I want - not only is the length of a horizontal strip, but there are many ranks in the same line (non-overlapping) .

Is it possible with Chrome or any other free chart library?

Edit: I want to produce a chart similar to the one below

code here Is:

  function drawVisualization () {// Create and generate data table Var data = new google.visualization.DataTable (); Data.addColumn ('string', 'assignment'); Data.addColumn ('Date', 'Dummy'); Data.addColumn ('Date', 'Current Assignment'); Data.addColumn ('Date', 'Dummy'); Data.addColumn ('Date', 'Next Assignment'); Data.addRows ([['Uranus', New Date (1298-2464000), {v: New Date (26082800000), f: '2 / 21-12 / 20'}, New Date (0) {V: New date (0), F: '1 / 0-1 / 0'}], ['Thomas Lamontzi', new date (1297036800000), {v: new date (6393600000), f: '2 / 7-4 / 22 '}, New Date (0), {v: New Date (0), F:' 1 / 0-1 / 0 '}], [' Shu Li ', New Date (0) {V: New Date (0), F: '1 / 0-1 / 0'}, New Date (1303689600000), {v: New Date (2937600000), f: '4 / 25-5 / 29'}] , [V] New date (4579200000), f: '2 / 21-4 / 15'}, new date (0), {v: new date (0), ['satin', new date (1298246400000) , F: '4 / 4-4 / 22'}, New York: Date (259200000), {v: New Date (2160000000), F: '4 / 25-5 / 20'}], ['Ric Maverick', New Date (1302652800000), {v: New Date (2592000000), F: '4 / 13-5 / 13 '}, new date (0), {v: new date (0), f:' 1 / 0-1 / 0 '}],]); // chart for date date date var dateMin = new date (2010,11,1); Var dateMax = new date (2012,0,1); Var date = new date (2012315); // Create and draw visualization. New google.visualization.BarChart (document.getElementById ('visualization')). Drag (data, {width: 600, height: 400, true: true, series} [[color: 'transparent'}, {}, {color: 'transparent'}, {}], hxis: {view: {max. : Date Max, Min: Date, Minute, Baseline: Date Today, Baseline Color: 'Red',},}); Basically, you create 4 series:  
 
 Dummy series (time till first assignment)  
 The duration of the first assignment  
 Dummy series (  
 The second assignment period   
 Then you can set series 1 and 3 invisible.  
 For data, you have to calculate some dates (I did excel in Excel), but basically you get the duration by decreasing the start / end date for each assignment, and set it Dummy as the date of introduction of the second workgroup with the first assignment as well as the period of the first assignment.  
 I do the  {value: x, format: y}  move the mouseover to work properly, you can automate it (again, because I used to store the data in Excel My javascript used to take much longer).  
 Then the settings set the minimum date, the maximum date, the range is considered appropriate color, and the base line is set in red. Unfortunately, for reasons beyond my understanding, baseline does not matter That date set wants to be on the left side of the chart. If you can find a way around it, then your chart is there.