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

76 lines
2.9 KiB
Plaintext

<div class="graph-container form-group-margin" id="graph-container-FD" style="min-height:260px">
<div id="jq-flot-graph-FD"></div>
</div>
<script type="text/javascript">
var _dataForChart;
function DrawGraph() {
if (!_dataForChart) {
if ($('#chkShowChart').is(":checked")) {
LoadGraphData();
}
return;
}
var chartData = new Array();
var i;
if (!$('#chFDGraphMode').prop('checked')) {
for (i = 0; i < _dataForChart.length; i++) {
if (_dataForChart[i].type == "Cost") {
chartData.push(_dataForChart[i]);
}
}
} else {
for (i = 0; i < _dataForChart.length; i++) {
if (_dataForChart[i].type == "Quantity") {
chartData.push(_dataForChart[i]);
}
}
}
// Init Chart
$('#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: true
},
xaxis: {
mode: "time",
tickSize: [1, "month"],
tickLength: 0,
axisLabel: "time",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
//tickSize: (Cost) ? 3000 : 2
}
}, {
height: 205,
tooltipText: "y + ' units at ' + (new Date(x)).toDateString()"
});
}
function LoadGraphData() {
if ($('#chkShowChart').is(":checked")) {
$('#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>');
var url = "/ForecastDashboard/GetGraphData" + '?startDate=' + $('#filterStartDate').val() + '&endDate=' + $('#filterEndDate').val() + '&type=' + $('#filterType').val() + '&status=' + $('#filterStatus').val() + '&classification=' + $('#filterClassification').val() + '&filterGroup=' + $('#group').val() + '&isLaborMode=' + $('#expendituresMode').prop('checked') + '&isUOMHours=' + $('#uomModeForecast').prop('checked') + '&additionalParams=' + $('#' + _additionalFiltersId).val();
var request = {};
$.get(url, request, function (data) {
_dataForChart = data;
DrawGraph();
});
} else {
_dataForChart = null;
}
};
</script>