Available in the Full Version
Data Chart - Binding XML Data
This is a basic example of the data chart bound to XML data.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Population data from:
U.S. Census Bureau
U.S. Census Bureau
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>XML Binding</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/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!--CSS file specific for chart styling -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
</head>
<body>
<script>
$(function () {
//Sample XML Data
var xmlDoc = '<WorldPopulation>' +
'<Country Name="China" Pop1995="1216" Pop2005="1297" Pop2015="1361" Pop2025="1394" />' +
'<Country Name="India" Pop1995="920" Pop2005="1090" Pop2015="1251" Pop2025="1396" />' +
'<Country Name="United States" Pop1995="266" Pop2005="295" Pop2015="322" Pop2025="351" />' +
'<Country Name="Indonesia" Pop1995="197" Pop2005="229" Pop2015="256" Pop2025="277" />' +
'<Country Name="Brazil" Pop1995="161" Pop2005="186" Pop2015="204" Pop2025="218" />' +
'</WorldPopulation>';
//Binding to XML requires a schema to define data fields
var xmlSchema = new $.ig.DataSchema("xml",
{
//searchField serves as the base node(s) for the XPaths
searchField: "//Country",
fields: [
{ name: "Name", xpath: "./@Name"},
{ name: "Pop1995", xpath: "./@Pop1995" },
{ name: "Pop2005", xpath: "./@Pop2005" },
{ name: "Pop2015", xpath: "./@Pop2015" },
{ name: "Pop2025", xpath: "./@Pop2025" },
]
}
);
//This creates an Infragistics datasource from the XML
//and the Schema which can be consumed by the grid.
var ds = new $.ig.DataSource({
type: "xml",
dataSource: xmlDoc,
schema: xmlSchema
});
ds.dataBind();
$("#chart").igDataChart({
width: "100%",
height: "400px",
title: "Population per Country",
subtitle: "Five largest projected populations for 2015",
axes: [
{
name: "NameAxis",
type: "categoryX",
label: "Name",
dataSource: ds, //$.ig.DataSource defined above
title: "Country"
},
{
name: "PopulationAxis",
type: "numericY",
minimumValue: 0,
maximumValue: 1400,
title: "Millions of People"
}
],
series: [
{
name: "2015Population",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
dataSource: ds, //$.ig.DataSource defined above
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "Pop2015"
}
]
});
});
</script>
<div style="width: 90%; min-width: 210px;">
<div id="chart"></div>
</div>
<div class="USCensus-attribution">
Population data from:<br />
<a href="http://www.census.gov/" target="_blank">U.S. Census Bureau</a>
</div>
</body>
</html>