EnVisageOnline/Main/Source/EnVisage/Views/Shared/_chart.cshtml

@using EnVisage.Code
@using EnVisage.Models
@model object
@{	// Team dashboard beautifying
    if (!(Model is TeamboardModel) && !(Model is ViewBoardModel))
	{
		<text>
		<h4 class="modal-title">Projects by Status</h4>
		</text>
	}
}
<div class="graph-container form-group-margin" id="graph-container-FD" style="min-height:260px;min-width:400px;">
	<div id="jq-flot-graph-FD"></div>
</div>
<script type="text/javascript">
    var _dataForChart = null;
    var rtime;
    var timeout = false;
    var delta = 500;
    init.push(function () {
        $(window).resize(function () {
            rtime = new Date();
            if (timeout === false) {
                timeout = true;
                setTimeout(resizeend, delta);
            }
        });
    });
    

    function resizeend() {
        if (new Date() - rtime < delta) {
            setTimeout(resizeend, delta);
        } else {
            timeout = false;
            if (_dataForChart)
                DrawGraph();
        }
    }
	function DrawGraph() {
        if (!_dataForChart) {
            if ($('#chkShowChart').is(":checked")) {
                LoadGraphData();
            }
            return;
        }
        var chartData = new Array();
        var isQuantityMode = $('#chFDGraphMode').prop('checked');
        var isUOMHoursMode = $('#uomModeForecast').prop('checked');
        var graphMode = isQuantityMode ? (isUOMHoursMode ? "Hours" : "Resources") : "Cost";

        var clrs = [];
        var labels = {};
        var uniqueColorIndex = 0;
        for (var i = 0; i < _dataForChart.length; i++) {
            if (_dataForChart[i].color && clrs.indexOf(_dataForChart[i].color) == -1)
                clrs.push(_dataForChart[i].color);
        }
        
        for (var i = 0; i < _dataForChart.length; i++) {
            if (!_dataForChart[i].color) {
                if (labels[_dataForChart[i].label])
                    _dataForChart[i].color = labels[_dataForChart[i].label];
                else {
                    _dataForChart[i].color = getUniqueColor(uniqueColorIndex++, clrs);
                    labels[_dataForChart[i].label] = _dataForChart[i].color;
                }
            }
            // use only records of required type
            if (_dataForChart[i].type == graphMode) {
                chartData.push(_dataForChart[i]);
            }
        }

	    // Init Chartt
        var axisMult = 1;
        if (_dataForChart && _dataForChart.length > 0) axisMult = CalculateMonthSpread('graph-container-FD', _dataForChart[0].data);
        $('#graph-container-FD').html(' <div id="jq-flot-graph-FD"> </div> ');
        $('#jq-flot-graph-FD').pixelPlot(chartData, {
            series: {
                points: {
                    show: false
                },
                lines: {
                    show: true,
                    fill: true,
                    steps: false
                },
                stack: false
            },
            xaxis: {
                mode: "time",
                tickSize: [axisMult, "month"],
                tickLength: 0
                
            }
        }, {
            height: 205,
            tooltipText: "y + ' units at ' + (new Date(x)).toDateString()"
        });

	    //triggering finished drawing graph event
        $(document).trigger('finishedDrawing');
    }


    function LoadGraphData() {
        if ($('#chkShowChart').is(":checked")) {
			@{	// Team dashboard beautifying
				if (!(Model is TeamboardModel) && !(Model is ViewBoardModel))
				{
					<text>
        				$('#graph-container-FD').html('<div id="jq-flot-graph-FD"><span class="control-label" style="margin-left: 10px;"><img src="@Url.Content("~/Content/images/load.gif")" /> loading...</span></div>');
        			</text>
				}
				else
				{
					<text>
        				$('#graph-container-FD').html('<div id="jq-flot-graph-FD"><div class="loadRotator"><span>' +
							'<img class="valign-middle" src="@Url.Content("~/Content/images/loadFA.gif")" />&nbsp;&nbsp;loading...</span>' +
							'</div></div>');
        			</text>
				}
			}

            var additionalFilters = $('#' + _additionalFiltersId).val();
            var requestData = {
                StartDate: $('#filterStartDateChart').val(),
                EndDate: $('#filterEndDateChart').val(),
                Type: $('#filterType').val(),
                ProjectStatuses: $('#filterStatus').val() || [],
                Teams: getSelectedTeamsOrViews("Teams"),
                Views: getSelectedTeamsOrViews("Views"),
                ProjectTypes: $('#filterClassification').val() || [],
                FilterGroups: $('#group').val() || [],
                IsLaborMode: $('#expendituresMode').prop('checked'),
                ChartType: dashboardChartType.projectsByStatus,
                StrategicGoals: $('#filterGoal').val() || [],
                AdditionalParams: additionalFilters ? JSON.parse(additionalFilters) : {}
            };
            $.post('/ForecastDashboard/GetGraphData', requestData, function (data) {
                _dataForChart = (data["ProjectsByStatus"] || {}).Headers;
                DrawGraph();
            });
        } else {
            _dataForChart = null;
        }
    };
</script>