Available in the OSS Version

Infragistics Loader - Load Multiple Resources

This sample demonstrates how to load multiple components and features with the Infragistics Loader. When you initialize the loader in JavaScript, resources can be loaded by chaining e.g. igDataChart.Category.Radial where 'Category' and 'Radial' represent nested features.

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

Show In JsFiddle

Copy to Clipboard

HTML

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        #chart1 {
            position: relative;
            float: left;
            margin-right: 10px;
        }

        #legend1 {
            position: relative;
            float: left;
        }

        .selectionOptions {
            margin-bottom: 10px;
        }
    </style>

    <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 Loader JavaScript File -->
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.loader.js" type="text/javascript"></script>

</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="chart1"></div>
    <div id="legend1"></div>

    <script>

        $.ig.loader({
            scriptPath: "http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/",
            cssPath: "http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/",
            resources: "igDataChart.Radial,igChartLegend,igCombo",
            ready: function () {

                var data1 = [{ "Label": "Administration", "Budget": 60, "Spending": 20 },
                    { "Label": "Sales", "Budget": 40, "Spending": 80 },
                    { "Label": "IT", "Budget": 60, "Spending": 20 },
                    { "Label": "Marketing", "Budget": 40, "Spending": 80 },
                    { "Label": "Development", "Budget": 60, "Spending": 20 },
                    { "Label": "Support", "Budget": 20, "Spending": 60 }];

                $("#chart1").igDataChart({
                    width: "500px",
                    height: "500px",
                    dataSource: data1,
                    legend: { element: "legend1" },
                    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) {
                            $("#chart1").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"
                            }]);
                        }
                    }
                });
            }
        });

    </script>

</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Infragistics Loader - Load Multiple Resources

Code View