jQuery UI Widgets Forums Chart jqx-chart Cannot read property 'created' of undefined v3.8.1

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • dh@grp.de
    Participant

    When trying to create a pie-chart with Angular, I constantly get the exception: TypeError: Cannot read property ‘created’ of undefined. This used to work fine with version ‘v3.6.0’, but in version ‘v3.8.1’ I get the error.

    
    scope.chartSettings = {
        title: "test",
        description: "testing",
        enableAnimations: false,
        showLegend: true,
        showBorderLine: false,
        legendPosition: { left: 520, top: 140, width: 100, height: 100 },
        padding: { left: 5, top: 5, right: 5, bottom: 5 },
        titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
        colorScheme: 'scheme02',
        source: [{"Y0":0,"X":"P909268796"},{"Y0":6.955479883970238,"X":"P909274532"},{"Y0":7.3732500945894826,"X":"P909274535"}, {"Y0":3.171900617984613,"X":"P909274557"},{"Y0":17.738680792029264,"X":"P909278465"},{"Y0":1.6994576869718756,"X":"P909283124"},{"Y0":3.963299281119939,"X":"P909284692"},{"Y0":27.57598688359188,"X":"P909287111"},{"Y0":31.521944759742716,"X":"P909287117"}],
        seriesGroups: [
            {
                type: 'pie',
                showLabels: true,
                series: [
                    {
                        dataField: "Y0",
                        displayText: "X",
                        labelRadius: 120,
                        initialAngle: 15,
                        centerOffset: 0,
                        legendFormatFunction: function (value) {
                            return value;
                        },
                        formatSettings: { sufix: '%', decimalPlaces: 1 }
                    }
                ]
            }
        ]
    };
    

    And in my HTML I have:

    
    <jqx-chart class="fill" jqx-settings="chartSettings" style="width: 100%; height: 90%;"></jqx-chart>
    

    Dimitar
    Participant

    Hello dh@grp.de,

    Here is an example based on your code that works correctly with the latest version of jQWidgets (3.8.1):

    <!DOCTYPE html>
    <html ng-app="demoApp">
    <head>
        <title id="Description">jqxChart directive for AngularJS</title>
        <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
        <style type="text/css">
            html, body
            {
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="../../scripts/angular.min.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", ["jqwidgets"]);
            demoApp.controller("demoController", function ($scope) {
    
                $scope.chartSettings = {
                    title: "test",
                    description: "testing",
                    enableAnimations: false,
                    showLegend: true,
                    showBorderLine: false,
                    legendPosition: { left: 520, top: 140, width: 100, height: 100 },
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                    colorScheme: 'scheme02',
                    source: [{ "Y0": 0, "X": "P909268796" }, { "Y0": 6.955479883970238, "X": "P909274532" }, { "Y0": 7.3732500945894826, "X": "P909274535" }, { "Y0": 3.171900617984613, "X": "P909274557" }, { "Y0": 17.738680792029264, "X": "P909278465" }, { "Y0": 1.6994576869718756, "X": "P909283124" }, { "Y0": 3.963299281119939, "X": "P909284692" }, { "Y0": 27.57598688359188, "X": "P909287111" }, { "Y0": 31.521944759742716, "X": "P909287117"}],
                    seriesGroups: [
                        {
                            type: 'pie',
                            showLabels: true,
                            series: [
                                {
                                    dataField: "Y0",
                                    displayText: "X",
                                    labelRadius: 120,
                                    initialAngle: 15,
                                    centerOffset: 0,
                                    legendFormatFunction: function (value) {
                                        return value;
                                    },
                                    formatSettings: { sufix: '%', decimalPlaces: 1 }
                                }
                            ]
                        }
                    ]
                };
            });
        </script>
    </head>
    <body>
        <div ng-controller="demoController" style="width: 100%; height: 100%;">
            <jqx-chart class="fill" jqx-settings="chartSettings" style="width: 100%; height: 90%;"></jqx-chart>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.