jqx tree and jqx-chart with nested ng-repeat
Creating nested ng-repeat
HTML
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/angular.min.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtree.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxangular.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxchart.js"></script>
<div ng-app="App" ng-controller="myController">
<div class="row-fluid">
<div class="col-md-12">JQWidgets Column Chart Example
<jqx-chart jqx-settings="jqColChartSettings"
style="width: 850px; height: 500px;">
</jqx-chart>
</div>
</div>
</div>
JavaScript
angular.module('App', ['jqwidgets'])
.controller('myController', function ($scope) {
var myData = [
{ Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
{ Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
{ Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
{ Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
{ Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
{ Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
{ Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];
var myModel = {
datatype: "json",
datafields: [
{ name: 'Day'},
{ name: 'Keith' },
{ name: 'Erica' },
{ name: 'George' }
]
};
myModel["localData"] = myData;
var dataAdapter = new $.jqx.dataAdapter(myModel);
$scope.jqColChartSettings = {
title: "Fitness & exercise weekly scorecard",
description: "Time spent in vigorous exercise",
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter, // myData,
xAxis:
{
dataField: 'Day',
showGridLines: true
},
colorScheme: 'scheme01',
seriesGroups:
[
{
type: 'column',
columnsGapPercent: 50,
seriesGapPercent: 0,
valueAxis:
{
...