jQWidgets Forums

Forum Replies Created

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

Author

Posts

January 13, 2015 at 2:59 pm in reply to: Value os xAxis on the colorfunction Value os xAxis on the colorfunction #65309

Participant

Both the categoryValue and the categoryAxis come as undefined on the function. I trioed that yesterday when I saw them used on the tooltip formatting.

Thanks

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

cenergistic

Participant

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

December 15, 2014 at 4:03 pm in reply to: jqx-instance using ngController scope-property syntax 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 13, 2014 at 11:02 pm in reply to: jqx-instance using ngController scope-property syntax 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");
			}
		};

Author

Posts

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