Place graphic trend line

Asked

Viewed 58 times

1

I have a Graphic in my project and I needed to put a trend line, but I have no idea where the code goes for this 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");
        };

    }]);
}());

Another 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);
            }
        }
    }]);
}());

Good is what has related to the graph part in my project

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.