jQWidgets Forums

This topic contains 7 replies, has 3 voices, and was last updated by cenergistic 10 years, 6 months ago.

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

Author

jqx-instance using ngController scope-property syntax Posts

November 26, 2014 at 3:33 am jqx-instance using ngController scope-property syntax #63321

Participant

How do we use the “jqx-instance” attribute directive when used with the ngController scope-property syntax: “Controller as myController”?
see: Angular Docs on ngController

for example, this does not work as it should:


<div ng-controller="MainController as main">
    <jqx-button jqx-instance="main.myButton"></jqx-button>
</div>

in the controller, this.myButton should point to the instance, but it is undefined!

And please don’t tell me to use the other declaration style, i.e., by injecting “$scope” into the controller. With more complex applications we need the more specific syntax to promote clarity, isolation, modularity, etc., especially when coming from multiple developers.

Thank you

November 26, 2014 at 4:30 am jqx-instance using ngController scope-property syntax #63323

Fire613

Participant

I looked into the source and the ngController scope-property syntax is not supported… but it’s easy enough to fix (see jqxangular.js:278). And such a fix falls within the terms of the jqWidgets EULA… although I can’t post any code here. If the admin folks (Hi Peter!) want to see my changes, please email me!

By the way, I always find the source to be so clean and simple… nice job Peter Stoev and the team.

November 26, 2014 at 8:50 am jqx-instance using ngController scope-property syntax #63357

Peter Stoev

Keymaster

Hi Fire613,

Don’t know how you implemented it, but I suppose you used $parse

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 13, 2014 at 11:02 pm jqx-instance using ngController scope-property syntax #64163

cenergistic

Participant

I am having the same issue how do I fix this?

I am trying to use a variable chart settings. on my controller where I have the controller as syntax

<jqx-chart jqx-settings="chartSettings" jqx-watch-settings jqx-ng-model style="width: 100%; height:550px;"></jqx-chart>

cal.chartSettings = {
			title: "24HR Period of Data",
			description: "Kilowatts per Hour",
			showLegend: true,
			source: dataAdapter,
			enableAnimations: true,
			padding: { left: 5, top: 5, right: 50, bottom: 5 },
			titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },			
			xAxis:
				{
					dataField: 'HR',
					showGridLines: true
				},
			colorScheme: 'scheme01',
			seriesGroups:
				[
					{
						type: 'column',
						columnsGapPercent: 50,
						valueAxis:
						{
							unitInterval: 350,
							displayValueAxis: true,
							description: 'KW'
						},
						series: [
								{
									dataField: 'KW',
									displayText: 'KW/H',
									colorFunction: function (value, itemIndex, serie, group) {
										return (value > 100) ? '#CC1133' : '#55CC55';
									}
								},
						]
					}					
				],
			bindingcomplete: function (event) {
				alert("binding is completed");
			}
		};

December 14, 2014 at 7:38 am jqx-instance using ngController scope-property syntax #64164

Peter Stoev

Keymaster

Hello,

Please, provide a small .htm page sample which illustrates your issue. Also check whether you use jQWidgets 3.6.0. I also don’t see in your code how you refer to your controller or the settings defined in it.

Best Regards,
Peter Stoev

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

December 15, 2014 at 4:03 pm jqx-instance using ngController scope-property syntax #64206

cenergistic

Participant

Below is a modified version of the chart sample. thanks for your help

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxChart directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="/jqwidgetsangular/styles/jqx.base.css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script type="text/javascript" src="/jqwidgetsangular/scripts/jqxcore.js"></script>
    <script type="text/javascript" src="/jqwidgetsangular/scripts/jqxdata.js"></script>
    <script type="text/javascript" src="/jqwidgetsangular/scripts/jqxbuttons.js"></script>
    <script type="text/javascript" src="/jqwidgetsangular/scripts/jqxdraw.js"></script>
    <script type="text/javascript" src="/jqwidgetsangular/scripts/jqxchart.core.js"></script>
    <script type="text/javascript" src="/jqwidgetsangular/scripts/jqxangular.js"></script>

    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", demoController);

        function demoController() {
            var dm = this;

            dm.dataAdapter = new $.jqx.dataAdapter( {
                datatype: "csv",
                datafields: [
                    { name: 'Country' },
                    { name: 'GDP' },
                    { name: 'DebtPercent' },
                    { name: 'Debt' }
                ],
                url: '/jqwidgetsangular/sampledata/gdp_dept_2010.txt'
            },
            {
                async: false,
                autoBind: true,
                loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); }
            });

            dm.setLineChartType = setLineChartType();

            // prepare jqxChart settings
            dm.chartSettings = {
                title: "Economic comparison",
                description: "GDP and Debt in 2010",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 50, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dm.dataAdapter,
                xAxis:
                {
                    dataField: 'Country',
                    showGridLines: true
                },
                colorScheme: 'scheme01',
                seriesGroups:
                        [
                            {
                                type: 'column',
                                columnsGapPercent: 50,
                                valueAxis:
                                {
                                    unitInterval: 5000,
                                    displayValueAxis: true,
                                    description: 'GDP & Debt per Capita($)'
                                },
                                series: [
                                    { dataField: 'GDP', displayText: 'GDP per Capita' },
                                    { dataField: 'Debt', displayText: 'Debt per Capita' }
                                ]
                            },
                            {
                                type: 'line',
                                valueAxis:
                                {
                                    unitInterval: 10,
                                    displayValueAxis: false,
                                    description: 'Debt (% of GDP)'
                                },
                                series: [
                                    { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
                                ]
                            }
                        ]
            };

            function setLineChartType() {
                dm.chartSettings.seriesGroups[0].type = 'line';
            }
        };
    </script>
</head>
<body>
<div data-ng-controller="demoController as dm">
    <jqx-chart jqx-settings="dm.chartSettings" jqx-watch="dm.chartSettings.seriesGroups" style="width: 850px; height: 500px;"></jqx-chart>
    <br />
    <jqx-button jqx-on-click="dm.setLineChartType()">Set Line Chart Type</jqx-button>
</div>
</body>
</html>

December 15, 2014 at 5:07 pm jqx-instance using ngController scope-property syntax #64208

Peter Stoev

Keymaster

Hi cenergistic,

The problems in the provided code are syntax errors.

Corrected code below:

<!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" />
    <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", demoController);

         function demoController() {
             var dm = this;

             dm.dataAdapter = new $.jqx.dataAdapter({
                 datatype: "csv",
                 datafields: [
                     { name: 'Country' },
                     { name: 'GDP' },
                     { name: 'DebtPercent' },
                     { name: 'Debt' }
                 ],
                 url: '../sampledata/gdp_dept_2010.txt'
             },
             {
                 async: false,
                 autoBind: true,
                 loadError: function (xhr, status, error) { alert('Error loading'); }
             });

             // prepare jqxChart settings
             dm.chartSettings = {
                 title: "Economic comparison",
                 description: "GDP and Debt in 2010",
                 showLegend: true,
                 enableAnimations: true,
                 padding: { left: 5, top: 5, right: 50, bottom: 5 },
                 titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                 source: dm.dataAdapter,
                 xAxis:
                 {
                     dataField: 'Country',
                     showGridLines: true
                 },
                 colorScheme: 'scheme01',
                 seriesGroups:
                         [
                             {
                                 type: 'column',
                                 columnsGapPercent: 50,
                                 valueAxis:
                                 {
                                     unitInterval: 5000,
                                     displayValueAxis: true,
                                     description: 'GDP & Debt per Capita($)'
                                 },
                                 series: [
                                     { dataField: 'GDP', displayText: 'GDP per Capita' },
                                     { dataField: 'Debt', displayText: 'Debt per Capita' }
                                 ]
                             },
                             {
                                 type: 'line',
                                 valueAxis:
                                 {
                                     unitInterval: 10,
                                     displayValueAxis: false,
                                     description: 'Debt (% of GDP)'
                                 },
                                 series: [
                                     { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
                                 ]
                             }
                         ]
             };

             dm.setLineChartType = function() {
                 dm.chartSettings.seriesGroups[0].type = 'line';
             }
         };
    </script>
</head>
<body>
<div data-ng-controller="demoController as dm">
    <jqx-chart jqx-settings="dm.chartSettings" jqx-watch="dm.chartSettings.seriesGroups" style="width: 850px; height: 500px;"></jqx-chart>
    <br />
    <jqx-button jqx-on-click="dm.setLineChartType()">Set Line Chart Type</jqx-button>
</div>
</body>
</html>

Best Regards,
Peter Stoev

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

December 15, 2014 at 7:59 pm jqx-instance using ngController scope-property syntax #64215

cenergistic

Participant

That worked thank you very much. I appreciate the help.

Author

Posts

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

You must be logged in to reply to this topic.