371 строка
19 KiB
HTML
371 строка
19 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<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/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">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div id="container"></div>
|
|
</div>
|
|
<div id="sampleProperties">
|
|
<div class="prop-grid">
|
|
<div class="row">
|
|
<table>
|
|
<b>Chart properties</b>
|
|
<tr>
|
|
<td>Render as Canvas
|
|
<td />
|
|
<td><input type="checkbox" checked="checked" id="canvas" /></td>
|
|
</tr>
|
|
</table>
|
|
<br />
|
|
<table>
|
|
<b>Exporting options</b>
|
|
<tr>
|
|
<td>File name</td>
|
|
<td><input type="text" id="filename" value="Chart" size="10"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mode</td>
|
|
<td>
|
|
<select id="mode">
|
|
<option label="Server side" value="server">Server side</option>
|
|
<option label="Client side" value="client">Client side</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Angle</td>
|
|
<td>
|
|
<select id="angle">
|
|
<option label="0" value="0">0</option>
|
|
<option label="90" value="90">90</option>
|
|
<option label="-90" value="-90">-90</option>
|
|
<option label="180" value="180">180</option>
|
|
</select>
|
|
</td>
|
|
<tr />
|
|
<tr>
|
|
<td>Orientation</td>
|
|
<td>
|
|
<select id="orientation1">
|
|
<option label="Portrait" value="portrait">Portrait</option>
|
|
<option label="Landscape" value="landscape">Landscape</option>
|
|
</select>
|
|
</td>
|
|
<tr />
|
|
</table>
|
|
<br />
|
|
<b>Export chart as</b>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<a id="downloadpng"><img src="../content/images/chart/export_active/png.png" class="active" id="png" /></a>
|
|
</td>
|
|
<td>
|
|
<a id="downloadjpg"><img src="../content/images/chart/export_active/jpg.png" class="active" id="jpg"/></a>
|
|
</td>
|
|
<td>
|
|
<img src="../content/images/chart/export_active/pdf.png" class="active" id="pdf" onclick="download(this.id)" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<img src="../content/images/chart/export_active/docx.png" class="active" id="docx" onclick="download(this.id)" />
|
|
</td>
|
|
<td>
|
|
<img src="../content/images/chart/export_active/xlsx.png" class="active" id="xlsx" onclick="download(this.id)" />
|
|
</td>
|
|
<td>
|
|
<a id="downloadsvg"><img src="../content/images/chart/export_disabled/svg.png" class="disabled" id="svg" /></a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<br />
|
|
<b>Print the chart</b>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<img src="../content/images/chart/print.png" class="active" id="printChart" onclick="chartPrint()" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var chartObj;
|
|
$(function ()
|
|
{
|
|
$("#container").ejChart(
|
|
{
|
|
//Initializing Primary X Axis
|
|
primaryXAxis:
|
|
{
|
|
title: { text: 'Manager' },
|
|
majorGridLines: { visible: false }
|
|
},
|
|
|
|
//Initializing Primary Y Axis
|
|
primaryYAxis:
|
|
{
|
|
title: { text: 'Sales' },
|
|
axisLine: { visible: false },
|
|
range: { min: 0, max: 20000, interval: 2000 }
|
|
},
|
|
|
|
//Initializing Series
|
|
series:
|
|
[
|
|
{
|
|
points: [{ x: "John", y: 10000}, { x: "Jake", y: 12000 }, { x: "Peter", y: 18000 },
|
|
{ x: "James", y: 11000}, { x: "Mary", y: 9700 }],
|
|
name: 'Person',
|
|
type: 'column',
|
|
enableAnimation: true,
|
|
tooltip:{visible:true}
|
|
}
|
|
],
|
|
border: {
|
|
opacity: 1
|
|
},
|
|
chartArea:
|
|
{
|
|
border: {
|
|
opacity: 1
|
|
},
|
|
},
|
|
isResponsive: true,
|
|
enableCanvasRendering: true,
|
|
preRender: "preRender",
|
|
axesLabelRendering :'label',
|
|
load:"loadTheme",
|
|
title :{text: 'Sales Comparison'},
|
|
size: { height: "600" },
|
|
legend: { visible: false }
|
|
});
|
|
});
|
|
|
|
//Setting background and chartArea background color to export the chart with correct background color
|
|
function preRender(sender) {
|
|
if (sender.model.theme.indexOf("light") > -1 || sender.model.theme == "bootstrap" || sender.model.theme == "material" > -1) {
|
|
sender.model.background = "white";
|
|
sender.model.chartArea.background = "white";
|
|
}
|
|
else {
|
|
sender.model.background = "black";
|
|
sender.model.chartArea.background = "black"
|
|
}
|
|
}
|
|
function label(sender)
|
|
{
|
|
if (sender.data.axis.orientation == "Vertical")
|
|
{
|
|
var label = sender.data.label.Text / 1000;
|
|
sender.data.label.Text = "$" + label + "K";
|
|
}
|
|
}
|
|
|
|
var clientPng = document.getElementById('downloadpng');
|
|
if (clientPng.addEventListener)
|
|
clientPng.addEventListener('click', downloadClient, false);
|
|
else
|
|
clientPng.attachEvent('onclick', downloadClient, false);
|
|
|
|
var clientPng = document.getElementById('downloadsvg');
|
|
if (clientPng.addEventListener)
|
|
clientPng.addEventListener('click', downloadClient, false);
|
|
else
|
|
clientPng.attachEvent('onclick', downloadClient, false);
|
|
|
|
clientPng = document.getElementById('downloadjpg');
|
|
if (clientPng.addEventListener)
|
|
clientPng.addEventListener('click', downloadClient, false);
|
|
else
|
|
clientPng.attachEvent('onclick', downloadClient, false);
|
|
|
|
$("#png, #svg, #pdf, #jpg, #xlsx, #docx, #printChart").mouseover(function (e) {
|
|
if ($("#" + e.target.id).hasClass("active"))
|
|
$("#" + e.target.id).css("background-color", "lightgray").css("cursor", "pointer").css("border", "solid 1px black");
|
|
else
|
|
$(".active").css("background-color", "transparent").css("cursor", "default").css("border", "solid 1px transparent");
|
|
}).mouseout(function (e) {
|
|
$(".active").css("background-color", "transparent").css("cursor", "default").css("border", "solid 1px transparent");
|
|
});
|
|
|
|
$("#canvas, #mode").change(function () {
|
|
var chart = $("#container").ejChart("instance");
|
|
var mode = $("#mode")[0].value;
|
|
if ($("#canvas").is(":checked")) {
|
|
chart.model.enableCanvasRendering = true;
|
|
if (mode == "server") {
|
|
$("#svg").attr("src", "../Images/chart/export_disabled/svg.png").removeClass("active").addClass("disabled");
|
|
$("#png").attr("src", "../Images/chart/export_active/png.png").removeClass("disabled").addClass("active");
|
|
$("#pdf").attr("src", "../Images/chart/export_active/pdf.png").removeClass("disabled").addClass("active");
|
|
$("#jpg").attr("src", "../Images/chart/export_active/jpg.png").removeClass("disabled").addClass("active");
|
|
$("#xlsx").attr("src", "../Images/chart/export_active/xlsx.png").removeClass("disabled").addClass("active");
|
|
$("#docx").attr("src", "../Images/chart/export_active/docx.png").removeClass("disabled").addClass("active");
|
|
|
|
$("#svg").attr("onerror", "this.src='Images/chart/export_disabled/svg.png'").removeClass("active").addClass("disabled");
|
|
$("#png").attr("onerror", "this.src='Images/chart/export_active/png.png'").removeClass("disabled").addClass("active");
|
|
$("#pdf").attr("onerror", "this.src='Images/chart/export_active/pdf.png'").removeClass("disabled").addClass("active");
|
|
$("#jpg").attr("onerror", "this.src='Images/chart/export_active/jpg.png'").removeClass("disabled").addClass("active");
|
|
$("#xlsx").attr("onerror", "this.src='Images/chart/export_active/xlsx.png'").removeClass("disabled").addClass("active");
|
|
$("#docx").attr("onerror", "this.src='Images/chart/export_active/docx.png'").removeClass("disabled").addClass("active");
|
|
} else {
|
|
$("#svg").attr("src", "../Images/chart/export_disabled/svg.png").removeClass("active").addClass("disabled");
|
|
$("#pdf").attr("src", "../Images/chart/export_disabled/pdf.png").removeClass("active").addClass("disabled");
|
|
$("#xlsx").attr("src", "../Images/chart/export_disabled/xlsx.png").removeClass("active").addClass("disabled");
|
|
$("#docx").attr("src", "../Images/chart/export_disabled/docx.png").removeClass("active").addClass("disabled");
|
|
$("#jpg").attr("src", "../Images/chart/export_active/jpg.png").removeClass("disabled").addClass("active");
|
|
$("#png").attr("src", "../Images/chart/export_active/png.png").removeClass("disabled").addClass("active");
|
|
|
|
$("#svg").attr("onerror", "this.src='Images/chart/export_disabled/svg.png'").removeClass("active").addClass("disabled");
|
|
$("#pdf").attr("onerror", "this.src='Images/chart/export_disabled/pdf.png'").removeClass("active").addClass("disabled");
|
|
$("#xlsx").attr("onerror", "this.src='Images/chart/export_disabled/xlsx.png'").removeClass("active").addClass("disabled");
|
|
$("#docx").attr("onerror", "this.src='Images/chart/export_disabled/docx.png'").removeClass("active").addClass("disabled");
|
|
$("#jpg").attr("onerror", "this.src='Images/chart/export_active/jpg.png'").removeClass("disabled").addClass("active");
|
|
$("#png").attr("onerror", "this.src='Images/chart/export_active/png.png'").removeClass("disabled").addClass("active");
|
|
}
|
|
}
|
|
else {
|
|
chart.model.enableCanvasRendering = false;
|
|
if ($("#mode")[0].value == "server") {
|
|
$("#svg").attr("src", "../Images/chart/export_active/svg.png").removeClass("disabled").addClass("active");
|
|
$("#pdf").attr("src", "../Images/chart/export_disabled/pdf.png").removeClass("active").addClass("disabled");
|
|
$("#xlsx").attr("src", "../Images/chart/export_active/xlsx.png").removeClass("disabled").addClass("active");
|
|
$("#docx").attr("src", "../Images/chart/export_disabled/docx.png").removeClass("active").addClass("disabled");
|
|
$("#jpg").attr("src", "../Images/chart/export_disabled/jpg.png").removeClass("active").addClass("disabled");
|
|
$("#png").attr("src", "../Images/chart/export_disabled/png.png").removeClass("active").addClass("disabled");
|
|
|
|
$("#svg").attr("onerror", "this.src='Images/chart/export_active/svg.png'").removeClass("disabled").addClass("active");
|
|
$("#pdf").attr("onerror", "this.src='Images/chart/export_disabled/pdf.png'").removeClass("active").addClass("disabled");
|
|
$("#xlsx").attr("onerror", "this.src='Images/chart/export_active/xlsx.png'").removeClass("disabled").addClass("active");
|
|
$("#docx").attr("onerror", "this.src='Images/chart/export_disabled/docx.png'").removeClass("active").addClass("disabled");
|
|
$("#jpg").attr("onerror", "this.src='Images/chart/export_disabled/jpg.png'").removeClass("active").addClass("disabled");
|
|
$("#png").attr("onerror", "this.src='Images/chart/export_disabled/png.png'").removeClass("active").addClass("disabled");
|
|
}
|
|
else {
|
|
$("#svg").attr("src", "../Images/chart/export_active/svg.png").removeClass("disabled").addClass("active");
|
|
$("#pdf").attr("src", "../Images/chart/export_disabled/pdf.png").removeClass("active").addClass("disabled");
|
|
$("#xlsx").attr("src", "../Images/chart/export_disabled/xlsx.png").removeClass("active").addClass("disabled");
|
|
$("#docx").attr("src", "../Images/chart/export_disabled/docx.png").removeClass("active").addClass("disabled");
|
|
$("#jpg").attr("src", "../Images/chart/export_disabled/jpg.png").removeClass("active").addClass("disabled");
|
|
$("#png").attr("src", "../Images/chart/export_disabled/png.png").removeClass("active").addClass("disabled");
|
|
|
|
$("#svg").attr("onerror", "this.src='Images/chart/export_active/svg.png'").removeClass("disabled").addClass("active");
|
|
$("#pdf").attr("onerror", "this.src='Images/chart/export_disabled/pdf.png'").removeClass("active").addClass("disabled");
|
|
$("#xlsx").attr("onerror", "this.src='Images/chart/export_disabled/xlsx.png'").removeClass("active").addClass("disabled");
|
|
$("#docx").attr("onerror", "this.src='Images/chart/export_disabled/docx.png'").removeClass("active").addClass("disabled");
|
|
$("#jpg").attr("onerror", "this.src='Images/chart/export_disabled/jpg.png'").removeClass("active").addClass("disabled");
|
|
$("#png").attr("onerror", "this.src='Images/chart/export_disabled/png.png'").removeClass("active").addClass("disabled");
|
|
}
|
|
}
|
|
chart.redraw();
|
|
});
|
|
|
|
function downloadClient() { // to download chart in client side
|
|
var type = this.id;
|
|
type = (type).indexOf("download") >= 0 ? type.replace("download", "") : type;
|
|
if ($('#mode')[0].value == "client") {
|
|
var chart = $("#container").ejChart("instance"),
|
|
exporting = chart.model.exportSettings, data, type;
|
|
exporting.fileName = $("#filename").val();
|
|
exporting.angle = $("#angle")[0].value;
|
|
exporting.type = type;
|
|
exporting.mode = $('#mode')[0].value;
|
|
data = chart.export();
|
|
if (window.navigator.msSaveOrOpenBlob) { // for IE
|
|
var blob;
|
|
if (type == "png")
|
|
blob = data.msToBlob();
|
|
else if(type == "jpg")
|
|
blob = data.msToBlob(null, "image/jpeg");
|
|
else if (type == "svg") {
|
|
data = decodeURIComponent(data);
|
|
blob = new Blob([data], { type: "image/svg-xml" });
|
|
}
|
|
window.navigator.msSaveOrOpenBlob(blob, exporting.fileName + "." + type);
|
|
}
|
|
else {
|
|
this.download = exporting.fileName + "." + type;
|
|
if (type == "png")
|
|
this.href = data.toDataURL();
|
|
else if (type == "jpg")
|
|
this.href = data.toDataURL("image/jpeg");
|
|
else
|
|
this.href = "data:text/plain;charset=utf-8," + data;
|
|
}
|
|
} else
|
|
download(type);
|
|
}
|
|
function download(args) {
|
|
var id = args;
|
|
if ($("#" + id).hasClass("active")) {
|
|
var mode = $('#mode')[0].value,
|
|
chart = $("#container").ejChart("instance"),
|
|
exporting = chart.model.exportSettings, data, type;
|
|
exporting.fileName = $("#filename").val();
|
|
exporting.orientation = $('#orientation1')[0].value;
|
|
exporting.angle = $("#angle")[0].value;
|
|
if (id == "png" || id == "jpg")
|
|
exporting.action = window.baseurl + 'api/Chart/ImageExport';
|
|
else if (id == "xlsx")
|
|
exporting.action = window.baseurl + 'api/Chart/ExcelExport';
|
|
else if (id == "docx")
|
|
exporting.action = window.baseurl + 'api/Chart/WordExport';
|
|
else if (id == "pdf")
|
|
exporting.action = window.baseurl + 'api/Chart/PdfExport';
|
|
else
|
|
exporting.action = window.baseurl + 'api/Chart/SvgExport';
|
|
type = exporting.type = id;
|
|
exporting.mode = mode;
|
|
|
|
if (mode == "server")
|
|
chart.export(); // to call export - public method
|
|
}
|
|
return true;
|
|
}
|
|
function chartPrint()
|
|
{
|
|
var chart = $("#container").ejChart("instance");
|
|
chart.print("container");
|
|
}
|
|
|
|
$("#sampleProperties").ejPropertiesPanel();
|
|
</script>
|
|
<style>
|
|
td {
|
|
padding-top: .5em;
|
|
padding-bottom: .5em;
|
|
padding-right: .5em;
|
|
}
|
|
|
|
.active, .disabled {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: solid 1px transparent;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|
|
|