jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
110 lines (102 loc) • 4.99 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript Chart Waterfall Series Example</title>
<meta name="description" content="This is an example of Javascript Chart with waterfall series." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.waterfall.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = [
{ year: 2006, population: 490815046 },
{ year: 2007, population: 492709300 },
{ year: 2008, population: 494774599 },
{ year: 2009, population: 496633373 },
{ year: 2010, population: 498408547 },
{ year: 2011, population: 500418320 },
{ year: 2012, population: 502186144 },
{ year: 2013, population: 503379305 },
{ year: 2014, population: 504961522 },
{ year: 2015, population: 504582506 },
{ year: 2016, population: 505674965 },
{ year: 2017, population: 507416607 },
{ year: 'Total', summary: true }
];
// convert raw data to differences
for (var i = data.length - 2; i > 0; i--)
data[i].population -= data[i - 1].population;
// prepare jqxChart settings
var settings = {
title: "EU Population between 2003 and 2018",
description: "data source: Eurostat",
enableAnimations: true,
showLegend: false,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: data,
colorScheme: 'scheme06',
xAxis:
{
type: 'basic',
dataField: 'year',
displayText: 'Year',
labels: { angle: 0 }
},
valueAxis:
{
title: {text: 'Population<br>'},
unitInterval: 1000000,
labels:
{
formatFunction: function (value) {
return value / 1000000 + ' M';
}
}
},
seriesGroups:
[
{
type: 'waterfall',
series:
[
{
dataField: 'population',
summary: 'summary',
displayText: 'Population change',
colorFunction: function (value, itemIndex, serie, group) {
if (itemIndex == data.length - 1)
return '#3F3A3B'; // total
return (value < 0) ? '#D30E2F' /* red */ : '#24A037' /*green*/;
}
}
]
}
]
};
// setup the chart
$('#chartContainer').jqxChart(settings);
});
</script>
</head>
<body class='default'>
<div id='chartContainer' style="width:850px; height:500px">
</div>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of Javascript Chart with waterfall series. Waterfall series are used to display the cumulative effect of sequential data. You can see how to change the color via the colorFunction.
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>