208 строки
9.7 KiB
HTML
208 строки
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Essential JS 1 : Print Default Functionalities</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<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/jsrender.min.js"></script>
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid" style="overflow:hidden;">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div id="container"></div>
|
|
<span id="text">Note : Users need to select the chart area to print the sales points</span>
|
|
</div>
|
|
<div id="sampleProperties">
|
|
<div class="prop-grid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<button class="button" id="printpage">Print the chart data in grid</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div id="printdata">
|
|
<table>
|
|
<tr>
|
|
<td>Product A</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="ProductA" style="width: 120px"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<br />
|
|
<table>
|
|
<tr>
|
|
<td>Product B</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div id="ProductB" style="width: 120px"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$("#container").ejChart(
|
|
{
|
|
//Initializing Primary X Axis
|
|
primaryXAxis:
|
|
{
|
|
title: { text: 'Years' },
|
|
},
|
|
//Initializing Primary Y Axis
|
|
primaryYAxis:
|
|
{
|
|
range: { min: 0, max: 100, interval: 20 },
|
|
title: { text: 'Sales in Units' },
|
|
},
|
|
|
|
//Initializing Commonseries
|
|
commonSeriesOptions:
|
|
{
|
|
selectionSettings: { enable: true, mode: 'range', rangeType: 'xy' },
|
|
type: 'scatter',
|
|
tooltip: { visible: true }, border: { width: 2 },
|
|
},
|
|
//Initializing Series
|
|
series:
|
|
[
|
|
{
|
|
points: [{ x: 1971, y: 50 }, { x: 1972, y: 20 }, { x: 1973, y: 63 }, { x: 1974, y: 81 }, { x: 1975, y: 64 },
|
|
{ x: 1976, y: 36 }, { x: 1977, y: 22 }, { x: 1978, y: 78 }, { x: 1979, y: 60 }, { x: 1980, y: 41 },
|
|
{ x: 1981, y: 62 }, { x: 1982, y: 56 }, { x: 1983, y: 96 }, { x: 1984, y: 48 }, { x: 1985, y: 23 },
|
|
{ x: 1986, y: 54 }, { x: 1987, y: 73 }, { x: 1988, y: 56 }, { x: 1989, y: 67 }, { x: 1990, y: 79 },
|
|
{ x: 1991, y: 18 }, { x: 1992, y: 78 }, { x: 1993, y: 92 }, { x: 1994, y: 43 }, { x: 1995, y: 29 },
|
|
{ x: 1996, y: 14 }, { x: 1997, y: 85 }, { x: 1998, y: 24 }, { x: 1999, y: 61 }, { x: 2000, y: 80 },
|
|
{ x: 2001, y: 14 }, { x: 2002, y: 34 }, { x: 2003, y: 81 }, { x: 2004, y: 70 }, { x: 2005, y: 21 },
|
|
{ x: 2006, y: 70 }, { x: 2007, y: 32 }, { x: 2008, y: 43 }, { x: 2009, y: 21 }, { x: 2010, y: 63 },
|
|
{ x: 2011, y: 9 }, { x: 2012, y: 51 }, { x: 2013, y: 25 }, { x: 2014, y: 96 }, { x: 2015, y: 32 }
|
|
],
|
|
name: 'Product A', fill: "#5cd65c",
|
|
marker: {
|
|
visible: true, shape: 'star',
|
|
size: { width: 15, height: 15 },
|
|
}
|
|
},
|
|
{
|
|
points: [{ x: 1971, y: 23 }, { x: 1972, y: 67 }, { x: 1973, y: 83 }, { x: 1974, y: 43 }, { x: 1975, y: 8 },
|
|
{ x: 1976, y: 41 }, { x: 1977, y: 56 }, { x: 1978, y: 31 }, { x: 1979, y: 29 }, { x: 1980, y: 87 },
|
|
{ x: 1981, y: 43 }, { x: 1982, y: 12 }, { x: 1983, y: 38 }, { x: 1984, y: 67 }, { x: 1985, y: 49 },
|
|
{ x: 1986, y: 67 }, { x: 1987, y: 83 }, { x: 1988, y: 16 }, { x: 1989, y: 89 }, { x: 1990, y: 18 },
|
|
{ x: 1991, y: 46 }, { x: 1992, y: 39 }, { x: 1993, y: 68 }, { x: 1994, y: 87 }, { x: 1995, y: 45 },
|
|
{ x: 1996, y: 42 }, { x: 1997, y: 28 }, { x: 1998, y: 82 }, { x: 1999, y: 13 }, { x: 2000, y: 83 },
|
|
{ x: 2001, y: 26 }, { x: 2002, y: 57 }, { x: 2003, y: 48 }, { x: 2004, y: 84 }, { x: 2005, y: 64 },
|
|
{ x: 2006, y: 24 }, { x: 2007, y: 82 }, { x: 2008, y: 37 }, { x: 2009, y: 68 }, { x: 2010, y: 37 },
|
|
{ x: 2011, y: 35 }, { x: 2012, y: 81 }, { x: 2013, y: 38 }, { x: 2014, y: 51 }, { x: 2015, y: 58 }
|
|
],
|
|
name: 'Product B', fill: '#FFD700',
|
|
marker: {
|
|
visible: true, shape: 'triangle',
|
|
size: { width: 15, height: 15 },
|
|
}
|
|
}
|
|
],
|
|
rangeSelected: 'selectedRegion',
|
|
title: { text: "Profit Comparison of A and B" },
|
|
size: { height: "550" },
|
|
isResponsive: true,
|
|
legend: { visible: true },
|
|
load: 'load',
|
|
});
|
|
$("#printpage").ejButton({
|
|
size: "normal", width: "113px", height: "45px", click: "onPrintPage"
|
|
})
|
|
});
|
|
function load(sender) {
|
|
loadTheme(sender);
|
|
var chart = $("#container").ejChart('instance');
|
|
var gData = [], newData = [];
|
|
for (var i = 0; i < chart.model.series.length; i++) {
|
|
for (var j = 0; j < chart.model.series[i].points.length; j++) {
|
|
if (chart.model.series[i].name === "Product A") {
|
|
gData.push({ Year: chart.model.series[i].points[j].x.toString(), Sales: chart.model.series[i].points[j].y.toString() });
|
|
}
|
|
else if (chart.model.series[i].name === "Product B") {
|
|
newData.push({ Year: chart.model.series[i].points[j].x.toString(), Sales: chart.model.series[i].points[j].y.toString() });
|
|
}
|
|
}
|
|
}
|
|
if (gData) {
|
|
$("#ProductA").ejGrid({ "dataSource": gData });
|
|
$("#ProductA").ejGrid({ "allowScrolling": true, "scrollSettings": { width: "auto" } });
|
|
}
|
|
if (newData) {
|
|
$("#ProductB").ejGrid({ "dataSource": newData });
|
|
$("#ProductB").ejGrid({ "allowScrolling": true, "scrollSettings": { width: "auto" } });
|
|
}
|
|
}
|
|
function onPrintPage(e) {
|
|
var ele = $("#printdata");
|
|
$("#printdata").css("visibility", "visible");
|
|
if (!ele.hasClass("e-print")) {
|
|
$("#printdata").ejPrint(
|
|
{
|
|
printInNewWindow: true
|
|
});
|
|
} else {
|
|
var obj = $("#printdata").ejPrint("instance")
|
|
obj.option("printInNewWindow", true);
|
|
obj.print();
|
|
}
|
|
$("#printdata").css("visibility", "hidden");
|
|
}
|
|
function selectedRegion(sender) {
|
|
var gData = [], newData = [], collectiondata = [];
|
|
for (var i = 0; i < sender.data.selectedDataCollection.length; i++) {
|
|
for (var j = 0; j < sender.data.selectedDataCollection[i].length; j++) {
|
|
collectiondata[j] = sender.data.selectedDataCollection[i][j];
|
|
if (collectiondata[j].seriesIndex === 0) {
|
|
gData.push({ Year: collectiondata[j].x.toString(), Sales: collectiondata[j].y.toString() });
|
|
}
|
|
else if (collectiondata[j].seriesIndex === 1) {
|
|
newData.push({ Year: collectiondata[j].x.toString(), Sales: collectiondata[j].y.toString() });
|
|
}
|
|
}
|
|
}
|
|
if (gData) {
|
|
$("#ProductA").ejGrid({ "dataSource": gData });
|
|
$("#ProductA").ejGrid({ "allowScrolling": true, "scrollSettings": { width: 120 } });
|
|
}
|
|
if (newData) {
|
|
$("#ProductB").ejGrid({ "dataSource": newData });
|
|
$("#ProductB").ejGrid({ "allowScrolling": true, "scrollSettings": { width: 120 } });
|
|
}
|
|
}
|
|
$("#sampleProperties").ejPropertiesPanel();
|
|
</script>
|
|
<style type="text/css">
|
|
#printdata {
|
|
visibility: hidden;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|
|
|
|
|