Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
anne
1465
Stacked column chart angularjs
posted

Hi All,

I have tried to get the stacked column chart to work but simply can't I have looked at these examples www.igniteui.com/.../stacked-series

but none of these work in angular. Here is what the code looks like in my controller of my view. I have used the line and column charts fine but the stacked column just does not work, the code for the stack column, namely the series creation I have taken from the examples provided.

module XXApp {
    export class ChartController {
        loading: boolean;
        proportionCost: IProportion[];
        error: string;
        chartData: any[];
        loadedData: any[];
        chartShown: boolean;
        chartTitle: string;
        public static $inject = ["$q", "$state", 'referenceService', 'chartService'];
        constructor(private $q: ng.IQService, private $state: ng.ui.IStateService, private referenceService: ReferenceService, private chartService: ChartService) {
            this.loadedData = [];
            this.chartData = [];
            this.chartShown = false;
             this.proportionCost = [];
            this.chartService.getProportions().then((success) => {
                this.proportionCost = success;
            }, (error) => {
                this.error = error;
            }).finally(() => {
                this.loading = false;
                });
            this.chartData = this.proportionCost;
        }
        
        showChart() {
            this.chartTitle = "XXX";
            this.generateCategoryXChart();
            this.chartShown = true;
        }
        generateCategoryXChart() {
 
            $("#chart").igDataChart({
                width: "100%",
                height: "480px",
                dataSource: this.chartData,
                windowResponse: "immediate",
                axes: [
                    {
                        name: "XAxisPoint",
                        type: "categoryX",
                        title: "Vessel Type",
                        label: "Category",
                        labelTextStyle: "8pt Roboto",
                        gap: 1,
                    },
                    {
                        name: "YAxisPoint",
                        type: "numericY",
                        title: "Percentage",
                        titleAngle: -90,
                    }
                ],
    
                series: [function () {
                    var seriesObj = {
                        name: "parent",
                        xAxis: "XAxisPoint",
                        yAxis: "YAxisPoint",
                        type: "stackedColumn",
                        outline: "transparent",
                        radius: "0",
                        series: [{
                            name: "Crew",
                            title: "Crew",
                            type: "stackedFragment",
                            showTooltip: true,
                            tooltipTemplate: "Crew",
                            valueMemberPath: "Crew",
                        }]
                    };
                    return seriesObj;
                }() ],
            });
        }
               
        buildChart() {
                 this.showChart();
            }
        }
    angular.module('app').controller('ChartController', ChartController);
}
The series weirdness gives this error
Severity Code Description Project File Line Suppression State
Error TS2345 Argument of type '{ [x: number]: undefined; width: string; height: string; dataSource: any[]; windowResponse: strin...' is not assignable to parameter of type 'string'. 

Please can someone assist or provide an example angularjs application where a stacked column this is used.

kind regards,
Anne
Parents
  • 845
    Suggested Answer
    Offline posted

    Hello Anne,

    Thank you for contacting Infragistics Developer Support!

    Here is a sample stacked bar chart using the AngularJs wrappers:

    http://jsfiddle.net/95bktces/1/

    Feel free to contact me for additional information.

Reply Children