My Chart
Trying
by dassey
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width:100%; height:2200px;"></div>
JavaScript
var options = {
chart: {
zoomType: 'y',
borderWidth: '0',
borderRadius: '15',
renderTo: 'container',
inverted: true,
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(44, 44, 58)'],
[1, 'rgb(62, 62, 62)']
]
},
plotBackgroundColor: 'rgba(255, 255, 255, .9)'
},
tooltip: {
useHTML: true,
formatter: function () {
var point = this.point;
return '<table><tr>' + point.category + '</tr><tr><td style="color:#00CC00">Start:</td><td style="text-align: right">'
+ Highcharts.dateFormat('%b %e, %Y', point.low) + '</td></tr><tr><td style="color:#FF0000">Finish:</td><td>'
+ Highcharts.dateFormat('%b %e, %Y', point.high) + '</td></tr><tr><td>Unit:</td> <td></tr></table>'
}
},
subtitle: {
text: 'MTC Leavenworth'
},
credits: {
text: 'MTC Leavenworth',
href: 'https://gkoportal.ngb.army.mil/sites/G3_ART/C/BCTCP/default.aspx'
},
legend: {
enabled: true
},
title: {
text: 'EVMS Calendar'
},
xAxis: {
categories: []
},
plotOptions: {
series: {
grouping: false
}
},
yAxis: {
type: 'datetime',
minRange: 0,
startOnTick: false,
endOnTick: false,
title: {
text: 'yAxis'
}
},
series: []
},
categories = [];;
var data = "Soldier 1,12/1/2013,12/10/2013,Training 1,Unit 1,4/8/2014,4/10/2014,Training 3,Unit 7\nSoldier 2,4/15/2013,4/18/2013,Training 2,Unit 2,4/20/2014,4/23/2014,Training 4,Unit 8\nSoldier 3,6/3/2013,6/3/2013,Training 31,Unit 3,8/12/2014,8/13/2014,Training 66,Unit 9,6/15/2013,6/22/2013,Train 92,Unit 44\nSoldier 4,10/10/2013,10/12/2013,Training 9,Unit 4,10/13/2013,10/19/2013,Training 6,Unit 10\nSoldier 5,9/20/2013,9/24/2013,Training...