We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link rel='nofollow' href="http://cdn.syncfusion.com/14.2.0.26/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="14.2.0.26/themes/web/content/default.css" rel="stylesheet" />
<link rel='nofollow' href="14.2.0.26/themes/web/content/default-responsive.css" rel="stylesheet" />
<script type="text/javascript" src="http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://cdn.syncfusion.com/14.2.0.26/js/web/ej.web.all.min.js"></script>
<script src="14.2.0.26/scripts/web/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 X Axis
primaryXAxis:
{
title: {text: "Sales Across Years"},
range: {min: new Date(2000, 6, 1), max: new Date(2010, 6, 1), interval: 1},
intervalType: 'Years',
labelFormat: 'MMM-yyyy',
valueType: 'datetime'
},
//Initializing Primary Y Axis
primaryYAxis:
{
title: {text: "Sales Amount in millions(USD)"},
labelFormat: '${value}',
rangePadding: 'additional'
},
//Initializing Common Properties for all the series
commonSeriesOptions:
{
tooltip:
{
visible: true
},
type: 'stackingarea',
opacity: 0.7
},
//Initializing Series
series:
[
{
points: [{ x: new Date(2000, 06, 11), y: 10 },
{ x: new Date(2002, 03, 07), y: 30 },
{ x: new Date(2002, 03, 08), y: null },
{ x: new Date(2004, 03, 06), y: 15 },
{ x: new Date(2006, 03, 30), y: 65 },
{ x: new Date(2008, 03, 08), y: 90 },
{ x: new Date(2010, 03, 08), y: 85 }],
name: 'Sales 1',
enableAnimation : true,
marker:
{
shape: 'circle',
size:
{
height: 10, width: 10
},
visible: true
},
border:{width: 3},
tooltip :{ format: " Date : #point.x# <br/> Profit : #point.y# "}
},
{
points: [{ x: new Date(2000, 06, 11), y: 20 },
{ x: new Date(2002, 03, 07), y: 40 },
{ x: new Date(2002, 03, 08), y: null },
{ x: new Date(2004, 03, 06), y: 25 },
{ x: new Date(2006, 03, 30), y: 85 },
{ x: new Date(2008, 03, 08), y: 110 },
{ x: new Date(2010, 03, 08), y: 95 }],
name: 'Sales 1',
enableAnimation : true,
marker:
{
shape: 'circle',
size:
{
height: 10, width: 10
},
visible: true
},
border:{width: 3},
tooltip :{ format: " Date : #point.x# <br/> Profit : #point.y# "}
}
],
canResize: true,
load:"loadTheme",
title: { text: 'Average Sales Comparison'},
size: { height: "600"},
legend: { visible: false}
});
});
</script>
</body>
</html>
