_To: 22 }, { Person: "QA 1", M1_From: 7, M1_To: 14, M2_From: 14, M2_To: 25 } ]; var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) { var dataItem = data[itemIndex]; return '
Team: ' + categoryValue + '
Start day: ' + value.from + '
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, toolTipFormatFunction: toolTipCustomFormatFn, valueAxis: { flip: true, unitInterval: 1, displayValueAxis: true, description: 'Day', axisSize: 'auto', tickMarksColor: '#888888', minValue: 1, maxValue: 30 }, series: [ { dataFieldFrom: 'M1_From', dataFieldTo: 'M1_To', displayText: 'Sprint 1', opacity: 1 }, { dataFieldFrom: 'M2_From', dataFieldTo: 'M2_To', displayText: 'Sprint 2', opacity: 1 } ], bands: [ { minValue: 13, maxValue: 16, color: '#FF0000', opacity: 0.15}, { minValue: 24, maxValue: 27, color: '#FF0000', opacity: 0.20} ] } ] }; // setup the chart $('#chartContainer').jqxChart(settings); });