PIbd-21_BatylkinaAO_MusoevD.../Canteen/CanteenManagerApp/Views/Home/Graphic.cshtml

68 lines
2.5 KiB
Plaintext
Raw Normal View History

2023-05-17 17:59:48 +04:00
@using System.Web;
@{
ViewData["Title"] = "Diagram";
}
<div class="text-center">
<form asp-action="Index">
<div id="Count"></div>
<div id="Price"></div>
</form>
</div>
@section Scripts {
@{
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(Count);
google.charts.setOnLoadCallback(Price);
@if (ViewBag.Model != null)
{
<text>
function Count() {
var data = new google.visualization.DataTable();
data.addColumn('string', '@Html.Raw(HttpUtility.JavaScriptStringEncode(ViewBag.Model[0].ColumnName))');
data.addColumn('number', '@Html.Raw(HttpUtility.JavaScriptStringEncode(ViewBag.Model[0].ValueName))');
@foreach (var row in ViewBag.Model[0].Data)
{
<text>
data.addRow(['@Html.Raw(HttpUtility.JavaScriptStringEncode(row.Item1))', @row.Item2]);
</text>
}
var options = {
'title': '@Html.Raw(HttpUtility.JavaScriptStringEncode(ViewBag.Model[0].Title))',
'width': 1200,
'height': 900
};
var chart = new google.visualization.PieChart(document.getElementById('Count'));
console.log(options);
chart.draw(data, options);
}
function Price() {
var data = new google.visualization.DataTable();
data.addColumn('string', '@Html.Raw(HttpUtility.JavaScriptStringEncode(ViewBag.Model[1].ColumnName))');
data.addColumn('number', '@Html.Raw(HttpUtility.JavaScriptStringEncode(ViewBag.Model[1].ValueName))');
@foreach (var row in ViewBag.Model[1].Data)
{
<text>
data.addRow(['@Html.Raw(HttpUtility.JavaScriptStringEncode(row.Item1))', @row.Item2]);
</text>
}
var options = {
'title': '@Html.Raw(HttpUtility.JavaScriptStringEncode(ViewBag.Model[1].Title))',
'width': 1200,
'height': 900
};
var chart = new google.visualization.ColumnChart(document.getElementById('Price'));
chart.draw(data, options);
}
</text>
}
</script>