133 строки
8.6 KiB
HTML
133 строки
8.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head>
|
|||
|
|
<title></title>
|
|||
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
|||
|
|
<!--<![endif]-->
|
|||
|
|
<!--[if gte IE 9]><!-->
|
|||
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
|||
|
|
<!--<![endif]-->
|
|||
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|||
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|||
|
|
<script src="../scripts/jsrender.min.js"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="content-container-fluid">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="cols-sample-area">
|
|||
|
|
<div class="control" style="margin-left: -16px;">
|
|||
|
|
<div id="PivotClient" style="min-height: 275px; min-width: 525px;" />
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var pivot_dataset = [
|
|||
|
|
{ Amount: 100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Alberta" },
|
|||
|
|
{ Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 3, State: "British Columbia" },
|
|||
|
|
{ Amount: 300, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 4, State: "Brunswick" },
|
|||
|
|
{ Amount: 150, Country: "Canada", Date: "FY 2008", Product: "Bike", Quantity: 3, State: "Manitoba" },
|
|||
|
|
{ Amount: 200, Country: "Canada", Date: "FY 2006", Product: "Car", Quantity: 4, State: "Ontario" },
|
|||
|
|
{ Amount: 100, Country: "Canada", Date: "FY 2007", Product: "Van", Quantity: 1, State: "Quebec" },
|
|||
|
|
{ Amount: 200, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Charente-Maritime" },
|
|||
|
|
{ Amount: 250, Country: "France", Date: "FY 2006", Product: "Van", Quantity: 4, State: "Essonne" },
|
|||
|
|
{ Amount: 300, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 3, State: "Garonne (Haute)" },
|
|||
|
|
{ Amount: 150, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 2, State: "Gers" },
|
|||
|
|
{ Amount: 200, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 3, State: "Bayern" },
|
|||
|
|
{ Amount: 250, Country: "Germany", Date: "FY 2007", Product: "Car", Quantity: 3, State: "Brandenburg" },
|
|||
|
|
{ Amount: 150, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 4, State: "Hamburg" },
|
|||
|
|
{ Amount: 200, Country: "Germany", Date: "FY 2008", Product: "Bike", Quantity: 4, State: "Hessen" },
|
|||
|
|
{ Amount: 150, Country: "Germany", Date: "FY 2007", Product: "Van", Quantity: 3, State: "Nordrhein-Westfalen" },
|
|||
|
|
{ Amount: 100, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 2, State: "Saarland" },
|
|||
|
|
{ Amount: 150, Country: "United Kingdom", Date: "FY 2008", Product: "Bike", Quantity: 5, State: "England" },
|
|||
|
|
{ Amount: 250, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 4, State: "Alabama" },
|
|||
|
|
{ Amount: 200, Country: "United States", Date: "FY 2005", Product: "Van", Quantity: 4, State: "California" },
|
|||
|
|
{ Amount: 100, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 2, State: "Colorado" },
|
|||
|
|
{ Amount: 150, Country: "United States", Date: "FY 2008", Product: "Car", Quantity: 3, State: "New Mexico" },
|
|||
|
|
{ Amount: 200, Country: "United States", Date: "FY 2005", Product: "Bike", Quantity: 4, State: "New York" },
|
|||
|
|
{ Amount: 250, Country: "United States", Date: "FY 2008", Product: "Car", Quantity: 3, State: "North Carolina" },
|
|||
|
|
{ Amount: 300, Country: "United States", Date: "FY 2007", Product: "Van", Quantity: 4, State: "South Carolina" }
|
|||
|
|
];
|
|||
|
|
$(function () {
|
|||
|
|
$("#PivotClient").ejPivotClient({
|
|||
|
|
dataSource: {
|
|||
|
|
data: pivot_dataset,
|
|||
|
|
rows: [
|
|||
|
|
{
|
|||
|
|
fieldName: "Country",
|
|||
|
|
fieldCaption: "Country"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
fieldName: "State",
|
|||
|
|
fieldCaption: "State"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
fieldName: "Date",
|
|||
|
|
fieldCaption: "Date"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
columns: [
|
|||
|
|
{
|
|||
|
|
fieldName: "Product",
|
|||
|
|
fieldCaption: "Product"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
values: [
|
|||
|
|
{
|
|||
|
|
fieldName: "Amount",
|
|||
|
|
fieldCaption: "Amount"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
title: "Relational Browser",
|
|||
|
|
renderSuccess: "setChartProperties",
|
|||
|
|
enableSplitter: false, enableMemberEditorSorting: true,
|
|||
|
|
customObject: { Language: "en-US" }, beforeExport: "Export", saveReport: "saveReportSettings", fetchReport: "saveReportSettings", loadReport: "saveReportSettings",size:{ height:"685px", width:"1000px" }
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
function setChartProperties(args) {
|
|||
|
|
this._pivotChart.model.load = "loadTheme";
|
|||
|
|
if (args._successAction == undefined || args._successAction == "Filter") {
|
|||
|
|
this._pivotChart.model.legend.rowCount = 2;
|
|||
|
|
this._pivotChart.model.primaryXAxis = { title: { text: "Country" }, labelRotation: 270 };
|
|||
|
|
this._pivotChart.model.primaryYAxis = { title: { text: "Amount" } };
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function Export(args) {
|
|||
|
|
args.url = window.baseurl + "api/PivotClient/Olap/Export";
|
|||
|
|
}
|
|||
|
|
function saveReportSettings(args) {
|
|||
|
|
if (args.fetchReportSetting)
|
|||
|
|
args.fetchReportSetting.url = window.baseurl + "api/PivotClient/Olap";
|
|||
|
|
else if (args.loadReportSetting)
|
|||
|
|
args.loadReportSetting.url = window.baseurl + "api/PivotClient/Olap";
|
|||
|
|
else
|
|||
|
|
args.saveReportSetting.url = window.baseurl + "api/PivotClient/Olap";
|
|||
|
|
return args;
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--PivotTreeMap Tooltip labels can be localized here-->
|
|||
|
|
<script id="tooltipTemplate" type="application/jsrender">
|
|||
|
|
<div style="background:White; color:black; font-size:12px; font-weight:normal; border: 1px solid #4D4D4D; white-space: nowrap;border-radius: 2px; margin-right: 25px; min-width: 110px;padding-right: 5px; padding-left: 5px; padding-bottom: 2px ;width: auto; height: auto;">
|
|||
|
|
<div>Measure(s) : {{:~Measures(#data)}}</div><div>Row : {{:~Row(#data)}}</div><div>Column : {{:~Column(#data)}}</div><div>Value : {{:~Value(#data)}}</div>
|
|||
|
|
</div>
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
.samplecontent {
|
|||
|
|
padding: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.row .cols-sample-area {
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|