Rally Software

I like the X-range Highchart and would like to embed it in a custom Rally app.  I've done several iterations but nothing displays.  I confirmed that location ID will render another graph but can't get this graph to render.  I am getting an error in the console: GET http://localhost:51968/highcharts/xrange.js?_dc=1537886199562 404 (Not Found)

This tells me I may be missing something in config.json.  I'm sure there's something I'm missing and appreciate input.

var chart_data = [{
x: Date.UTC(2014, 10, 28),
x2: Date.UTC(2014, 11, 18),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}];

var series = [{
name: ['Project 1'],
type: 'xrange',
// pointPadding: 0,
// groupPadding: 0,
pointWidth: 20,
data: chart_data,

dataLabels: {
enabled: true
}
}];

var chart_config = {

chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: series
};

this.down('#points_box').add({
xtype: 'rallychart',
chartData: {
categories: ['Prototyping', 'Development', 'Testing'],
series: series
},
chartConfig: chart_config
});

Hi Sheridan,

I'm afraid this isn't something we've really experimented with.  

I can experiment with this in my spare time, but I really can't guarantee that I'll be able to make much progress.

Do you have some steps to install HighCharts and do you have the full code for the app you're working on?

Thanks David.  morky01 I'm not sure if this is something you've seen as well.  Here is the full code.

Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{ xtype: 'container', itemId: 'chart_box' }
],
launch: function () {
this._makeChart();
},
_makeChart: function () {

var chart_data = [{
x: Date.UTC(2014, 10, 28),
x2: Date.UTC(2014, 11, 18),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}];

var series = [{
name: ['Project 1'],
type: 'xrange',
// pointPadding: 0,
// groupPadding: 0,
pointWidth: 20,
data: chart_data,

dataLabels: {
enabled: true
}
}];

var chart_config = {

chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: series
};

this.down('#chart_box').add({
xtype: 'rallychart',
chartData: {
categories: ['Prototyping', 'Development', 'Testing'],
series: series
},
chartConfig: chart_config
});
}
});

Unfortunately, I don't think that chart type is supported in the old version of highcharts (3.0.10) and its ext.js adapter support in app sdk 2.1.  The only workaround is probably to add http://code.highcharts.com/highcharts.js to your config.json and just use highcharts directly rather than our bundled version if you want access to that chart type.