Skip to content

Commit

Permalink
Add watch for options
Browse files Browse the repository at this point in the history
  • Loading branch information
@syndesis
syndesis committed Sep 9, 2015
1 parent 073084a commit 0d6d6d5
Showing 1 changed file with 183 additions and 181 deletions.
364 changes: 183 additions & 181 deletions dist/amChartsDirective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,186 +19,188 @@ angular.module('amChartsDirective', []).directive('amChart', ['$q', function ($q
var chart;

// we can't render a chart without any data
if ($scope.options.data) {
var renderChart = function (amChartOptions) {
var o = amChartOptions || $scope.options;

// set height and width
var height = $scope.height || '100%';
var width = $scope.width || '100%';

$el.css({
'height': height,
'width': width
});

// instantiate new chart object
if (o.type === 'xy') {
chart = o.theme ? new AmCharts.AmXYChart(AmCharts.themes[o.theme]) : new AmCharts.AmXYChart();
} else if (o.type === 'pie') {
chart = o.theme ? new AmCharts.AmPieChart(AmCharts.themes[o.theme]) : new AmCharts.AmPieChart();
} else {
chart = o.theme ? new AmCharts.AmSerialChart(AmCharts.themes[o.theme]) : new AmCharts.AmSerialChart();
}

/** set some default values that amCharts doesnt provide **/
$q.when(o.data)
.then(function (data) {

chart.dataProvider = data;
// if a category field is not specified, attempt to use the first field from an object in the array
chart.categoryField = o.categoryField || Object.keys(o.data[0])[0];
chart.startDuration = 0.5; // default animation length, because everyone loves a little pizazz

// AutoMargin is on by default, but the default 20px all around seems to create unnecessary white space around the control
chart.autoMargins = true;
chart.marginTop = 0;
chart.marginLeft = 0;
chart.marginBottom = 0;
chart.marginRight = 0;

// modify default creditsPosition
chart.creditsPosition = 'top-right';

var chartKeys = Object.keys(o);
for (var i = 0; i < chartKeys.length; i++) {
if (typeof o[chartKeys[i]] !== 'object' && typeof o[chartKeys[i]] !== 'function') {
chart[chartKeys[i]] = o[chartKeys[i]];
}
}

function generateGraphProperties(data) {
// Assign Category Axis Properties
if (o.categoryAxis) {
var categoryAxis = chart.categoryAxis;

if (categoryAxis) {
/* if we need to create any default values, we should assign them here */
categoryAxis.parseDates = true;

var keys = Object.keys(o.categoryAxis);
for (var i = 0; i < keys.length; i++) {
if (!angular.isObject(o.categoryAxis[keys[i]]) || angular.isArray(o.categoryAxis[keys[i]])) {
categoryAxis[keys[i]] = o.categoryAxis[keys[i]];
} else {
console.log('Stripped categoryAxis obj ' + keys[i]);
}
}
chart.categoryAxis = categoryAxis;
}
}

// Create value axis

/* if we need to create any default values, we should assign them here */

var addValueAxis = function (a) {
var valueAxis = new AmCharts.ValueAxis();

var keys = Object.keys(a);
for (var i = 0; i < keys.length; i++) {
if (typeof a[keys[i]] !== 'object') {
valueAxis[keys[i]] = a[keys[i]];
}
}
chart.addValueAxis(valueAxis);
};

if (o.valueAxes && o.valueAxes.length > 0) {
for (var i = 0; i < o.valueAxes.length; i++) {
addValueAxis(o.valueAxes[i]);
}
}


//reusable function to create graph
var addGraph = function (g) {
var graph = new AmCharts.AmGraph();
/** set some default values that amCharts doesnt provide **/
// if a category field is not specified, attempt to use the second field from an object in the array as a default value
graph.valueField = g.valueField || Object.keys(o.data[0])[1];
graph.balloonText = '<span style="font-size:14px">[[category]]: <b>[[value]]</b></span>';
if (g) {
var keys = Object.keys(g);
// iterate over all of the properties in the graph object and apply them to the new AmGraph
for (var i = 0; i < keys.length; i++) {
graph[keys[i]] = g[keys[i]];
}
}
chart.addGraph(graph);
};

// create the graphs
if (o.graphs && o.graphs.length > 0) {
for (var i = 0; i < o.graphs.length; i++) {
addGraph(o.graphs[i]);
}
} else {
addGraph();
}

var chartCursor = new AmCharts.ChartCursor();
if (o.chartCursor) {
var keys = Object.keys(o.chartCursor);
for (var i = 0; i < keys.length; i++) {
if (typeof o.chartCursor[keys[i]] !== 'object') {
chartCursor[keys[i]] = o.chartCursor[keys[i]];
}
}
}
chart.addChartCursor(chartCursor);

if (o.chartScrollbar) {
var scrollbar = new AmCharts.ChartScrollbar();
var keys = Object.keys(o.chartScrollbar);
for (var i = 0; i < keys.length; i++) {
scrollbar[keys[i]] = o.chartScrollbar[keys[i]];
}
chart.chartScrollbar = scrollbar;
}

if (o.balloon) {
chart.balloon = o.balloon;
}
}

function generatePieProperties() {
if (o.balloon) {
chart.balloon = o.balloon;
}
}

if (o.legend) {
var legend = new AmCharts.AmLegend();
var keys = Object.keys(o.legend);
for (var i = 0; i < keys.length; i++) {
legend[keys[i]] = o.legend[keys[i]];
}
chart.legend = legend;
}

if (o.type === 'pie') {
generatePieProperties();
} else {
generateGraphProperties();
}

if (o.titles) {
for (var i = 0;i < o.titles.length;i++) {
var title = o.titles[i];
chart.addTitle(title.text, title.size, title.color, title.alpha, title.bold);
};
}

// WRITE
chart.write(id);

});
}; //renderchart


// Render the chart
renderChart();
$scope.$watchCollection('options', function() {
if ($scope.options && $scope.options.data) {
var renderChart = function (amChartOptions) {
var o = amChartOptions || $scope.options;

// set height and width
var height = $scope.height || '100%';
var width = $scope.width || '100%';

$el.css({
'height': height,
'width': width
});

// instantiate new chart object
if (o.type === 'xy') {
chart = o.theme ? new AmCharts.AmXYChart(AmCharts.themes[o.theme]) : new AmCharts.AmXYChart();
} else if (o.type === 'pie') {
chart = o.theme ? new AmCharts.AmPieChart(AmCharts.themes[o.theme]) : new AmCharts.AmPieChart();
} else {
chart = o.theme ? new AmCharts.AmSerialChart(AmCharts.themes[o.theme]) : new AmCharts.AmSerialChart();
}

/** set some default values that amCharts doesnt provide **/
$q.when(o.data)
.then(function (data) {

chart.dataProvider = data;
// if a category field is not specified, attempt to use the first field from an object in the array
chart.categoryField = o.categoryField || Object.keys(o.data[0])[0];
chart.startDuration = 0.5; // default animation length, because everyone loves a little pizazz

// AutoMargin is on by default, but the default 20px all around seems to create unnecessary white space around the control
chart.autoMargins = true;
chart.marginTop = 0;
chart.marginLeft = 0;
chart.marginBottom = 0;
chart.marginRight = 0;

// modify default creditsPosition
chart.creditsPosition = 'top-right';

var chartKeys = Object.keys(o);
for (var i = 0; i < chartKeys.length; i++) {
if (typeof o[chartKeys[i]] !== 'object' && typeof o[chartKeys[i]] !== 'function') {
chart[chartKeys[i]] = o[chartKeys[i]];
}
}

function generateGraphProperties(data) {
// Assign Category Axis Properties
if (o.categoryAxis) {
var categoryAxis = chart.categoryAxis;

if (categoryAxis) {
/* if we need to create any default values, we should assign them here */
categoryAxis.parseDates = true;

var keys = Object.keys(o.categoryAxis);
for (var i = 0; i < keys.length; i++) {
if (!angular.isObject(o.categoryAxis[keys[i]]) || angular.isArray(o.categoryAxis[keys[i]])) {
categoryAxis[keys[i]] = o.categoryAxis[keys[i]];
} else {
console.log('Stripped categoryAxis obj ' + keys[i]);
}
}
chart.categoryAxis = categoryAxis;
}
}

// Create value axis

/* if we need to create any default values, we should assign them here */

var addValueAxis = function (a) {
var valueAxis = new AmCharts.ValueAxis();

var keys = Object.keys(a);
for (var i = 0; i < keys.length; i++) {
if (typeof a[keys[i]] !== 'object') {
valueAxis[keys[i]] = a[keys[i]];
}
}
chart.addValueAxis(valueAxis);
};

if (o.valueAxes && o.valueAxes.length > 0) {
for (var i = 0; i < o.valueAxes.length; i++) {
addValueAxis(o.valueAxes[i]);
}
}


//reusable function to create graph
var addGraph = function (g) {
var graph = new AmCharts.AmGraph();
/** set some default values that amCharts doesnt provide **/
// if a category field is not specified, attempt to use the second field from an object in the array as a default value
graph.valueField = g.valueField || Object.keys(o.data[0])[1];
graph.balloonText = '<span style="font-size:14px">[[category]]: <b>[[value]]</b></span>';
if (g) {
var keys = Object.keys(g);
// iterate over all of the properties in the graph object and apply them to the new AmGraph
for (var i = 0; i < keys.length; i++) {
graph[keys[i]] = g[keys[i]];
}
}
chart.addGraph(graph);
};

// create the graphs
if (o.graphs && o.graphs.length > 0) {
for (var i = 0; i < o.graphs.length; i++) {
addGraph(o.graphs[i]);
}
} else {
addGraph();
}

var chartCursor = new AmCharts.ChartCursor();
if (o.chartCursor) {
var keys = Object.keys(o.chartCursor);
for (var i = 0; i < keys.length; i++) {
if (typeof o.chartCursor[keys[i]] !== 'object') {
chartCursor[keys[i]] = o.chartCursor[keys[i]];
}
}
}
chart.addChartCursor(chartCursor);

if (o.chartScrollbar) {
var scrollbar = new AmCharts.ChartScrollbar();
var keys = Object.keys(o.chartScrollbar);
for (var i = 0; i < keys.length; i++) {
scrollbar[keys[i]] = o.chartScrollbar[keys[i]];
}
chart.chartScrollbar = scrollbar;
}

if (o.balloon) {
chart.balloon = o.balloon;
}
}

function generatePieProperties() {
if (o.balloon) {
chart.balloon = o.balloon;
}
}

if (o.legend) {
var legend = new AmCharts.AmLegend();
var keys = Object.keys(o.legend);
for (var i = 0; i < keys.length; i++) {
legend[keys[i]] = o.legend[keys[i]];
}
chart.legend = legend;
}

if (o.type === 'pie') {
generatePieProperties();
} else {
generateGraphProperties();
}

if (o.titles) {
for (var i = 0;i < o.titles.length;i++) {
var title = o.titles[i];
chart.addTitle(title.text, title.size, title.color, title.alpha, title.bold);
};
}

// WRITE
chart.write(id);

});
}; //renderchart


// Render the chart
renderChart();
}


// EVENTS =========================================================================
Expand Down Expand Up @@ -229,7 +231,7 @@ angular.module('amChartsDirective', []).directive('amChart', ['$q', function ($q
renderChart(amChartOptions);
}
});
}
});
}
};
}]);

0 comments on commit 0d6d6d5

Please sign in to comment.