240 lines
9.1 KiB
Plaintext
240 lines
9.1 KiB
Plaintext
@* ROW 2 COL 3 - CARD: BAR CHART --------------------------------- *@
|
|
<div class="pv-menu k-content" id="perfomrmanceChartsContainer">
|
|
<div class="btn-group pull-right">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<i class="fa fa-ellipsis-h"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li class="widget-full-screen"><a href="#" class="full-screen" onclick="pv.chart.menu.select('Bar1');">Full Screen</a></li>
|
|
<li role="separator" class="divider widget-full-screen"></li>
|
|
<li>
|
|
<label>
|
|
<span class="switcherLbl">Mode</span>
|
|
</label>
|
|
<input type="checkbox" data-key="performanceChartMode" name="performanceChartMode" id="performanceChartMode" class="switcher px" />
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span class="switcherLbl">Group by</span>
|
|
</label>
|
|
<input type="checkbox" data-key="performanceChartGroupBy" checked="checked" name="performanceChartGroupBy" id="performanceChartGroupBy" class="switcher px" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="pv-title">
|
|
Top 5 Projects
|
|
</div>
|
|
<div id="barChartsContainer">
|
|
<div class='loadRotator'>
|
|
<span>
|
|
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' /> loading...
|
|
</span>
|
|
</div>
|
|
<div class="pv-chart chart-bar" id="chartBar1"></div>
|
|
<div class="pv-chart chart-bar" id="chartBar2"></div>
|
|
<div class="pv-chart chart-bar" id="chartBar3"></div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
var C_PERFORMANCE_CHART_BASE_COLOR = "#bcccc7"; // "#e1ede9"; //"#31a663";
|
|
var C_PERFORMANCE_CHART_RED_COLOR = "#d9534f";
|
|
var C_PERFORMANCE_CHART_BLUE_COLOR = "#428bca";
|
|
var C_PERFORMANCE_CHART_GREEN_COLOR = "#5cb85c";
|
|
var _performanceData;
|
|
|
|
init.push(function () {
|
|
@if (Request.Browser.Browser == "IE" && Request.Browser.MajorVersion < 11)
|
|
{
|
|
<text>AmCharts.ready(function (a) { loadBarData(); });</text>
|
|
}
|
|
else
|
|
{
|
|
<text>loadBarData();</text>
|
|
}
|
|
|
|
initBarMenu();
|
|
$("#cardBar1").on("maximized", function() { invalidateChartSize("chartStacked1"); });
|
|
$("#cardBar1").on("maximizing", function (e) {
|
|
enableCategoryAxisLables("chartBar1");
|
|
enableCategoryAxisLables("chartBar2");
|
|
enableCategoryAxisLables("chartBar3");
|
|
});
|
|
$("#cardBar1").on("restored", function (e) {
|
|
enableCategoryAxisLables("chartBar1", false);
|
|
enableCategoryAxisLables("chartBar2", false);
|
|
enableCategoryAxisLables("chartBar3", false);
|
|
invalidateChartSize("chartStacked1");
|
|
});
|
|
});
|
|
|
|
function enableCategoryAxisLables(chartId, enable) {
|
|
var chart = findChart(chartId);
|
|
chart.categoryAxis.labelsEnabled = (enable === undefined ? true : enable);
|
|
}
|
|
|
|
function loadBarData(filterData) {
|
|
$("#barChartsContainer .loadRotator").show();
|
|
|
|
var timePoint = DateTimeConverter.getLocalNowMs();
|
|
var url = "@Url.Action("GetPerformanceGraphData", "ForecastDashboard")";
|
|
|
|
filterData = filterData || getFilterDataObject();
|
|
var graphMode = $('#performanceChartGroupBy').prop('checked') ? graphMode = 1 : graphMode = 2;
|
|
filterData["GraphMode"] = graphMode;
|
|
filterData["TimePoint"] = timePoint;
|
|
|
|
$.post(url, filterData)
|
|
.done(function (data) {
|
|
_performanceData = data;
|
|
setBarData("chartBar1", data.CurrentPeriod);
|
|
setBarData("chartBar2", data.PrevPeriod);
|
|
setBarData("chartBar3", data.NextPeriod);
|
|
$("#barChartsContainer .loadRotator").hide();
|
|
|
|
// Set diagramm title
|
|
if (graphMode == 1) {
|
|
$('#cardBar1').find('.pv-title').text("Top 5 Projects");
|
|
}
|
|
if (graphMode == 2) {
|
|
$('#cardBar1').find('.pv-title').text("Top 5 Projects by Type");
|
|
}
|
|
});
|
|
}
|
|
|
|
function setBarData(id, periodData) {
|
|
var chart = findChart(id);
|
|
chart.graphs = [];
|
|
chart.clearLabels();
|
|
|
|
var series = isCostMode() ? periodData.series : periodData.quantitySeries;
|
|
var barOptions = isCostMode() ? periodData.barOptions : periodData.barOptionsQuantity;
|
|
var chartData = new Array();
|
|
|
|
chart.valueAxes[0].unit = isCostMode() ? "$" : "";
|
|
chart.series = series;
|
|
chart.barOptions = barOptions;
|
|
chart.angle = 0;
|
|
chart.depth3D = 0;
|
|
|
|
for (var serieIndex = 0; serieIndex < 4; serieIndex++) {
|
|
var graph = new AmCharts.AmGraph();
|
|
graph.type = "column";
|
|
graph.clustered = false;
|
|
|
|
graph.valueField = "value" + serieIndex;
|
|
graph.fillAlphas = 1;
|
|
graph.lineAlpha = 0.2;
|
|
graph.stackable = false;
|
|
graph.columnWidth = 0.3;
|
|
graph.balloonFunction = balloonFunction;
|
|
chart.addGraph(graph);
|
|
if (serieIndex == 0) {
|
|
graph.fillColors = [C_PERFORMANCE_CHART_BASE_COLOR, C_PERFORMANCE_CHART_BASE_COLOR];
|
|
graph.columnWidth = 0.5;
|
|
|
|
} else if (serieIndex == 1) {
|
|
graph.fillColors = [C_PERFORMANCE_CHART_RED_COLOR, C_PERFORMANCE_CHART_RED_COLOR];
|
|
|
|
} else if (serieIndex == 2) {
|
|
graph.fillColors = [C_PERFORMANCE_CHART_BLUE_COLOR, C_PERFORMANCE_CHART_BLUE_COLOR];
|
|
|
|
} else if (serieIndex == 3) {
|
|
graph.fillColors = [C_PERFORMANCE_CHART_GREEN_COLOR, C_PERFORMANCE_CHART_GREEN_COLOR];
|
|
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < barOptions.length; i++) {
|
|
var proj = barOptions[i][0];
|
|
var dataItem = {
|
|
proj: proj,
|
|
projectName: barOptions[i][1]
|
|
};
|
|
|
|
for (var serieIndex = 0; serieIndex < series.length; serieIndex++) {
|
|
var serie = series[serieIndex];
|
|
for (var projIndex = 0; projIndex < serie.data.length; projIndex++) {
|
|
if (serie.data[projIndex][0] == proj) {
|
|
dataItem["value" + serieIndex] = serie.data[projIndex][1];
|
|
}
|
|
}
|
|
}
|
|
chartData.push(dataItem);
|
|
}
|
|
updateChart(id, chartData);
|
|
}
|
|
|
|
function isCostMode() {
|
|
return $("#performanceChartMode").prop("checked");
|
|
}
|
|
|
|
function balloonFunction(item, graph) {
|
|
var chart = graph.chart;
|
|
return getHint(chart.series, chart.barOptions, item.index);
|
|
}
|
|
|
|
function getHint(series, barOptions, index) {
|
|
var hintText = barOptions[index][1] + "<br/>",
|
|
unit = isCostMode() ? "$" : "",
|
|
mode = isCostMode() ? "costs" : "quantity";
|
|
if (series[1].data[index][1] > 0 || series[2].data[index][1] > 0 || series[3].data[index][1] > 0) {
|
|
var summaryCosts = series[4].data[index][1];
|
|
var varianceCost = 0;
|
|
var sign = "";
|
|
|
|
if (series[1].data[index][1] > 0) {
|
|
varianceCost = series[1].data[index][1];
|
|
sign = "+";
|
|
}
|
|
|
|
if (series[2].data[index][1] > 0) {
|
|
varianceCost = series[2].data[index][1];
|
|
sign = "-";
|
|
}
|
|
|
|
if (series[3].data[index][1] > 0) {
|
|
varianceCost = series[3].data[index][1];
|
|
sign = "+";
|
|
}
|
|
|
|
hintText += ("Actual " + mode + ": " + unit + (varianceCost != 0 ? varianceCost.formatNumber() : forecastCosts.formatNumber()));//" (" + sign + unit + varianceCost.formatNumber() + " to forecast)";
|
|
|
|
if (summaryCosts != 0)
|
|
hintText += " (" + sign + unit + summaryCosts.formatNumber() + " to forecast)";
|
|
else
|
|
hintText += " (the same as forecast)";
|
|
}
|
|
else {
|
|
var forecastCosts = series[0].data[index][1];
|
|
hintText += ("No actuals present (forecast " + mode + ": " + unit + forecastCosts.formatNumber() + ")");
|
|
}
|
|
return hintText;
|
|
}
|
|
|
|
function initBarMenu() {
|
|
$('#performanceChartMode').switcher({
|
|
on_state_content: 'Cost',
|
|
off_state_content: 'Quantity'
|
|
});
|
|
$('#performanceChartGroupBy').switcher({
|
|
on_state_content: 'Project',
|
|
off_state_content: 'Type'
|
|
});
|
|
$('#performanceChartMode').click(function () {
|
|
saveForecastDashboardPreferences();
|
|
switchPerformanceChartMode();
|
|
});
|
|
$('#performanceChartGroupBy').click(function () {
|
|
saveForecastDashboardPreferences();
|
|
loadBarData();
|
|
});
|
|
}
|
|
|
|
function switchPerformanceChartMode() {
|
|
setBarData("chartBar1", _performanceData.CurrentPeriod);
|
|
setBarData("chartBar2", _performanceData.PrevPeriod);
|
|
setBarData("chartBar3", _performanceData.NextPeriod);
|
|
}
|
|
</script> |