Available in the Full Version
Data Chart - Charts - Stacked Series
This sample shows stacked series of the igDataChart control.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Energy data from:
U.S. Energy Information Administration (2012)
U.S. Energy Information Administration (2012)
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title>Charts - Stacked Series</title>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!--CSS file specific for chart styling -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
</head>
<body>
<script type="text/javascript" src="/data-files/world-energy-production.js"></script>
<script>
$(function () {
function CreateChart(seriesType, chartTitle) {
var xAxis = {};
var yAxis = {};
if (seriesType.contains("Bar"))
{
// stack bar series require numeric xAxis and category yAxis
xAxis = { name: "xAxis", type: "numericX", title: "Quadrillion Btu" };
yAxis = { name: "yAxis", type: "categoryY", label: "Year", gap: 0.5, };
}
else
{
// other stack series require category xAxis and numeric yAxis
xAxis = { name: "xAxis", type: "categoryX", label: "Year", gap: 0.5, };
yAxis = { name: "yAxis", type: "numericY", title: "Quadrillion Btu" };
}
var selector = "#" + seriesType;
$(selector).igDataChart({
dataSource: lastFiveYears,
height: "250px",
width: "250px",
title: chartTitle,
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate",
axes: [ xAxis, yAxis ],
series: [
CreateStackedSeries(seriesType),
],
});
};
function CreateStackedSeries(seriesType) {
var series = {
name: seriesType + "Series",
type: seriesType,
xAxis: "xAxis",
yAxis: "yAxis",
outline: "transparent",
series: [
CreateStackedFragment("Canada"),
CreateStackedFragment("Russia"),
CreateStackedFragment("China"),
CreateStackedFragment("UnitedStates"),
CreateStackedFragment("SaudiArabia"),
]
}
if (seriesType.contains("Column")) {
series.radius = 0;
}
return series;
}
function CreateStackedFragment(memberPath) {
var stackFragment = {
name: memberPath + "Fragment",
title: memberPath,
valueMemberPath: memberPath,
type: "stackedFragment",
showTooltip: true,
tooltipTemplate: memberPath,
};
return stackFragment;
}
CreateChart("stackedBar", "Stacked Bar");
CreateChart("stacked100Bar", "Stacked 100 Bar");
CreateChart("stackedArea", "Stacked Area");
CreateChart("stackedColumn", "Stacked Column");
CreateChart("stackedLine", "Stacked Line");
CreateChart("stackedSpline", "Stacked Spline");
CreateChart("stackedSplineArea", "Stacked Spline Area");
CreateChart("stacked100Area", "Stacked 100 Area");
CreateChart("stacked100Column", "Stacked 100 Column");
CreateChart("stacked100Line", "Stacked 100 Line");
CreateChart("stacked100Spline", "Stacked 100 Spline");
CreateChart("stacked100SplineArea", "Stacked 100 Spline Area");
});
</script>
<style>
.chart {
display: inline-block;
margin: 0 10px 10px 0;
}
.chart h4 {
margin-bottom: 5px;
}
</style>
<div>
<div>
<div class="chart" id="stackedBar"></div>
<div class="chart" id="stacked100Bar"></div>
<div class="chart" id="stackedArea"></div>
<div class="chart" id="stackedColumn"></div>
<div class="chart" id="stacked100Column"></div>
<div class="chart" id="stacked100Area"></div>
<div class="chart" id="stackedLine"></div>
<div class="chart" id="stacked100Line"></div>
<div class="chart" id="stackedSplineArea"></div>
<div class="chart" id="stackedSpline"></div>
<div class="chart" id="stacked100Spline"></div>
<div class="chart" id="stacked100SplineArea"></div>
</div>
<div class="EIAdata-attribution">
Energy data from:<br />
<a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>
</div>
</div>
</body>
</html>
/*
Data from U.S. Energy Information Administration (2012)
*/
var data = [
{
"Year": 1995,
"Canada": 16.8331,
"SaudiArabia": 20.6591,
"Russia": 41.4181,
"UnitedStates": 71.1744,
"China": 33.5387,
},
{
"Year": 1996,
"Canada": 17.2262,
"SaudiArabia": 20.8153,
"Russia": 39.9461,
"UnitedStates": 72.4860,
"China": 35.1037,
},
{
"Year": 1997,
"Canada": 17.4787,
"SaudiArabia": 21.2433,
"Russia": 38.7414,
"UnitedStates": 72.4715,
"China": 38.4407,
},
{
"Year": 1998,
"Canada": 17.4377,
"SaudiArabia": 21.4151,
"Russia": 39.0652,
"UnitedStates": 72.8764,
"China": 38.8876,
},
{
"Year": 1999,
"Canada": 17.6813,
"SaudiArabia": 20.1783,
"Russia": 40.8088,
"UnitedStates": 71.7420,
"China": 37.5003,
},
{
"Year": 2000,
"Canada": 18.1283,
"SaudiArabia": 21.5931,
"Russia": 41.6954,
"UnitedStates": 71.3322,
"China": 38.7841,
},
{
"Year": 2001,
"Canada": 18.0215,
"SaudiArabia": 20.9456,
"Russia": 42.6263,
"UnitedStates": 71.7343,
"China": 41.6730,
},
{
"Year": 2002,
"Canada": 18.3578,
"SaudiArabia": 20.2696,
"Russia": 44.1627,
"UnitedStates": 70.7132,
"China": 46.2297,
},
{
"Year": 2003,
"Canada": 18.3074,
"SaudiArabia": 23.0489,
"Russia": 47.1823,
"UnitedStates": 69.9627,
"China": 51.2491,
},
{
"Year": 2004,
"Canada": 18.6642,
"SaudiArabia": 24.1590,
"Russia": 49.8648,
"UnitedStates": 70.2224,
"China": 55.9233,
},
{
"Year": 2005,
"Canada": 18.8932,
"SaudiArabia": 25.4401,
"Russia": 51.0796,
"UnitedStates": 69.4437,
"China": 63.9524,
},
{
"Year": 2006,
"Canada": 19.2273,
"SaudiArabia": 24.6105,
"Russia": 52.0557,
"UnitedStates": 70.7539,
"China": 68.2333,
},
{
"Year": 2007,
"Canada": 19.5439,
"SaudiArabia": 23.7326,
"Russia": 52.5599,
"UnitedStates": 71.4000,
"China": 73.2809,
},
{
"Year": 2008,
"Canada": 19.0196,
"SaudiArabia": 25.1682,
"Russia": 52.5460,
"UnitedStates": 73.2178,
"China": 78.3599,
},
{
"Year": 2009,
"Canada": 18.3249,
"SaudiArabia": 22.837,
"Russia": 50.4291,
"UnitedStates": 72.6409,
"China": 84.0643,
},
{
"Year": 2010,
"Canada": 18.3358,
"SaudiArabia": 24.7442,
"Russia": 53.2232,
"UnitedStates": 74.7951,
"China": 90.3918,
},
];
var lastFiveYears = [
{
"Year": 2005,
"Canada": 18.8932,
"SaudiArabia": 25.4401,
"Russia": 51.0796,
"UnitedStates": 69.4437,
"China": 63.9524,
},
{
"Year": 2006,
"Canada": 19.2273,
"SaudiArabia": 24.6105,
"Russia": 52.0557,
"UnitedStates": 70.7539,
"China": 68.2333,
},
{
"Year": 2007,
"Canada": 19.5439,
"SaudiArabia": 23.7326,
"Russia": 52.5599,
"UnitedStates": 71.4000,
"China": 73.2809,
},
{
"Year": 2008,
"Canada": 19.0196,
"SaudiArabia": 25.1682,
"Russia": 52.5460,
"UnitedStates": 73.2178,
"China": 78.3599,
},
{
"Year": 2009,
"Canada": 18.3249,
"SaudiArabia": 22.837,
"Russia": 50.4291,
"UnitedStates": 72.6409,
"China": 84.0643,
},
{
"Year": 2010,
"Canada": 18.3358,
"SaudiArabia": 24.7442,
"Russia": 53.2232,
"UnitedStates": 74.7951,
"China": 90.3918,
}
];
var everyThreeYears = [
{
"Year": 1995,
"Canada": 16.8331,
"SaudiArabia": 20.6591,
"Russia": 41.4181,
"UnitedStates": 71.1744,
"China": 33.5387,
},
{
"Year": 1998,
"Canada": 17.4377,
"SaudiArabia": 21.4151,
"Russia": 39.0652,
"UnitedStates": 72.8764,
"China": 38.8876,
},
{
"Year": 2001,
"Canada": 18.0215,
"SaudiArabia": 20.9456,
"Russia": 42.6263,
"UnitedStates": 71.7343,
"China": 41.6730,
},
{
"Year": 2004,
"Canada": 18.6642,
"SaudiArabia": 24.1590,
"Russia": 49.8648,
"UnitedStates": 70.2224,
"China": 55.9233,
},
{
"Year": 2007,
"Canada": 19.5439,
"SaudiArabia": 23.7326,
"Russia": 52.5599,
"UnitedStates": 71.4000,
"China": 73.2809,
},
{
"Year": 2010,
"Canada": 18.3358,
"SaudiArabia": 24.7442,
"Russia": 53.2232,
"UnitedStates": 74.7951,
"China": 90.3918,
},
];