I have a graphic in my project and I needed to put a trend line, but I do not have the slightest idea where the code goes for it or how to do it:
(function () {
angular.module("registrationModule").controller("indicatorGraphFilterController", ["$scope", "$filter", "dateService", "indicatorGraphService", function ($scope, $filter, dateService, indicatorGraphService) {
$scope.indicators = Indicators;
$scope.getCurrentGoal = function (indicator) {
var currentGoal = null;
if (indicator != null) {
if (indicator.indicatorGoals.length > 0) {
var goalsSorted = $filter("orderBy")(indicator.indicatorGoals, '-startGoal');
if (goalsSorted != null) currentGoal = goalsSorted[0];
}
}
return currentGoal;
};
$scope.filterType = 0;
$scope.createGraphWithDetails = function (indicator, id) {
var startCollect = new Date(indicator.startCollect).removeTimeZone();
var endCollect = indicator.endCollect != null ? new Date(indicator.endCollect).removeTimeZone() : new Date();
indicatorGraphService.drawChartLine(id, indicator, startCollect, endCollect, "", "none", indicator.measureUnit, "Mês");
};
$scope.createGraph = function (indicator, id) {
var startCollect = new Date(indicator.startCollect).removeTimeZone();
var endCollect = indicator.endCollect != null ? new Date(indicator.endCollect).removeTimeZone() : new Date();
indicatorGraphService.drawChartLine(id, indicator, startCollect, endCollect, indicator.name, "none", indicator.measureUnit, "Mês");
};
}]);
}());
Other part:
(function () {
angular.module("registrationModule").controller("IndicatorGraphViewController",
['$scope', '$filter', '$compile', 'dateService', 'indicatorRepository', 'queryStringService',
function ($scope, $filter, $compile, dateService, indicatorRepos, qsService) {
$scope.mainDataArray = [];
var dataTable = null;
var goals = [];
var interval = {};
var ticks = [];
var measureUnit = "cm";
$scope.fromYears = [];
$scope.untilYears = [];
$scope.chartSelection = {};
var includes = [
"IndicatorGoals",
"IndicatorEntriesCollect"
];
$scope.yearchange = function (year, years) {
years.length = 0;
yearsGenerate(years, year, 9);
}
$scope.search = function () {
var startDate = new Date($scope.fromYear, $scope.fromMonth, 1);
var endDate = new Date($scope.untilYear, $scope.untilMonth + 1, -1);
var entriesFiltrated = $.grep($scope.indicator.indicatorEntriesCollect, function (v) {
return new Date(v.collectDate) >= startDate && new Date(v.collectDate) <= endDate;
});
var entries = getEntriesByDate(entriesFiltrated, $scope.indicator.indicatorGoals, startDate, endDate);
$scope.generateData(entries);
};
indicatorRepos.get(qsService.get('indicatorid'), includes).then(function (indicator) {
$scope.indicator = indicator;
var startCollect = new Date($scope.indicator.startCollect);
var endCollect = $scope.indicator.endCollect != null ? new Date($scope.indicator.endCollect) : new Date();
$scope.fromMonth = startCollect.getMonth();
$scope.fromYear = startCollect.getFullYear();
$scope.fromYears = dateService.yearsGenerate(startCollect.getFullYear(), 9);
$scope.untilMonth = endCollect.getMonth();
$scope.untilYear = endCollect.getFullYear();
$scope.untilYears = dateService.yearsGenerate(endCollect.getFullYear(), 9);
$scope.search();
//var entries = getEntriesByDate($scope.indicator.indicatorEntriesCollect, $scope.indicator.indicatorGoals, new Date(2015, 0, 1), new Date(2017, 2, 30));
//$scope.generateData(entries);
});
var getEntriesByDate = function (indicatorEntries, goals, sDate, eDate) {
sDate = new Date(sDate);
var entries = [];
ticks.length = 0;
indicatorEntries = $filter('orderBy')(indicatorEntries, '+collectDate');
angular.forEach(indicatorEntries, function (entry) {
var collectDate = new Date(entry.collectDate);
var ticksDate = new Date(collectDate.getFullYear(), collectDate.getMonth(), 1);
if (ticks.length == 0)
ticks.push(ticksDate);
else {
var diffDates = $.grep(ticks, function (v) {
var auxTickDate = $filter('date')(ticksDate, 'MM/yyyy');
var auxV = $filter('date')(v, 'MM/yyyy');
return auxTickDate != auxV;
});
if (diffDates.length > 0)
ticks.push(ticksDate);
}
if (between(collectDate, sDate, eDate)) {
var goalRef = $.grep(goals, function (goal) {
return between(entry.collectDate, goal.startGoal, goal.endGoal);
});
if (goalRef.length > 0) {
entries.push({ entry: entry, goal: goalRef[0], });
} else {
entries.push({ entry: entry, goal: null });
}
}
});
return entries;
};
var between = function (date, sDate, eDate) {
if (sDate == null)
return date <= eDate;
else if (eDate == null)
return date >= sDate;
else if (sDate != null && eDate != null)
return date >= sDate && date <= eDate;
}
var createCustomHTMLContent = function (v, g) {
var goal = "----";
if (g != null)
switch (g.goalType) {
case 1: goal = "acima de " + g.above; break;
case 2: goal = "abaixo de " + g.below; break;
case 3: goal = "entre de " + g.above + " e " + g.below; break;
}
return '<div>' +
'<br />' +
'<span>Valor: ' + v.value + ' </span>' +
'<br />' +
'<br />' +
'<span>Meta: ' + goal + ' </span>' +
'<br />' +
'</div>';
};
$scope.generateData = function (entries) {
$scope.mainDataArray = [];
var values = [];
angular.forEach(entries, function (v) {
if (v.entry.value != null) values.push(v.entry.value);
if (v.goal != null) {
if (v.goal.below != null) values.push(v.goal.below);
if (v.goal.above != null) values.push(v.goal.above)
}
});
var maxValue = $filter('orderBy')(values, '-')[0];
var minValue = $filter('orderBy')(values, '+')[0];
minValue = minValue > 0 ? 0 : minValue;
angular.forEach(entries, function (v, i) {
var data = [new Date(v.entry.collectDate), v.entry.value];
if (v.goal == null) {
data.push('point { fill-color:#00FF00', createCustomHTMLContent(v.entry, v.goal), null, null);
}
else {
switch (v.goal.goalType) {
case 1: {
var color = "";
color = v.entry.value >= v.goal.above ? "#00FF00" : "#a52714";
data.push('point { fill-color: ' + color, createCustomHTMLContent(v.entry, v.goal), v.goal.above, maxValue);
}; break;
case 2: {
var color = "";
color = v.entry.value <= v.goal.below ? "#00FF00" : "#a52714";
data.push('point { fill-color: ' + color, createCustomHTMLContent(v.entry, v.goal), minValue, v.goal.below);
}; break;
case 3: {
var color = "";
color = v.entry.value >= v.goal.above && v.entry.value <= v.goal.below ? "#00FF00" : "#a52714";
data.push('point { fill-color: ' + color, createCustomHTMLContent(v.entry, v.goal), v.goal.above, v.goal.below);
}; break;
default: {
data.push('point { fill-color:#00FF00', createCustomHTMLContent(v.entry, v.goal), null, null);
}; break;
}
}
$scope.mainDataArray.push(data);
});
drawChartLine($scope.mainDataArray, 'chart_div_0', $scope.indicator.measureUnit, 'Mês');
}
function FindGoalByDate(date, goals) {
date = new Date(date);
var index = 0;
var goalFind = $.grep(goals, function (v, i) {
var startDate = new Date(v.startGoal);
if (v.endGoal == null) {
if (date > startDate) {
index = i;
}
return date >= startDate;
} else {
var endDate = new Date(v.endGoal);
if (date >= startDate && date <= endDate) {
index = i;
}
return date >= startDate && date <= endDate;
}
});
return { goal: goalFind[0], index: index };
};
$scope.chartTypes = [
{ id: 'bars', name: 'Barras' },
{ id: 'line', name: 'Linha' },
{ id: 'pie', name: 'Pizza' }
];
$scope.selectedData = null;
$scope.months = dateService.months;
$scope.chekMonthExist = function (data, comparer) {
return $.grep(data, function (value) {
return value[0] == comparer;
}).length > 0;
};
$scope.getAvailableMonths = function (data) {
var yearBase = parseInt($scope.indicator.startYear);
var monthBase = parseInt($scope.indicator.startMonth, 10) - 1;
var availableMonths = [];
for (var i = 0; i < 12; i++) {
monthBase = monthBase + 1;
if (monthBase > 12) {
monthBase = 1;
yearBase += 1;
}
var monthYear = (monthBase < 10 ? "0" + monthBase : monthBase) + "/" + yearBase;
if (!$scope.chekMonthExist(data, monthYear))
availableMonths.push(monthYear);
}
return availableMonths;
};
$scope.chartTypeChange = function (data, elementID, chartType) {
switch (chartType) {
case 'bars': drawChartBars(data, elementID, $scope.indicator.measureUnit, 'Mês'); break;
case 'line': drawChartLine(data, elementID, $scope.indicator.measureUnit, 'Mês'); break;
case 'pie': drawChartPie(data, elementID); break;
}
};
var drawChartPie = function (data, elementID) {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn("string", 'Mês');
dataTable.addColumn("number", $scope.indicator.measureUnit);
dataTable.addRows(data);
var options = {
};
var chart = new google.visualization.PieChart(document.getElementById(elementID));
google.visualization.events.addListener(chart, 'select', function (e) {
$scope.chartSelection = chart;
});
chart.draw(dataTable, options);
}
var drawChartLine = function (data, elementID, vAixsTitle, hAixsTitle) {
dataTable = new google.visualization.DataTable();
dataTable.addColumn("date", 'Mês');
dataTable.addColumn("number", $scope.indicator.name);
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
dataTable.addColumn({ id: 'i0', type: 'number', role: 'interval' });
dataTable.addColumn({ id: 'i1', type: 'number', role: 'interval' });
dataTable.addRows(data);
var options = {
title: 'Variação dos Indicadores',
vAxis: {
title: vAixsTitle
},
hAxis: {
title: hAixsTitle,
ticks: ticks,
textStyle: { 'text-align': 'center' },
format: 'MMM/yyyy'
},
focusTarget: 'category',
intervals: { style: 'area' },
tooltip: { isHtml: true },
pointSize: 7
}
var chart = new google.visualization.LineChart(document.getElementById(elementID));
google.visualization.events.addListener(chart, 'select', function (e) {
$scope.chartSelection = chart;
});
chart.draw(dataTable, options);
}
var drawChartBars = function (data, elementID, vAixsTitle, hAixsTitle) {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn("string", 'Mês');
dataTable.addColumn("number", $scope.indicator.measureUnit);
dataTable.addRows(data);
var options = {
// //title: 'Monthly Coffee Production by Country',
vAxis: { title: vAixsTitle },
hAxis: { title: hAixsTitle },
seriesType: 'bars'
}
// series: { 1: { type: "line" } }
var chart = new google.visualization.ComboChart(document.getElementById(elementID));
google.visualization.events.addListener(chart, 'select', function (e) {
$scope.chartSelection = chart;
});
chart.draw(dataTable, options);
}
var addRowGraph = function (data, elementIDChart, chartType, month, value) {
data.push([month, parseInt(value, 10)]);
data = data.sort();
$scope.chartTypeChange(data, elementIDChart, chartType);
//drawChart(data, 'chart_div_main', $scope.indicator.measureUnit, 'Mês');
};
}]);
}());
.....
(function () {
angular.module("registrationModule").factory("indicatorGraphService", ["$filter","dateService", function ($filter, dateService) {
var getEntriesByDate = function (indicator, sDate, eDate, ticks) {
var entries = indicator.indicatorEntriesCollect;
var goals = indicator.indicatorGoals;
sDate = new Date(sDate);
var auxEntries = [];
ticks.length = 0;
entries = $filter('orderBy')(entries, '+collectDate');
angular.forEach(entries, function (entry) {
var collectDate = new Date(entry.collectDate).removeTimeZone();
if (ticks.length == 0) {
var ticksDate = new Date(collectDate.getFullYear(), collectDate.getMonth(), collectDate.getDate());
ticks.push(ticksDate);
}
else {
var ticksDate = new Date(collectDate.getFullYear(), collectDate.getMonth(), 1);
var diffDates = $.grep(ticks, function (v) {
var auxTickDate = $filter('date')(ticksDate, 'MM/yyyy');
var auxV = $filter('date')(v, 'MM/yyyy');
return auxTickDate != auxV;
});
if (diffDates.length > 0)
ticks.push(ticksDate);
}
if (dateService.between(collectDate, sDate, eDate)) {
var goalRef = $.grep(goals, function (goal) {
return dateService.between(entry.collectDate, goal.startGoal, goal.endGoal);
});
if (goalRef.length > 0) {
auxEntries.push({ entry: entry, goal: goalRef[0], });
} else {
auxEntries.push({ entry: entry, goal: null });
}
}
});
return auxEntries;
};
var generateDataArray = function (entries, funcHtmlContent) {
var dataArray = [];
var values = [];
angular.forEach(entries, function (v) {
if (v.entry.value != null) values.push(v.entry.value);
if (v.goal != null) {
if (v.goal.below != null) values.push(v.goal.below);
if (v.goal.above != null) values.push(v.goal.above)
}
});
var maxValue = $filter('orderBy')(values, '-')[0];
var minValue = $filter('orderBy')(values, '+')[0];
minValue = minValue > 0 ? 0 : minValue;
angular.forEach(entries, function (v, i) {
var data = [new Date(v.entry.collectDate).removeTimeZone(), v.entry.value];
if (v.goal == null) {
data.push('point { fill-color:#00FF00', funcHtmlContent(v.entry, v.goal), null, null);
}
else {
switch (v.goal.goalType) {
case 1: {
var color = "";
color = v.entry.value >= v.goal.above ? "#00FF00" : "#a52714";
data.push('point { fill-color: ' + color, funcHtmlContent(v.entry, v.goal), v.goal.above, maxValue);
}; break;
case 2: {
var color = "";
color = v.entry.value <= v.goal.below ? "#00FF00" : "#a52714";
data.push('point { fill-color: ' + color, funcHtmlContent(v.entry, v.goal), minValue, v.goal.below);
}; break;
case 3: {
var color = "";
color = v.entry.value >= v.goal.above && v.entry.value <= v.goal.below ? "#00FF00" : "#a52714";
data.push('point { fill-color: ' + color, funcHtmlContent(v.entry, v.goal), v.goal.above, v.goal.below);
}; break;
default: {
data.push('point { fill-color:#00FF00', funcHtmlContent(v.entry, v.goal), null, null);
}; break;
}
}
dataArray.push(data);
});
return dataArray;
};
var createCustomHTMLContent = function (v, g) {
var goal = "----";
if (g != null)
switch (g.goalType) {
case 1: goal = "acima de " + g.above; break;
case 2: goal = "abaixo de " + g.below; break;
case 3: goal = "entre de " + g.above + " e " + g.below; break;
}
return '<div>' +
'<br />' +
'<span>Valor: ' + v.value + ' </span>' +
'<br />' +
'<br />' +
'<span>Meta: ' + goal + ' </span>' +
'<br />' +
'</div>';
};
return {
drawChartLine: function (elementID, indicator, sDate, eDate, title, positionLegend, vAixsTitle, hAixsTitle) {
var ticks = [];
var dataEntries = getEntriesByDate(indicator, sDate, eDate, ticks);
var dataArray = generateDataArray(dataEntries, createCustomHTMLContent);
dataTable = new google.visualization.DataTable();
dataTable.addColumn("date", hAixsTitle);
dataTable.addColumn("number", vAixsTitle);
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
dataTable.addColumn({ id: 'i0', type: 'number', role: 'interval' });
dataTable.addColumn({ id: 'i1', type: 'number', role: 'interval' });
dataTable.addRows(dataArray);
var options = {
title: title,
legend: { position: positionLegend },
vAxis: {
title: vAixsTitle
},
hAxis: {
title: hAixsTitle,
ticks: ticks,
textStyle: { 'text-align': 'center' },
format: 'MMM/yyyy'
},
focusTarget: 'category',
intervals: { style: 'area' },
tooltip: { isHtml: true },
pointSize: 7
}
var chart = new google.visualization.LineChart(document.getElementById(elementID));
chart.draw(dataTable, options);
}
}
}]);
}());
Well this is what has related the part of the graph in my project