@model NAME.Models.ViewModels.GraphsViewModel
@using NAME
@using NAME.Models
@using NAME.Models.Domain
@using NAME.Models.ViewModels
@{
string[] xas = Model.EfficiencyString;
double[] yas = Model.EfficiencyDouble;
List<string> impacts = Model.impacts;
List<string> urgenties = Model.urgenties;
int[,] Priorities = Model.prioriteiten;
List<string> categories = Model.Categories;
int[] NrPerCategory = Model.NrPerCategory;
List<string> uniqueGroups = Model.uniqueGroups;
List<string> allNames = Model.allNames;
MultiKeyDictionary<string, string, int> namesPerGroup = Model.namesPerGroup;
}
<head>
@{
ViewData["Title"] = "Graphs";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- Alle variabelen die nodig zijn voor de verschillende grafieken. Ze worden steeds uit de ViewData gehaald en in een variabele geplaatst omdat dit anders soms voor problemen zorgt-->
<!-- <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Dit script tekent alle grafieken.-->
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawAmountPerCategory);
google.charts.setOnLoadCallback(drawIncNivStacked);
google.charts.setOnLoadCallback(drawIncNiv);
google.charts.setOnLoadCallback(drawEfficiency);
// Callback that creates and populates a data table,instantiates the pie chart, passes in the data and draws it.
function drawEfficiency() {
// Create the data table.
var data = new google.visualization.DataTable();
@{
@:data.addColumn('string', 'Status');
@:data.addColumn('number','Aantal');
for (var k = 0; k < @yas.Length; k++)
{
@:data.addRows([['@xas[k]',@yas[k]]]);
}
}
// Set chart options
var options = {
'title': 'Aantal tickets in functie van de status',
'width': '100%',
'height': '100%'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', myReadyHandler);
chart.draw(data, options);
function myReadyHandler() {
window.status = "ready";
}
};
function drawAmountPerCategory()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Categorieën');
data.addColumn('number', 'Aantal');
data.addColumn({ type: 'number', role: 'annotation' })
@{
for (var c = 0; c < categories.Count(); c++)
{
if (!(NrPerCategory[c] == 0))
{ string categorie = categories[c];
@:data.addRows([['@categorie',@NrPerCategory[c],@NrPerCategory[c]]]);
}
}
}
var options = {
title: 'Aantal tickets per categorie',
'width': '100%',
'height': '100%',
hAxis: {
title: 'Categorieën',
slantedText: true
},
chartArea: {
top: 28,
height: '40%',
width: '80%'
},
vAxis: {
title: 'Aantal'
},
legend: {position: 'none'}
};
data.sort([{ column: 1, desc: true }]);
var categorieChart = new google.visualization.ColumnChart(document.getElementById('cat_chart'));
categorieChart.draw(data, options);
}
function drawIncNiv()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Soort incident');
data.addColumn('number', 'Aantal');
data.addColumn({ type: 'number', role: 'annotation' })
data.addRows([['P1',@Priorities[1,1],@Priorities[1, 1]]]);
data.addRows([['P2',@Priorities[1,2] + @Priorities[2,1],@Priorities[1,2] + @Priorities[2,1]]]);
data.addRows([['P3',@Priorities[1,3] + @Priorities[2,2] + @Priorities[3,1],@Priorities[1,3] + @Priorities[2,2] + @Priorities[3,1]]]);
data.addRows([['P4',@Priorities[2,3] + @Priorities[2,4] + @Priorities[3,2] + @Priorities[3,3] + @Priorities[1,4],@Priorities[2,3] + @Priorities[2,4] + @Priorities[3,2] + @Priorities[3,3] + @Priorities[1, 4]]]);
data.addRows([['P5',@Priorities[3,4],@Priorities[3, 4]]]);
var options = {
title: 'Some',
'width': '100%',
'height': '100%',
hAxis: {
title: 'Incident niveau',
},
vAxis: {
title: 'Aantal tickets'
},
chartArea: {
top: 28,
height: '40%',
width: '80%'
},
legend: { position: 'none' }
};
var categorieChart = new google.visualization.ColumnChart(document.getElementById('incniv_chart'));
categorieChart.draw(data, options);
}
function drawIncNivStacked()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Impact');
data.addColumn('number', 'Unable to Work');
data.addColumn('number', 'Critical Business Process Unavailable');
data.addColumn('number', 'Normal Business Process Unavailable');
data.addColumn('number', 'Incident, but Workaround Available');
data.addColumn('number', 'Service Request');
data.addColumn('number', 'Not Set');
data.addColumn({ type: 'number', role: 'annotation' });
@{for (var m = 1; m < impacts.Count()+1; m++)
{
int som = Priorities[m, 1] + Priorities[m, 2] + Priorities[m, 3] + Priorities[m, 4] + Priorities[m, 5] + Priorities[m, 6];
@:data.addRows([['@impacts[m-1]', @Priorities[m, 1], @Priorities[m, 2], @Priorities[m, 3], @Priorities[m, 4], @Priorities[m, 5], @Priorities[m, 6], @som]]);
}
}
var options = {
title: 'Aantal tickets per Impact',
'width': '100%',
'height': '100%',
isStacked: true,
vAxis: {
title: 'Aantal tickets'
},
chartArea: {
top: 28,
height: '70%',
width: '80%'
}
};
var categorieChart = new google.visualization.ColumnChart(document.getElementById('incnivStacked_chart'));
categorieChart.draw(data, options);
}
function CallBackForDrawingPdf() {
drawAmountPerCategory();
drawIncNivStacked();
drawIncNiv();
drawEfficiency();
}
</script>
</head>
<body onload="CallBackForDrawingPdf()">
<h2>Graphs</h2>
<h3>@ViewBag.filter</h3>
<div class="btn btn-default">
<a asp-action="PrintPdf" asp-controller="Home"><img src="~/images/pdf.png" width="40" /></a>
</div>
<div id="chartparent">
<!-- De div elementen bevatten elk een grafiek. De lijnen (hr) zijn puur voor wat overzicht op de pagina te creëren.-->
<hr style="width: 100%; color: black; height: 3px; background-color:dimgrey;" />
<div id="cat_chart"></div>
<!--<hr style="width: 100%; color: black; height: 3px; background-color:dimgrey;" />-->
<div id="incniv_chart"></div>
<!--<hr style="width: 100%; color: black; height: 3px; background-color:dimgrey;" /> -->
<div id="incnivStacked_chart"></div>
<!--<hr style="width: 100%; color: black; height: 3px; background-color:dimgrey;" />-->
<div id="chart_div"></div>
<!-- De tabel waar per groep staat hoeveel tickets een persoon heeft behandeld.-->
<br />
}
</body>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.