jqxChart date problem
by kaeldric
HTML
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='chartContainer' style="width:850px; height:500px"></div>
JavaScript
$(document).ready(function () {
// prepare the data
var data = [{
Person: "Planning",
M1_From: new Date(2014, 0, 1),
M1_To: new Date(2014, 0, 5),
M2_From: new Date(2014, 0, 5),
M2_To: new Date(2014, 0, 10)
}, {
Person: "Dev 1",
M1_From: new Date(2014, 0, 5),
M1_To: new Date(2014, 0, 7),
M2_From: new Date(2014, 0, 9),
M2_To: new Date(2014, 0, 17)
}, {
Person: "Dev 2",
M1_From: new Date(2014, 0, 5),
M1_To: new Date(2014, 0, 12),
M2_From: new Date(2014, 0, 14),
M2_To: new Date(2014, 0, 22)
}, {
Person: "QA 1",
M1_From: new Date(2014, 0, 7),
M1_To: new Date(2014, 0, 14),
M2_From: new Date(2014, 0, 14),
M2_To: new Date(2014, 0, 25)
}];
var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = data[itemIndex];
return '<DIV style="text-align:left"><b>Team: ' + categoryValue +
'</b><br />Start day: ' + value.from +
'<br />End day: ' + value.to;
};
// prepare jqxChart settings
var settings = {
title: "Monthly Project Schedule",
description: "Website update plan",
enableAnimations: true,
showLegend: true,
padding: {
left: 5,
top: 5,
right: 10,
bottom: 5
},
titlePadding: {
left: 90,
top: 0,
right: 0,
bottom: 10
},
source: data,
xAxis: {
dataField: 'Person',
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
showGridLines: true
},
colorScheme: 'scheme03',
seriesGroups: [{
orientation: 'horizontal',
type: 'rangecolumn',
columnsGapPercent: 100,
...