|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
html, body, #Nvd3_StackedAreaChartParent { |
|
height: 100%; |
|
min-height: 100%; |
|
width: 100%; |
|
min-width: 100%; |
|
} |
|
</style> |
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css"/> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css"> |
|
<link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/> |
|
<link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css"> |
|
<link rel="stylesheet" href="https://dexjs.net/js/dex.css"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css"/> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> |
|
<script src="https://dexjs.net/js/dex-jquery.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
|
<script src="https://dexjs.net/js/dex-bootstrap.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> |
|
<script src="https://dexjs.net/js/dex-libs.js"></script> |
|
<script src="https://dexjs.net/js/dex.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script> |
|
|
|
<script>d3 = dex.charts.d3.d3v3;</script> |
|
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js"></script> |
|
|
|
<body> |
|
<div id="Nvd3_StackedAreaChartParent"></div> |
|
<script> |
|
var csv = new dex.csv(['Name', 'Date', 'Sales']); |
|
|
|
var winters = [ |
|
"2007-2008", "2008-2009", "2009-2010", "2010-2011", "2011-2012", "2012-2013", |
|
"2013-2014", "2014-2015", "2015-2016"]; |
|
|
|
|
|
csv.data.push(['green',"2007-2008", 38]); |
|
csv.data.push(['green', "2008-2009",45]); |
|
csv.data.push(['green', "2009-2010",30]); |
|
csv.data.push(['green', "2010-2011",38]); |
|
csv.data.push(['green', "2011-2012",47]); |
|
csv.data.push(['green', "2012-2013",44]); |
|
csv.data.push(['green', "2013-2014",43]); |
|
csv.data.push(['green', "2014-2015",56]); |
|
csv.data.push(['green', "2015-2016",47]); |
|
|
|
csv.data.push(['yellow',"2007-2008",44]); |
|
csv.data.push(['yellow',"2008-2009",36]); |
|
csv.data.push(['yellow',"2009-2010",37]); |
|
csv.data.push(['yellow',"2010-2011",18]); |
|
csv.data.push(['yellow',"2011-2012",40]); |
|
csv.data.push(['yellow',"2012-2013",24]); |
|
csv.data.push(['yellow',"2013-2014",21]); |
|
csv.data.push(['yellow',"2014-2015",26]); |
|
csv.data.push(['yellow',"2015-2016",31]); |
|
|
|
csv.data.push(['orange', "2007-2008",10]), |
|
csv.data.push(['orange', "2008-2009",6 ]), |
|
csv.data.push(['orange', "2009-2010",13]), |
|
csv.data.push(['orange', "2010-2011",9 ]), |
|
csv.data.push(['orange', "2011-2012",4 ]), |
|
csv.data.push(['orange', "2012-2013",15]), |
|
csv.data.push(['orange', "2013-2014",19]), |
|
csv.data.push(['orange', "2014-2015",4 ]), |
|
csv.data.push(['orange', "2015-2016",9 ]); |
|
|
|
csv.data.push(['red', "2007-2008",0]), |
|
csv.data.push(['red', "2008-2009",5]), |
|
csv.data.push(['red', "2009-2010",4]), |
|
csv.data.push(['red', "2010-2011",3]), |
|
csv.data.push(['red', "2011-2012",0]), |
|
csv.data.push(['red', "2012-2013",0]), |
|
csv.data.push(['red', "2013-2014",3]), |
|
csv.data.push(['red', "2014-2015",2]), |
|
csv.data.push(['red', "2015-2016",2]); |
|
|
|
csv.data.push(['purple', "2007-2008",0]), |
|
csv.data.push(['purple', "2008-2009",0]), |
|
csv.data.push(['purple', "2009-2010",0]), |
|
csv.data.push(['purple', "2010-2011",0]), |
|
csv.data.push(['purple', "2011-2012",0]), |
|
csv.data.push(['purple', "2012-2013",0]), |
|
csv.data.push(['purple', "2013-2014",0]), |
|
csv.data.push(['purple', "2014-2015",0]), |
|
csv.data.push(['purple', "2015-2016",0]); |
|
|
|
var stackedAreaChart = new dex.charts.nvd3.StackedAreaChart({ |
|
'parent': '#Nvd3_StackedAreaChartParent', |
|
'csv': csv |
|
} |
|
).render(); |
|
</script> |
|
|