Available in the OSS Version
Infragistics Loader - TypeScript
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how to use TypeScript to load multiple components and features with the Infragistics Loader. Using a Combo Box can be chosen what is the type for the Data Chart that will be displayed.
A legend for the Data Chart is included as well.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></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 JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.loader.js"></script>
<style type="text/css">
#chart {
position: relative;
float: left;
margin-right: 10px;
}
#legend {
position: relative;
float: left;
}
.selectionOptions {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="selectionOptions">
<select id="seriesType">
<option value="radialLine" selected="selected">Radial Line</option>
<option value="radialColumn">Radial Column</option>
<option value="radialPie">Radial Pie</option>
</select>
</div>
<div id="chart"></div>
<div id="legend"></div>
<script src="/TypeScriptSamples/loader/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
class DepartmentData {
label: string;
budget: number;
spending: number;
constructor(_label: string, _budget: number, _spending: number) {
this.label = _label;
this.budget = _budget;
this.spending = _spending;
}
}
var companyData: DepartmentData[] = [];
companyData.push(new DepartmentData("Administration", 75, 35));
companyData.push(new DepartmentData("Sales", 30, 80));
companyData.push(new DepartmentData("IT", 60, 20));
companyData.push(new DepartmentData("Marketing", 50, 70));
companyData.push(new DepartmentData("Development", 80, 40));
companyData.push(new DepartmentData("Support", 20, 45));
$.ig.loader({
scriptPath: "/igniteui/js/",
cssPath: "/igniteui/css/",
resources: "igDataChart.Radial,igCombo, igChartLegend"
});
// jQuery's ready event can be used with the loader.
// The loader calls holdReady until all JS and CSS files are loaded.
$(function () {
$("#chart").igDataChart({
width: "500px",
height: "500px",
dataSource: companyData,
legend: { element: "legend" },
axes: [{
name: "angleAxis",
type: "categoryAngle",
label: "label",
interval: 1
}, {
name: "radiusAxis",
type: "numericRadius",
innerRadiusExtentScale: .1,
maximumValue: 100,
minimumValue: 0,
interval: 25,
radiusExtentScale: .6
}],
series: [{
name: "series1",
title: 'Budget',
type: "radialLine",
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "budget",
thickness: 5,
markerType: "circle"
}, {
name: "series2",
title: 'Spending',
type: "radialLine",
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "spending",
thickness: 5,
markerType: "circle"
}],
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate"
});
$("#seriesType").igCombo({
selectionChanged: function (evt, ui) {
if (ui.items[0].data.value != undefined) {
$("#chart").igDataChart("option", "series", [{
name: "series1", remove: true
}, {
name: "series2", remove: true
}, {
name: "series1",
title: "Budget",
type: ui.items[0].data.value,
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "budget",
thickness: 5,
markerType: "circle"
}, {
name: "series2",
title: 'Spending',
type: ui.items[0].data.value,
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "spending",
thickness: 5,
markerType: "circle"
}]);
}
}
});
});