We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Read more about our Privacy Policy and Cookie Policy
{"chart":{"zIndex":0,"enabled":true,"type":"timeline","title":{"zIndex":80,"enabled":false,"maxLength":null,"fontSize":16,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#7c868e","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"center","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"center","text":"Chart Title","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":10,"right":0},"background":{"zIndex":0,"enabled":false}},"background":{"zIndex":0.5,"enabled":true},"tooltip":{"enabled":true,"title":{"zIndex":1,"enabled":true,"maxLength":null,"fontSize":14,"fontFamily":"Verdana, Helvetica, Arial, sans-serif","fontColor":"#ffffff","fontOpacity":1,"fontDecoration":"none","fontStyle":"normal","fontVariant":"normal","fontWeight":"normal","letterSpacing":"normal","textDirection":"ltr","textShadow":"none","lineHeight":"normal","textIndent":0,"vAlign":"top","hAlign":"left","wordWrap":"normal","wordBreak":"normal","textOverflow":"","selectable":false,"disablePointerEvents":false,"useHtml":false,"width":null,"height":null,"align":"left","orientation":"top","rotation":0,"text":"","margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":0,"top":0,"bottom":0,"right":0},"background":{"enabled":false}},"separator":{"zIndex":1,"enabled":true,"fill":{"color":"#CECECE","opacity":0.3},"stroke":"none","width":"100%","height":1,"orientation":"top","margin":{"left":0,"top":5,"bottom":5,"right":0}},"background":{"zIndex":0,"enabled":true}},"margin":{"left":0,"top":0,"bottom":0,"right":0},"padding":{"left":10,"top":10,"bottom":15,"right":20},"a11y":{"enabled":true,"mode":"chart-elements"},"autoRedraw":true,"bounds":{},"contextMenu":{"enabled":true},"credits":{"text":"AnyChart","url":"https://www.anychart.com/?utm_source=registered","alt":"AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}","imgAlt":"AnyChart - JavaScript Charts","logoSrc":"https://static.anychart.com/logo.png","enabled":false},"selectRectangleMarqueeFill":{"color":"#d3d3d3","opacity":0.4},"selectRectangleMarqueeStroke":"#d3d3d3","interactivity":{"spotRadius":2,"multiSelectOnClick":false,"unselectOnClickOutOfPoint":true,"hoverMode":"single","selectionMode":"multi-select","zoomOnMouseWheel":true,"scrollOnMouseWheel":true},"defaultSeriesType":"moment","maxBubbleSize":"20%","minBubbleSize":"5%","maxPointWidth":"100%","minPointLength":0,"baseline":0,"palette":{"type":"distinct","items":["#64b5f6","#1976d2","#ef6c00","#ffd54f","#455a64","#96a6a6","#dd2c00","#00838f","#00bfa5","#ffa000"]},"markerPalette":{"items":["circle","diamond","square","triangle-down","triangle-up","diagonal-cross","pentagon","cross","v-line","star5","star4","trapezium","star7","star6","star10"]},"hatchFillPalette":{"items":[{"type":"backward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"forward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"horizontal","color":"black 0.5","thickness":1,"size":10},{"type":"vertical","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-backward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"grid","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-forward-diagonal","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-horizontal","color":"black 0.5","thickness":1,"size":10},{"type":"dashed-vertical","color":"black 0.5","thickness":1,"size":10},{"type":"diagonal-cross","color":"black 0.5","thickness":1,"size":10},{"type":"diagonal-brick","color":"black 0.5","thickness":1,"size":10},{"type":"divot","color":"black 0.5","thickness":1,"size":10},{"type":"horizontal-brick","color":"black 0.5","thickness":1,"size":10},{"type":"vertical-brick","color":"black 0.5","thickness":1,"size":10},{"type":"checker-board","color":"black 0.5","thickness":1,"size":10},{"type":"confetti","color":"black 0.5","thickness":1,"size":10},{"type":"plaid","color":"black 0.5","thickness":1,"size":10},{"type":"solid-diamond","color":"black 0.5","thickness":1,"size":10},{"type":"zig-zag","color":"black 0.5","thickness":1,"size":10},{"type":"weave","color":"black 0.5","thickness":1,"size":10},{"type":"percent-05","color":"black 0.5","thickness":1,"size":10},{"type":"percent-10","color":"black 0.5","thickness":1,"size":10},{"type":"percent-20","color":"black 0.5","thickness":1,"size":10},{"type":"percent-25","color":"black 0.5","thickness":1,"size":10},{"type":"percent-30","color":"black 0.5","thickness":1,"size":10},{"type":"percent-40","color":"black 0.5","thickness":1,"size":10},{"type":"percent-50","color":"black 0.5","thickness":1,"size":10},{"type":"percent-60","color":"black 0.5","thickness":1,"size":10},{"type":"percent-70","color":"black 0.5","thickness":1,"size":10},{"type":"percent-75","color":"black 0.5","thickness":1,"size":10},{"type":"percent-80","color":"black 0.5","thickness":1,"size":10},{"type":"percent-90","color":"black 0.5","thickness":1,"size":10}]},"normal":{"labels":{},"minLabels":{},"maxLabels":{}},"hovered":{"labels":{},"minLabels":{},"maxLabels":{}},"selected":{"labels":{},"minLabels":{},"maxLabels":{}},"scale":{"visibleMinimum":1548029664000,"visibleMaximum":1556754336000,"dataMinimum":1548115200000,"dataMaximum":1556668800000,"minimumGap":{"value":0.01,"isPixels":false},"maximumGap":{"value":0.01,"isPixels":false},"maxTicksCount":200,"zoomLevels":[[{"unit":"minute","count":10},{"unit":"hour","count":1},{"unit":"day","count":1}],[{"unit":"hour","count":4},{"unit":"hour","count":12},{"unit":"day","count":1}],[{"unit":"day","count":1},{"unit":"day","count":2},{"unit":"week","count":1}],[{"unit":"day","count":2},{"unit":"week","count":1},{"unit":"month","count":1}],[{"unit":"month","count":1},{"unit":"quarter","count":1},{"unit":"year","count":1}],[{"unit":"quarter","count":1},{"unit":"year","count":1},{"unit":"year","count":10}],[{"unit":"year","count":1},{"unit":"year","count":10},{"unit":"year","count":50}],[{"unit":"year","count":10},{"unit":"year","count":50},{"unit":"year","count":200}]]},"axis":{"zIndex":35,"enabled":true},"lineAxesMarkers":[{"zIndex":30.2,"enabled":true,"scaleRangeMode":"consider","stroke":{"color":"#ff0000","thickness":2},"value":"2019/03/29"}],"textAxesMarkers":[],"rangeAxesMarkers":[],"series":[{"zIndex":34,"enabled":true,"seriesType":"range","clip":false,"legendItem":{"enabled":true,"iconType":"square"},"color":null,"pointWidth":null,"isVertical":null,"normal":{"hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":true,"fontColor":"#fff","useHtml":true,"format":"{%name}<br><span style=\"font-size: 85%\">{%start}{dateTimeFormat:MM/dd} - {%end}{dateTimeFormat:MM/dd}</span>"},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":false,"disablePointerEvents":false,"position":"value","anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":4},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"hovered":{"hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":null,"size":6},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"selected":{"fill":{"color":"#333","opacity":0.85},"negativeFill":{"color":"#333","opacity":0.85},"risingFill":{"color":"#333","opacity":0.85},"fallingFill":{"color":"#333","opacity":0.85},"stroke":{"color":"#333","opacity":0.85},"lowStroke":{"color":"#333","opacity":0.85},"highStroke":{"color":"#333","opacity":0.85},"lowFill":{"color":"#333","opacity":0.85},"highFill":{"color":"#333","opacity":0.85},"negativeStroke":{"color":"#333","opacity":0.85},"risingStroke":{"color":"#333","opacity":0.85},"fallingStroke":{"color":"#333","opacity":0.85},"hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":null,"size":6},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"a11y":{"enabled":false,"titleFormat":"Series named {%SeriesName} with {%SeriesPointsCount} points. Min value is {%SeriesYMin}, max value is {%SeriesYMax}"},"data":[{"name":"Planning","start":"2019/01/22","end":"2019/02/04","fill":"#01b53f","stroke":"#01b53f"},{"name":"Research","start":"2019/02/04","end":"2019/02/18","fill":"#1c4598","stroke":"#1c4598"},{"name":"Development","start":"2019/02/18","end":"2019/03/22","fill":"#ff6600","stroke":"#ff6600"},{"name":"Implementation","start":"2019/03/22","end":"2019/04/05","fill":"#00a8e0","stroke":"#00a8e0"},{"name":"Surveillance","start":"2019/04/05","end":"2019/04/19","fill":"#f6bc16","stroke":"#f6bc16"},{"name":"Follow-Up","start":"2019/04/19","end":"2019/05/01","fill":"#e51a23","stroke":"#e51a23"}],"direction":"up"},{"zIndex":33,"enabled":true,"seriesType":"moment","clip":false,"legendItem":{"enabled":true,"iconType":"square"},"color":null,"isVertical":null,"normal":{"hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":true},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":true,"disablePointerEvents":false,"position":"value","anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":4},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"hovered":{"hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":null,"size":6},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"selected":{"fill":{"color":"#333","opacity":0.85},"negativeFill":{"color":"#333","opacity":0.85},"risingFill":{"color":"#333","opacity":0.85},"fallingFill":{"color":"#333","opacity":0.85},"stroke":{"color":"#333","opacity":0.85},"lowStroke":{"color":"#333","opacity":0.85},"highStroke":{"color":"#333","opacity":0.85},"lowFill":{"color":"#333","opacity":0.85},"highFill":{"color":"#333","opacity":0.85},"negativeStroke":{"color":"#333","opacity":0.85},"risingStroke":{"color":"#333","opacity":0.85},"fallingStroke":{"color":"#333","opacity":0.85},"hatchFill":"none","risingHatchFill":"none","fallingHatchFill":"none","labels":{"enabled":null},"minLabels":{"enabled":null},"maxLabels":{"enabled":null},"markers":{"enabled":null,"size":6},"outlierMarkers":{"enabled":null,"anchor":"center","offsetX":0,"offsetY":0,"rotation":0,"size":6}},"a11y":{"enabled":false,"titleFormat":"Series named {%SeriesName} with {%SeriesPointsCount} points. Min value is {%SeriesYMin}, max value is {%SeriesYMax}"},"data":[["2019/01/25","Initial approval"],["2019/02/15","Final approval"],["2019/03/09","Test 1"],["2019/03/14","Test 2"],["2019/03/19","Test 3"],["2019/04/08","Check A/B Test"],["2019/04/26","Customer Survey"]],"direction":"odd-even"}],"verticalRelativeOffset":{"AC":0,"EE":0}}}
<html><head><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-timeline.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script><linkhref="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css"type="text/css"rel="stylesheet"><linkhref="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css"type="text/css"rel="stylesheet"><styletype="text/css">html,
body,
#container{width: 100%;height: 100%;margin: 0;padding: 0;}</style></head><body><divid="container"></div><script>
anychart.onDocumentReady(function(){// create timeline chartvar chart = anychart.timeline();// create range seriesvar rangeSeries = chart.range(rangeData());// set range series labels settings
rangeSeries
.labels().useHtml(true).fontColor('#fff').format('{%name}<br><span style="font-size: 85%">{%start}{dateTimeFormat:MM/dd} - {%end}{dateTimeFormat:MM/dd}</span>');// set range series bar height
rangeSeries.height(50);// create moment series
chart.moment(eventsData());// create line marker and set it's value and stroke settings
chart.lineMarker().value('2019/03/29').stroke('2 #ff0000');// set container id for the chart
chart.container('container');// initiate chart drawing
chart.draw();});// range series datafunctionrangeData(){return[{
name:'Planning',
start:'2019/01/22',
end:'2019/02/04',
fill:'#01b53f',
stroke:'#01b53f'},{
name:'Research',
start:'2019/02/04',
end:'2019/02/18',
fill:'#1c4598',
stroke:'#1c4598'},{
name:'Development',
start:'2019/02/18',
end:'2019/03/22',
fill:'#ff6600',
stroke:'#ff6600'},{
name:'Implementation',
start:'2019/03/22',
end:'2019/04/05',
fill:'#00a8e0',
stroke:'#00a8e0'},{
name:'Surveillance',
start:'2019/04/05',
end:'2019/04/19',
fill:'#f6bc16',
stroke:'#f6bc16'},{
name:'Follow-Up',
start:'2019/04/19',
end:'2019/05/01',
fill:'#e51a23',
stroke:'#e51a23'}];}// event series datafunctioneventsData(){return[['2019/01/25','Initial approval'],['2019/02/15','Final approval'],['2019/03/09','Test 1'],['2019/03/14','Test 2'],['2019/03/19','Test 3'],['2019/04/08','Check A/B Test'],['2019/04/26','Customer Survey']];}</script></body></html>