92 строки
3.7 KiB
HTML
92 строки
3.7 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>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript" language="javascript">
|
||
|
|
$(function () {
|
||
|
|
$("#container").ejChart(
|
||
|
|
{
|
||
|
|
//Initializing Primary Y Axis
|
||
|
|
primaryYAxis:
|
||
|
|
{
|
||
|
|
range: { min: 15, max: 90, interval: 15 }
|
||
|
|
},
|
||
|
|
|
||
|
|
//Initializing Common Properties for all the series
|
||
|
|
commonSeriesOptions:
|
||
|
|
{
|
||
|
|
type: 'polar',
|
||
|
|
enableAnimation: true,
|
||
|
|
tooltip: { visible: true }
|
||
|
|
},
|
||
|
|
|
||
|
|
//Initializing Series
|
||
|
|
series:
|
||
|
|
[{
|
||
|
|
points: [{ x: "North", y: 42 }, { x: "NorthEast", y: 28 },
|
||
|
|
{ x: "East", y: 40 }, { x: "SouthEast", y: 45 },
|
||
|
|
{ x: "South", y: 20 }, { x: "SouthWest", y: 40 },
|
||
|
|
{ x: "West", y: 25 }, { x: "NorthWest", y: 40 }],
|
||
|
|
zOrder: 2,
|
||
|
|
marker: { visible: true },
|
||
|
|
name: 'Line'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
points: [{ x: "North", y: 63 }, { x: "NorthEast", y: 73 },
|
||
|
|
{ x: "East", y: 58 }, { x: "SouthEast", y: 65 },
|
||
|
|
{ x: "South", y: 47 }, { x: "SouthWest", y: 70 },
|
||
|
|
{ x: "West", y: 45 }, { x: "NorthWest", y: 70 }],
|
||
|
|
drawType: 'column',
|
||
|
|
zOrder: 1,
|
||
|
|
border: { color: 'white', width: 1 },
|
||
|
|
name: 'Column',
|
||
|
|
tooltip:
|
||
|
|
{
|
||
|
|
visible: true,
|
||
|
|
fill: 'white',
|
||
|
|
border: { width: 1, color: 'black' },
|
||
|
|
font: { color: "black" }
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
points: [{ x: "North", y: 80 }, { x: "NorthEast", y: 88 },
|
||
|
|
{ x: "East", y: 79 }, { x: "SouthEast", y: 83 },
|
||
|
|
{ x: "South", y: 78 }, { x: "SouthWest", y: 90 },
|
||
|
|
{ x: "West", y: 78 }, { x: "NorthWest", y: 85 }],
|
||
|
|
zOrder: 0,
|
||
|
|
drawType: 'area',
|
||
|
|
marker: { visible: true },
|
||
|
|
name: 'Area'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
isResponsive: true,
|
||
|
|
load: "loadTheme",
|
||
|
|
size: { height: "600" },
|
||
|
|
legend: { visible: true }
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|