jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
100 lines (94 loc) • 4.77 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Element Chart WaterfallSeries</title>
<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" />
<meta name="description" content="This is an example of Custom Element Chart with waterfall series." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.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="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.waterfall.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
var data =
[
{ year: 2003, population: 490815046 },
{ year: 2004, population: 492709300 },
{ year: 2005, population: 494774599 },
{ year: 2006, population: 496633373 },
{ year: 2007, population: 498408547 },
{ year: 2008, population: 500418320 },
{ year: 2009, population: 502186144 },
{ year: 2010, population: 503379305 },
{ year: 2011, population: 504961522 },
{ year: 2012, population: 504582506 },
{ year: 2013, population: 505674965 },
{ year: 2018, population: 507416607 },
{ year: 'Total', summary: true }
];
for (var i = data.length - 2; i > 0; i--)
data[i].population -= data[i - 1].population;
JQXElements.settings['chartSettings'] =
{
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: (value) => {
return value / 1000000 + ' M';
}
}
},
seriesGroups:
[
{
type: 'waterfall',
series:
[
{
dataField: 'population',
summary: 'summary',
displayText: 'Population change',
colorFunction: (value, itemIndex, serie, group) => {
if (itemIndex == data.length - 1)
return '#3F3A3B'; // total
return (value < 0) ? '#D30E2F' /* red */ : '#24A037' /*green*/;
}
}
]
}
]
}
</script>
</head>
<body>
<div class="example-description">
This is an example of Custom element 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>
<jqx-chart settings="chartSettings"></jqx-chart>
</body>
</html>