mdasberg/xcharts.html

## xcharts.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>xCharts</title>
        <script src="/bower_components/angular/angular.min.js"></script>
        <script src="/bower_components/d3/d3.js"></script>
        <script src="/bower_components/bower-xcharts/xcharts.js"></script>

        <link href="/bower_components/bower-xcharts/xcharts.css" rel="stylesheet">

        <script type="text/javascript">
            angular.module("xchartExample", []).
                    controller('ctrl', ['$scope', '$interval', function ($scope, $interval) {
                        $scope.main = [
                            {
                                "className": ".pizza",
                                "data": [
                                    {
                                        "x": "Pepperoni",
                                        "y": 4
                                    },
                                    {
                                        "x": "Creamy bacon",
                                        "y": 3
                                    },
                                    {
                                        "x": "Mixed grill",
                                        "y": 3
                                    },
                                    {
                                        "x": "Cheese",
                                        "y": 8
                                    },
                                    {
                                        "x": "Supreme",
                                        "y": 8
                                    }
                                ]
                            },
                            {
                                "className": ".anotherPizza",
                                "data": [
                                    {
                                        "x": "Pepperoni",
                                        "y": 4
                                    },
                                    {
                                        "x": "Creamy bacon",
                                        "y": 3
                                    },
                                    {
                                        "x": "Mixed grill",
                                        "y": 3
                                    },
                                    {
                                        "x": "Cheese",
                                        "y": 8
                                    },
                                    {
                                        "x": "Supreme",
                                        "y": 8
                                    }
                                ]
                            }
                        ]

                        // change values at interval 2 seconds
                        $interval(function () {
                            var main = angular.copy($scope.main);
                            angular.forEach(main[0].data, function (d) {
                                d.y = Math.floor((Math.random() * 30) + 1);
                            });
                            angular.forEach(main[1].data, function (d) {
                                d.y = Math.floor((Math.random() * 30) + 1);
                            });
                            $scope.main = main;

                        }, 2000)
                    }]).
                    directive('xchart', [ function () {
                        return {
                            restrict: 'EA',
                            replace: true,
                            scope: {
                                main: "=",
                                comp: "=",
                                options: "="
                            },
                            template: '<div class="xchart" ng-style="style"></div>',
                            link: function (scope, element, attrs) {
                                var style = {};
                                if (angular.isDefined(attrs.height)) {
                                    style.height = attrs.height + 'px';
                                }
                                if (angular.isDefined(attrs.width)) {
                                    style.width = attrs.width + 'px';
                                }

                                scope.style = style;

                                // Override the default data settings
                                var data = {
                                    xScale: angular.isDefined(attrs.scaleX) ? attrs.scaleX : 'ordinal',
                                    yScale: angular.isDefined(attrs.scaleY) ? attrs.scaleY : 'ordinal',
                                    main: [],
                                    comp: []
                                };
                                var type = angular.isDefined(attrs.type) ? attrs.type : 'line-dotted';

                                var chart;
                                scope.$watch('type', function (t) {
                                    if (chart === undefined) {
                                        chart = new xChart(type, data, '#' + attrs.id, {});
                                    } else {
                                        chart.setType(t)
                                    }
                                });

                                scope.$watch('main', function (d) {
                                    data.main = d;
                                    if (chart === undefined) {
                                        chart = new xChart(type, data, '#' + attrs.id, {});
                                    } else {
                                        chart.setData(data);
                                    }
                                });

                                scope.$watch('comp', function (d) {
                                    data.comp = d;
                                    if (chart === undefined) {
                                        chart = new xChart(type, data, '#' + attrs.id, {});
                                    } else {
                                        chart.setData(data);
                                    }
                                })
                            }
                        };
                    }]);

            ;
        </script>
    </head>
    <body ng-app="xchartExample">
        <div ng-controller="ctrl">
            <br/><br/>
            <div xchart
                 id="chart"
                 scale-x="ordinal"
                 scale-y="linear"
                 main="main"
                 height="200"
                 type="bar">
            </div>
        </div>
    </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>xCharts</title>
	<script src="/bower_components/angular/angular.min.js"></script>
	<script src="/bower_components/d3/d3.js"></script>
	<script src="/bower_components/bower-xcharts/xcharts.js"></script>

	<link href="/bower_components/bower-xcharts/xcharts.css" rel="stylesheet">

	<script type="text/javascript">
	angular.module("xchartExample", []).
	controller('ctrl', ['$scope', '$interval', function ($scope, $interval) {
	$scope.main = [
	{
	"className": ".pizza",
	"data": [
	{
	"x": "Pepperoni",
	"y": 4
	},
	{
	"x": "Creamy bacon",
	"y": 3
	},
	{
	"x": "Mixed grill",
	"y": 3
	},
	{
	"x": "Cheese",
	"y": 8
	},
	{
	"x": "Supreme",
	"y": 8
	}
	]
	},
	{
	"className": ".anotherPizza",
	"data": [
	{
	"x": "Pepperoni",
	"y": 4
	},
	{
	"x": "Creamy bacon",
	"y": 3
	},
	{
	"x": "Mixed grill",
	"y": 3
	},
	{
	"x": "Cheese",
	"y": 8
	},
	{
	"x": "Supreme",
	"y": 8
	}
	]
	}
	]

	// change values at interval 2 seconds
	$interval(function () {
	var main = angular.copy($scope.main);
	angular.forEach(main[0].data, function (d) {
	d.y = Math.floor((Math.random() * 30) + 1);
	});
	angular.forEach(main[1].data, function (d) {
	d.y = Math.floor((Math.random() * 30) + 1);
	});
	$scope.main = main;

	}, 2000)
	}]).
	directive('xchart', [ function () {
	return {
	restrict: 'EA',
	replace: true,
	scope: {
	main: "=",
	comp: "=",
	options: "="
	},
	template: '<div class="xchart" ng-style="style"></div>',
	link: function (scope, element, attrs) {
	var style = {};
	if (angular.isDefined(attrs.height)) {
	style.height = attrs.height + 'px';
	}
	if (angular.isDefined(attrs.width)) {
	style.width = attrs.width + 'px';
	}

	scope.style = style;

	// Override the default data settings
	var data = {
	xScale: angular.isDefined(attrs.scaleX) ? attrs.scaleX : 'ordinal',
	yScale: angular.isDefined(attrs.scaleY) ? attrs.scaleY : 'ordinal',
	main: [],
	comp: []
	};
	var type = angular.isDefined(attrs.type) ? attrs.type : 'line-dotted';

	var chart;
	scope.$watch('type', function (t) {
	if (chart === undefined) {
	chart = new xChart(type, data, '#' + attrs.id, {});
	} else {
	chart.setType(t)
	}
	});

	scope.$watch('main', function (d) {
	data.main = d;
	if (chart === undefined) {
	chart = new xChart(type, data, '#' + attrs.id, {});
	} else {
	chart.setData(data);
	}
	});

	scope.$watch('comp', function (d) {
	data.comp = d;
	if (chart === undefined) {
	chart = new xChart(type, data, '#' + attrs.id, {});
	} else {
	chart.setData(data);
	}
	})
	}
	};
	}]);

	;
	</script>
	</head>
	<body ng-app="xchartExample">
	<div ng-controller="ctrl">
	<br/><br/>
	<div xchart
	id="chart"
	scale-x="ordinal"
	scale-y="linear"
	main="main"
	height="200"
	type="bar">
	</div>
	</div>
	</body>
	</html>