inclusion of time series graph

workflow/engine/classes/class.indicatorsCalculator.php

@@ -68,6 +68,12 @@ abstract class IndicatorDataSourcesEnum extends BasicEnum {
 	const USER_GROUP = 300;
 }
 
+abstract class ReportingIndicatorTypeEnum extends BasicEnum {
+	const PEI = 1010;
+	const UEI = 1030;
+	const INBOX_STATUS = 1050;
+}
+
 class indicatorsCalculator
 {
 	private $userReportingMetadata = array("tableName" => "USR_REPORTING", "keyField" => "PRO_UID");
@@ -114,7 +120,7 @@ class indicatorsCalculator
 		$qryParams = Array();
 		$sqlString = $this->indicatorsParamsQueryBuilder(IndicatorDataSourcesEnum::USER
 			, $processId, $periodicity, $initDate, $endDate
-			, $this->peiFormula, $qryParams);
+			, $this->peiFormula." As VALUE", $qryParams);
 
 		//$returnValue = $this->propelExecutor($sqlString);
 
@@ -301,7 +307,7 @@ class indicatorsCalculator
 		$qryParams = Array();
 		$sqlString = $this->indicatorsParamsQueryBuilder(IndicatorDataSourcesEnum::USER
 			, $employeeId, $periodicity, $initDate, $endDate
-			, $this->ueiFormula, $qryParams);
+			, $this->ueiFormula." as VALUE", $qryParams);
 
 		$retval = $this->pdoExecutor($sqlString, $qryParams);
 		//$returnValue = $this->propelExecutor($sqlString);
@@ -374,6 +380,7 @@ class indicatorsCalculator
 		return $retval;
 	}
 
+	//TODO: delte this function that is used nowhere
 	public function generalIndicatorData($indicatorId, $initDate, $endDate, $periodicity) {
 		if (!is_a($initDate, 'DateTime')) throw new InvalidArgumentException ('initDate parameter must be a DateTime object.', 0);
 		if (!is_a($endDate, 'DateTime')) throw new InvalidArgumentException ('endDate parameter must be a DateTime object.', 0);
@@ -665,35 +672,6 @@ class indicatorsCalculator
 		return $result;
 	}
 
-	/*private function indicatorsBasicQueryBuilder($reportingTable, $filterId, $periodicity, $initDate, $endDate, $fields ) {
-		if (!is_a($initDate, 'DateTime')) throw new InvalidArgumentException ('initDate parameter must be a DateTime object.', 0);
-		if (!is_a($endDate, 'DateTime')) throw new InvalidArgumentException ('endDate parameter must be a DateTime object.', 0);
-
-		$tableMetadata = $this->metadataForTable($reportingTable);
-		$periodicitySelectFields = $this->periodicityFieldsForSelect($periodicity);
-		$periodicityGroup = $this->periodicityFieldsForGrouping($periodicity);
-		$initYear = $initDate->format("Y");
-		$initMonth = $initDate->format("m");
-		$endYear = $endDate->format("Y");
-		$endMonth = $endDate->format("m");
-
-		$filterCondition = "";
-		if ($filterId != null && $filterId > 0) {
-			$filterCondition = " AND ".$tableMetadata["keyField"]." = '$filterId'";
-		}
-
-		$sqlString = "SELECT $periodicitySelectFields $fields
-						FROM  ".$tableMetadata["tableName"].
-					" WHERE
-						IF (`YEAR` = $initYear, `MONTH`, `YEAR`) >= IF (`YEAR` = $initYear, $initMonth, $initYear)
-						AND
-						IF(`YEAR` = $endYear, `MONTH`, `YEAR`) <= IF (`YEAR` = $endYear, $endMonth, $endYear)"
-			. $filterCondition
-			. $periodicityGroup;
-		return $sqlString;
-	}*/
-
-
 	private function indicatorsParamsQueryBuilder($reportingTable, $filterId, $periodicity, $initDate, $endDate, $fields, &$params) {
 		if (!is_a($initDate, 'DateTime')) throw new InvalidArgumentException ('initDate parameter must be a DateTime object.', 0);
 		if (!is_a($endDate, 'DateTime')) throw new InvalidArgumentException ('endDate parameter must be a DateTime object.', 0);

workflow/engine/js/strategicDashboard/timeSeriesModel.js

@@ -0,0 +1,113 @@
+var TimeSeriesModel = function (oauthToken, server, workspace, userId, dashboardId) {
+    this.server = server;
+    this.workspace = workspace;
+    this.baseUrl = "/api/1.0/" + workspace + "/";
+    this.oauthToken = oauthToken;
+	this.helper = new ViewDashboardHelper();
+	this.cache = {};
+	this.forceRemote=false; //if true, the next call will go to the remote server
+	this.userId = userId;
+	this.dashboardId = dashboardId;
+
+};
+
+
+TimeSeriesModel.prototype.indicatorList = function(dashboardId,initDate, endDate) {
+	var dummyDate = ''
+    return this.getJson('dashboard/' + dashboardId + '/indicator?dateIni=' + initDate + '&dateFin=' + endDate);
+};
+
+
+/*TimeSeriesModel.prototype.indicatorList = function() {
+	var requestFinished = $.Deferred();
+	var json = [ {"label":"PEI", "value":"1111"}, 
+				 {"label":"EEI", "value":"2222"}
+				];
+	requestFinished.resolve(json);
+	return requestFinished.promise();
+};*/
+
+TimeSeriesModel.prototype.periodicityList = function() {
+	var that = this;
+	var json = [{label:"Monthly", value:that.helper.ReportingPeriodicityEnum.MONTH},
+					{label:"Quaterly", value:that.helper.ReportingPeriodicityEnum.QUARTER},
+					{label:"Semester", value:that.helper.ReportingPeriodicityEnum.SEMESTER},
+					{label:"Yearly", value:that.helper.ReportingPeriodicityEnum.YEAR}
+				 ];
+	return json;
+};
+
+TimeSeriesModel.prototype.monthList = function() {
+	var json = [{label:"Jan", value:"1"}, 
+								{label:"Feb", value:"2"}, 
+								{label:"Mar", value:"3"}, 
+								{label:"Apr", value:"4"},
+								{label:"May", value:"5"},
+								{label:"Jun", value:"6"},
+								{label:"Jul", value:"7"}
+								 ];
+	return json;
+};
+
+TimeSeriesModel.prototype.quarterList = function() {
+	var json = [{label:"1", value:"1"}, 
+				{label:"2", value:"2"}, 
+				{label:"3", value:"3"}, 
+				{label:"4", value:"4"}];
+	return json;
+};
+
+TimeSeriesModel.prototype.semesterList = function() {
+	var json = [{label:"1", value:"1"}, {label:"2", value:"2"}];
+	return json;
+};
+
+TimeSeriesModel.prototype.yearList = function() {
+	var json = [{label:"2015", value:"2015"}, {label:"2014", value:"2014"}];
+	return json;
+};
+
+TimeSeriesModel.prototype.defaultInitDate = function() {
+	return new Date(new Date().getFullYear(), 0, 1);
+};
+
+TimeSeriesModel.prototype.defaultEndDate = function() {
+	return new Date();
+};
+
+TimeSeriesModel.prototype.historicData = function(indicatorId, periodicity, initDate, endDate) {
+	var endPoint = "ReportingIndicators/indicator-historic-data?" +
+				"indicator_uid=" + indicatorId + 
+				"&init_date=" + this.helper.date2MysqlString(initDate) +
+				"&end_date=" + this.helper.date2MysqlString(endDate) + 
+				"&periodicity=" + periodicity + 
+				"&language=en";
+    return this.getJson(endPoint);
+
+};
+
+TimeSeriesModel.prototype.getJson = function (endPoint) {
+    var that = this;
+    var callUrl = this.baseUrl + endPoint
+	var requestFinished = $.Deferred();
+
+	return $.ajax({
+		url: callUrl,
+		type: 'GET',
+		datatype: 'json',
+		success: function (data) {
+			that.forceRemote = false;
+			requestFinished.resolve(data);
+		},
+		error: function(jqXHR, textStatus, errorThrown) {
+							throw new Error(callUrl + ' --  ' + errorThrown);
+						},
+		beforeSend: function (xhr) {
+						xhr.setRequestHeader('Authorization', 'Bearer ' + that.oauthToken);
+						//xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
+					}
+	});
+}
+
+
+

workflow/engine/js/strategicDashboard/timeSeriesPresenter.js

@@ -0,0 +1,215 @@
+var TimeSeriesPresenter = function (model) {
+	var that = this;
+	this.helper = new ViewDashboardHelper();
+    this.model = model;
+};
+
+TimeSeriesPresenter.prototype.initializePresenter = function () {
+	var that = this;
+	var requestFinished = $.Deferred();
+	$.when (this.fillIndicatorList())
+		.done(function () {
+			that.periodicityState = {selValue: that.model.periodicityList()[0], list: that.model.periodicityList()}
+
+			that.initPeriodState = {selValue:that.model.monthList()[0].value, 
+									list:that.model.monthList(),
+									visible:true };
+
+			that.initYearState = {selValue : that.model.yearList() [0].value,
+									list : that.model.yearList()};
+
+			that.endPeriodState = {selValue : that.model.defaultEndDate().getMonth() + 1, 
+									list : that.model.monthList(),
+									visible:true };
+
+			that.endYearState = { selValue : that.model.yearList() [0].value,
+								list : that.model.yearList()};
+
+			that.initDate = that.model.defaultInitDate();
+			that.endDate = that.model.defaultEndDate();
+
+			requestFinished.resolve(true);
+	});
+	return requestFinished.promise();
+};
+
+TimeSeriesPresenter.prototype.fillIndicatorList = function () {
+	var requestFinished = $.Deferred();
+	var that = this;
+	var dummyDate = this.helper.date2MysqlString(new Date());
+	that.indicatorList(that.model.dashboardId, dummyDate, dummyDate)
+		.done(function(modelData){
+			if (modelData== null || modelData.length == 0) {
+				that.indicatorState = {selValue: null, list: []}
+			}
+			else {
+				that.indicatorState = {selValue: modelData[0].value, list: modelData}
+			}
+			requestFinished.resolve(that.indicatorState);
+	});
+	return requestFinished.promise();
+};
+
+TimeSeriesPresenter.prototype.indicatorList = function (dashboardId) {
+	var that = this;
+	var requestFinished = $.Deferred();
+	var dummyDate = this.helper.date2MysqlString(new Date());
+	this.model.indicatorList(dashboardId, dummyDate, dummyDate).done(function (data) {
+		var newArray = [];
+		$.each(data, function(index, originalObject) {
+			var newObject = {label: originalObject.DAS_IND_TITLE,
+							 value: originalObject.DAS_IND_UID
+							}
+			newArray.push(newObject);
+		});
+
+		requestFinished.resolve(newArray);
+	});
+	return requestFinished.promise();
+};
+
+TimeSeriesPresenter.prototype.changePeriodicity = function (periodicity) {
+	var that = this;
+	var retval = this.monthList;
+
+	switch (periodicity * 1) {
+		case this.helper.ReportingPeriodicityEnum.MONTH:
+			this.changePeriodicityToQuarter(this.model.monthList());
+			break;
+		case this.helper.ReportingPeriodicityEnum.QUARTER:
+			this.changePeriodicityToQuarter(this.model.quarterList());
+			break;
+		case this.helper.ReportingPeriodicityEnum.SEMESTER:
+			this.changePeriodicityToSemester(this.model.semesterList());
+			break;
+		case this.helper.ReportingPeriodicityEnum.YEAR:
+			this.changePeriodicityToYear(this.model.yearList());
+			break;
+		default:
+			break;
+	}
+	return this;
+}
+
+TimeSeriesPresenter.prototype.changePeriodicityToMonth = function (monthList) {
+	this.initPeriodState.list = monthList;
+	this.endPeriodState.list = monthList;
+	this.initPeriodState.visible = true;
+	this.endPeriodState.visible = true;
+}
+
+TimeSeriesPresenter.prototype.changePeriodicityToQuarter = function (quarterList) {
+	this.initPeriodState.list = quarterList;
+	this.endPeriodState.list = quarterList;
+	this.initPeriodState.visible = true;
+	this.endPeriodState.visible = true;
+}
+
+TimeSeriesPresenter.prototype.changePeriodicityToSemester = function (semesterList) {
+	this.initPeriodState.list = semesterList;
+	this.endPeriodState.list = semesterList;
+	this.initPeriodState.visible = true;
+	this.endPeriodState.visible = true;
+}
+
+TimeSeriesPresenter.prototype.changePeriodicityToYear = function (yearList) {
+	this.initPeriodState.list = [];
+	this.endPeriodState.list = [];
+	this.initPeriodState.visible = false;
+	this.endPeriodState.visible = false;
+}
+
+TimeSeriesPresenter.prototype.historicData = function (indicator, periodicity, initPeriod, 
+								initYear, endPeriod, endYear) {
+	var that = this;
+	var requestFinished = $.Deferred();
+	var initDate = this.periodInitDate(periodicity, initPeriod, initYear);
+	var endDate = this.periodEndDate(periodicity, endPeriod, endYear);
+	this.model.historicData(indicator, periodicity, initDate, endDate).done(function (data) {
+		var graphData = [];
+		$.each(data, function(index, originalObject) {
+			var newObject = {datalabel: that.periodValue(periodicity, originalObject) + '/' + originalObject['YEAR'],
+							 value: originalObject.VALUE
+							}
+			graphData.push(newObject);
+		});
+
+		requestFinished.resolve(graphData);
+	});
+	return requestFinished.promise();
+}
+
+
+TimeSeriesPresenter.prototype.periodValue = function (periodicity, object) {
+	var retval = "";
+	switch (periodicity*1) {
+		case this.helper.ReportingPeriodicityEnum.MONTH:
+			retval = object.MONTH;
+			break;
+		case this.helper.ReportingPeriodicityEnum.QUARTER:
+			retval = object.QUARTER;
+			break;
+		case this.helper.ReportingPeriodicityEnum.SEMESTER:
+			retval = object.SEMESTER;
+			break;
+		case this.helper.ReportingPeriodicityEnum.YEAR:
+			retval = object.YEAR;
+			break;
+	}
+	if (retval == "") {
+		throw new Error("The periodicity " + periodicity + " is not supported.");
+	}
+	return retval;
+}
+
+TimeSeriesPresenter.prototype.periodInitDate = function (periodicity, period, year) {
+	var retval = null;
+	switch (periodicity * 1) {
+		case this.helper.ReportingPeriodicityEnum.MONTH:
+			//retval = '01-' + period + '-' + year; 
+			retval = new Date(year, period - 1, 1);
+			break;
+		case this.helper.ReportingPeriodicityEnum.QUARTER:
+			//retval = '01-' + (3*(period-1) + 1) + '-' + year; 
+			retval = new Date(year, 3 * (period-1), 1);
+			break;
+		case this.helper.ReportingPeriodicityEnum.SEMESTER:
+			//retval = '01-' + (6*(period-1) + 1) + '-' + year; 
+			retval = new Date(year, 6 * (period-1), 1);
+			break;
+		case this.helper.ReportingPeriodicityEnum.YEAR:
+			//retval = '01-01-' + year; 
+			retval = new Date(year, 0, 1);
+			break;
+	}
+	if (retval == null) {
+		throw new Error("The periodicity " + periodicity + " is not supported.");
+	}
+	return retval;
+}
+
+TimeSeriesPresenter.prototype.periodEndDate = function (periodicity, period, year) {
+
+	var retval = null;
+	switch (periodicity * 1) {
+		case this.helper.ReportingPeriodicityEnum.MONTH:
+			retval = new Date(year, period, 0);
+			break;
+		case this.helper.ReportingPeriodicityEnum.QUARTER:
+			retval = new Date(year, 3 * (period), 0);
+			break;
+		case this.helper.ReportingPeriodicityEnum.SEMESTER:
+			retval = new Date(year, 6 * (period), 0);
+			break;
+		case this.helper.ReportingPeriodicityEnum.YEAR:
+			retval = new Date(year, 11, 31);
+			break;
+	}
+	if (retval == null) {
+		throw new Error("The periodicity " + periodicity + " is not supported.");
+	}
+	return retval;
+
+}
+
+

workflow/engine/js/strategicDashboard/timeSeriesView.js

@@ -0,0 +1,81 @@
+
+helper = new ViewDashboardHelper();
+var ws = urlProxy.split('/');
+var dashboardId = '3290922985542460a19e7c1021519011';
+tsModel = new TimeSeriesModel(token, urlProxy, ws[3], pageUserId, dashboardId);
+tsPresenter = new TimeSeriesPresenter(tsModel);
+
+$(document).ready(function() {
+
+
+	$('#periodicityList').change(function(){
+		var id = $(this).val();
+		tsPresenter.changePeriodicity(id);
+		bindTimeSeriesLists(tsPresenter, ["indicatorList", "periodicityList"]);
+	});
+
+	$('#compareButton').click(function(){
+		tsPresenter.historicData(
+			$('#indicatorList').val(),
+			$('#periodicityList').val(),
+			$('#initPeriodList').val(),
+			$('#initYearList').val(),
+			$('#endPeriodList').val(),
+			$('#endYearList').val()
+			).done(function(data) {
+				var graphParams1 = {
+						canvas : {
+							containerId:'compareGraph',
+							width:300,
+							height:300,
+							stretch:true,
+							noDataText: G_STRING.ID_DISPLAY_EMPTY
+						},
+						graph: {
+								allowTransition: false,
+								allowDrillDown: false,
+								showTip: true,
+								allowZoom: false,
+								useShadows: false,
+								gridLinesX: true,
+								gridLinesY: true,
+								area: {visible: false, css:"area"},
+								axisX:{ showAxis: true, label: "Period" },
+								axisY:{ showAxis: true, label: "Efficiency" },
+								showErrorBars: false
+							}
+					};
+
+				var graph1 = new LineChart(data, graphParams1, null, null);
+				graph1.drawChart();
+				$('#indicatorsView').hide();
+			});
+	});
+});
+
+
+var bindTimeSeriesLists = function (presenter, elementsToConserve = []) {
+	var conserveStates =[];
+	$.each (elementsToConserve, function (i, elem){
+			conserveStates.push({id:elem, selValue: $('#' + elem).val()});
+			});
+	helper.fillSelectWithOptions ($('#indicatorList'), presenter.indicatorState.list, presenter.indicatorState.selValue);
+	helper.fillSelectWithOptions ($('#periodicityList'), presenter.periodicityState.list, presenter.periodicityState.selValue);
+	helper.fillSelectWithOptions ($('#initPeriodList'), presenter.initPeriodState.list, presenter.initPeriodState.selValue);
+	helper.fillSelectWithOptions ($('#initYearList'), presenter.initYearState.list, presenter.initYearState.selValue);
+	helper.fillSelectWithOptions ($('#endPeriodList'), presenter.endPeriodState.list, presenter.endPeriodState.selValue);
+	helper.fillSelectWithOptions ($('#endYearList'), presenter.endYearState.list, presenter.endYearState.selValue);
+
+	$.each (conserveStates, function (i, item){
+			$('#' + item.id).val(item.selValue);
+			});
+
+	helper.setVisibility ($('#initPeriodList'), presenter.initPeriodState.visible);
+	helper.setVisibility ($('#endPeriodList'), presenter.endPeriodState.visible);
+}
+
+
+
+
+
+

workflow/engine/js/strategicDashboard/viewDashboardHelper.js

@@ -1,9 +1,22 @@
-
-
 var ViewDashboardHelper = function () {
 };
 
-ViewDashboardHelper.prototype.userDashboards = function(userId, callBack) {
+ViewDashboardHelper.prototype.ReportingPeriodicityEnum = {
+		NONE : 0,
+		MONTH : 100,
+		QUARTER : 200,
+		SEMESTER : 300,
+		YEAR : 400
+}
+
+ViewDashboardHelper.prototype.ReportingIndicatorEnum = {
+		PEI : 1010,
+		EEI : 1030,
+		INBOX_STATUS : 1050
+}
+
+ViewDashboardHelper.prototype.date2MysqlString = function (val){
+	return val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDay() ;
 };
 
 ViewDashboardHelper.prototype.stringIfNull = function (val){
@@ -44,6 +57,19 @@ ViewDashboardHelper.prototype.assert = function (condition, message) {
     }
 }
 
+ViewDashboardHelper.prototype.fillSelectWithOptions = function ($select, options, selectedValue) {
+	$select.empty(); // remove old options
+	$.each(options, function(index, option) {
+	  $select.append($("<option></option>")
+					 .attr("value", option.value).text(option.label));
+	});
+	$select.val(selectedValue);
+}
+
+ViewDashboardHelper.prototype.setVisibility = function ($element, isVisible) {
+	$element.css('visibility', (isVisible ? 'visible' : 'hidden'));
+}
+
 ViewDashboardHelper.prototype.truncateString = function (string, len) {
 	this.assert(len != null && len > 0, "Var len not valid. String must by truncated to a positive non zero length.");
 	this.assert(string != null, "var string can't be null.");

workflow/engine/js/strategicDashboard/viewDashboardView.js

@@ -401,7 +401,12 @@ $(document).ready(function() {
         animated: 'fade',
         placement: 'bottom'
     });
-    initialDraw();
+
+	tsPresenter.initializePresenter()
+			.done(function (data){
+				bindTimeSeriesLists(tsPresenter);
+				initialDraw();
+			});
 });
 
 var hideScrollIfAllDivsAreVisible = function(){
@@ -447,8 +452,8 @@ var selectDefaultMonthAndYear = function () {
 	compareDate.setMonth(compareDate.getMonth() - 1);
 	var compareMonth = compareDate.getMonth() + 1;
 	var compareYear = compareDate.getFullYear();
-	$('#month').val(compareMonth);
+	$('#endPeriodList').val(compareMonth);
-	$('#year').val(compareYear);
+	$('#endYearList').val(compareYear);
 }
 
 var setActiveDashboard = function () {
@@ -527,15 +532,17 @@ var defaultInitDate = function() {
     var date = new Date();
     var dateMonth = date.getMonth();
     var dateYear = date.getFullYear();
-	var initDate = $('#year').val() + '-' + $('#month').val() + '-' + '01';
+	var initDate = $('#initYearList').val() + '-' + $('#initPeriodList').val() + '-' + '01';
 	return initDate;
 }
 
 var defaultEndDate = function () {
+	//TODO use the timeSeries function that finds the last day in the period
     var date = new Date();
     var dateMonth = date.getMonth();
     var dateYear = date.getFullYear();
-	return dateYear + "-" + (dateMonth + 1) + "-30";
+	var initDate = $('#endYearList').val() + '-' + $('#endPeriodList').val() + '-' + '30';
+	return initDate;
 }
 
 var fillDashboardsList = function (presenterData) {
@@ -557,7 +564,6 @@ var fillDashboardsList = function (presenterData) {
 				.addClass('selected');
 		}
 	}
-	
 };
 
 var fillIndicatorWidgets = function (presenterData) {

workflow/engine/src/ProcessMaker/BusinessModel/ReportingIndicators.php

@@ -5,7 +5,41 @@ use \G;
 
 class ReportingIndicators
 {
-//    /**et
+
+
+    /**
+     * Returns the historic data of an indicator
+     *
+     * @param array $indicatorUid indicator from which will be extracted the information
+     * @param DateTime $initDate date from the index will be calculated
+     * @param DateTime $endDate date until the index will be calculated
+     * @param string $language language for the names (en, es, etc.)
+     *
+     * return decimal  value
+     */
+    public function getHistoricData($indicatorUid,  $initDate, $endDate, $periodicity, $language)
+    {
+        G::loadClass('indicatorsCalculator');
+		$retval = "";
+        $calculator = new \IndicatorsCalculator();
+        $arr = $calculator->indicatorData($indicatorUid);
+        $indicator = $arr[0];
+		$processesId = $indicator['DAS_UID_PROCESS'];
+		$indicatorType = $indicator['DAS_IND_TYPE'];
+		switch ($indicatorType) {
+			case \ReportingIndicatorTypeEnum::PEI:
+				$retval = $calculator->peiHistoric($processesId, $initDate, $endDate, \ReportingPeriodicityEnum::fromValue($periodicity));
+				break;
+			case \ReportingIndicatorTypeEnum::UEI:
+				$retval = $calculator->ueiHistoric($processesId, $initDate, $endDate, \ReportingPeriodicityEnum::fromValue($periodicity));
+				break;
+			default:
+				throw new Exception("Can't retrive historic Data becasuse de indicator type " + $indicator['DAS_IND_TYPE'] + " has no operation associated.");
+				break;
+		}
+        return $retval;
+    }
+	
 
     /**
      * Lists tasks of a process and it's statistics (efficiency, average times, etc.)
@@ -25,7 +59,7 @@ class ReportingIndicators
         $arr = $calculator->indicatorData($indicatorUid);
         $indicator = $arr[0];
 		$processesId = $indicator['DAS_UID_PROCESS'];
-		$peiValue = current(reset($calculator-> peiHistoric($processesId, $measureDate, $measureDate, \ReportingPeriodicityEnum::NONE)));
+		$peiValue = current(reset($calculator->peiHistoric($processesId, $measureDate, $measureDate, \ReportingPeriodicityEnum::NONE)));
 		$peiCost = current(reset($calculator->peiCostHistoric($processesId, $measureDate, $measureDate, \ReportingPeriodicityEnum::NONE)));
 		$peiCompare = current(reset($calculator->peiHistoric($processesId, $compareDate, $compareDate, \ReportingPeriodicityEnum::NONE)));
 

workflow/engine/src/ProcessMaker/Services/Api/ReportingIndicators.php

@@ -197,6 +197,31 @@ class ReportingIndicators extends Api
         }
     }
 
+    /**
+     * Get historic data of an indicator
+     *
+     * @return array
+     *
+     * @author Dante Loayza
+     * @copyright Colosa - Bolivia
+     *
+     * @url GET /indicator-historic-data
+     */
+    public function doGetHistoricDataFromIndicator($indicator_uid, $init_date, $end_date, $periodicity, $language) {
+        try {
+            $indicatorsObj = new \ProcessMaker\BusinessModel\ReportingIndicators();
+            $response = $indicatorsObj->getHistoricData
+											($indicator_uid,
+											new \DateTime($init_date),
+											new \DateTime($end_date),
+											$periodicity,
+											$language);
+            return $response;
+        } catch (\Exception $e) {
+            throw (new RestException(Api::STAT_APP_EXCEPTION, $e->getMessage()));
+        }
+    }
+
 }
 
 

workflow/engine/templates/strategicDashboard/viewDashboard.html

@@ -39,7 +39,9 @@
     <script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardPresenter.js"></script>
     <script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardView.js"></script>
 
-
+    <script type="text/javascript" src="/jscore/strategicDashboard/timeSeriesModel.js"></script>
+    <script type="text/javascript" src="/jscore/strategicDashboard/timeSeriesPresenter.js"></script>
+    <script type="text/javascript" src="/jscore/strategicDashboard/timeSeriesView.js"></script>
 
 	<script type="text/template" class="specialIndicatorButtonTemplate">
 		<div class="col-lg-3 col-md-6 dashPro ind-button-selector"
@@ -369,43 +371,24 @@
                         <div class="pull-right dashboard-right container-fluid">
 
 							<div id="compareIndicators" class="row pull-left">
+								
 								<div class="span4 pull-left">
-									<h5 class="pull-left" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">{translate label="ID_DASH_COMPARE_MONTH"}:</h5>
+										**Graph:
-								</div>
+										<select id="indicatorList"></select>
-
+										***Periodicty:
-								<div class="span4 pull-left">
+										<select id="periodicityList" style="width:auto;"></select>
-									<select id="year" class="form-control pull-right ">
+										***From:
-									{literal}
+										<select id="initPeriodList"></select>
-									<script>
+										<select id="initYearList"></select>
-										now = new Date();
+										***To:
-										anio = now.getFullYear();
+										<select id="endPeriodList"></select>
-										for(a=anio;a>=anio-10;a--){
+										<select id="endYearList"></select>
-										document.write('<option value="'+a+'">'+a+'</option>');
+										<input type="button" id="compareButton" value="**Compare"/>
-										}
-									</script>
-									{/literal}
-									</select>
-
-									<select id="month" class="form-control pull-right ">
-									  <option value="1">{translate label="ID_MONTH_ABB_1"}</option>
-									  <option value="2">{translate label="ID_MONTH_ABB_2"}</option>
-									  <option value="3">{translate label="ID_MONTH_ABB_3"}</option>
-									  <option value="4">{translate label="ID_MONTH_ABB_4"}</option>
-									  <option value="5">{translate label="ID_MONTH_ABB_5"}</option>
-									  <option value="6">{translate label="ID_MONTH_ABB_6"}</option>
-									  <option value="7">{translate label="ID_MONTH_ABB_7"}</option>
-									  <option value="8">{translate label="ID_MONTH_ABB_8"}</option>
-									  <option value="9">{translate label="ID_MONTH_ABB_9"}</option>
-									  <option value="10">{translate label="ID_MONTH_ABB_10"}</option>
-									  <option value="11">{translate label="ID_MONTH_ABB_11"}</option>
-									  <option value="12">{translate label="ID_MONTH_ABB_12"}</option>
-									</select>
 								</div>
 
 								<div class="span4 pull-left">
 									<button type="button" class="btn btn-compare btn-success pull-right btn-date">{translate label="ID_DASH_COMPARE"}</button>
 								</div>
-
 							</div>
                         </div>
                         <div class="clearfix"></div>
@@ -426,7 +409,7 @@
                 <!-- /.col-lg-12 -->
             </div>
           <!-- Indicators -->
-          <div class="row">
+          <div class="row" id="indicatorsView">
               <div class="indicators">
                 <div id="indicatorsGridStack" class="grid-stack" data-gs-width="12" data-gs-animate="no" >
                   <!--Here are added dynamically the Indicators-->
@@ -454,6 +437,7 @@
                    </div>
               </div>
             </div>
+			<div class="row" id="compareGraph"></div>
     </div>
   </div>