Rally Software

Expand all | Collapse all

How do you add an X-range Highchart in a custom Rally (Agile Central) app?

Jump to Best Answer
  • 1.  How do you add an X-range Highchart in a custom Rally (Agile Central) app?

    Posted 09-25-2018 10:41 AM

    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
    });



  • 2.  Re: How do you add an X-range Highchart in a custom Rally (Agile Central) app?

    Posted 09-25-2018 05:06 PM

    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?



  • 3.  Re: How do you add an X-range Highchart in a custom Rally (Agile Central) app?

    Posted 09-25-2018 05:38 PM

    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
    });
    }
    });



  • 4.  Re: How do you add an X-range Highchart in a custom Rally (Agile Central) app?
    Best Answer

    Posted 09-25-2018 06:18 PM

    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.