jQuery UI Widgets › Forums › Chart › jqx-chart Cannot read property 'created' of undefined v3.8.1
Tagged: Angular, Angular chart, created, jqx-chart, jqxAngular, jqxChart, pie, scope
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 3 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
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>
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.