Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
@model UserActionSankeyDiagramViewModel
@{
ViewBag.Title = "ユーザーの行動";
}
<h2>ユーザーの行動(BigQuery ※1日キャッシュ)</h2>
<div class="padding-top-10"></div>
@using (Html.BeginForm("Index", "UserActionSankeyDiagram", FormMethod.Get, new { role = "form" }))
{
//Html.MonthsとHtml.Intsは https://gist.github.com/kiyoaki/7cfd60d171d82679eaea 参照
<span>@Html.DropDownList("targetMonth", Html.Months(Model.ReleaseMonth, Model.ThisMonth, Model.TargetMonth), new { onchange = "this.form.submit();" })</span>
<span>@Html.DropDownList("targetStep", Html.Ints(MinStep, MaxStep, Model.TargetStep), new { onchange = "this.form.submit();" })</span>
}
<div class="padding-top-10"></div>
<div id="sankey-multiple-loading"><img src="~/Content/loading.gif" /></div>
<div id="sankey-multiple"></div>
@Html.Partial("_ClearBigqueryCacheButton")
@section styles
{
<style>
.padding-top-10 {
padding-top: 10px;
}
</style>
}
@section scripts
{
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
(function (ctx) {
var google = ctx.google;
var doc = ctx.document;
var loading = doc.getElementById("sankey-multiple-loading");
var parent = doc.getElementById('sankey-multiple');
var screenWidth = screen.width;
var screenHeight = screen.height;
var chartWidth = screenWidth - 20 > 1140 ? 1140 : screenWidth - 20;
var chartHeight = screenHeight - 20 > 640 ? 640 : screenHeight - 20;
function draw(json) {
if (json == null || json.length === 0) {
return;
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows(json);
// Set chart options
var options = {
width: chartWidth,
height: chartHeight
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Sankey(parent);
chart.draw(data, options);
loading.remove();
}
function requestApi() {
ctx.$.ajax.getJSON("/api/UserActionSankeyDiagramApi", { targetMonth: "@Model.TargetMonth", targetStep: "@Model.TargetStep" }, draw);
}
google.charts.load("current", { packages: ["sankey"] });
google.charts.setOnLoadCallback(requestApi);
})(this);
</script>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment