Available in the Full Version

Data Chart - Charts - Radial Series

This sample shows Radial Series of the igDataChart control.

New York City vs. Philadelphia

Philadelphia
New York City
Weather data from:
NOAA

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 xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Radial 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/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    
    <!--CSS file specific for chart styling -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>

</head>
<body>
    <script type="text/javascript" src="/data-files/temperature.js"></script>

    <script type="text/javascript">

        $(function () {
            function CreateChart(selector, seriesType, title, hasLegend) {
                var thickness = 3;
                var markerType = "none";
                if (seriesType == "radialColumn" || seriesType == "radialPie") {
                    thickness = 1;
                }

                if (seriesType == "radialLine" || seriesType == "radialArea") {
                    markerType = "circle";
                }

                $(selector).igDataChart({
                    width: "250px",
                    height: "250px",
                    dataSource: data,
                    legend: hasLegend ? { element: "legend" } : null,
                    title: title,
                    horizontalZoomable: true,
                    verticalZoomable: true,
                    windowResponse: "immediate",
                    axes: [{
                        name: "angleAxis",
                        type: "categoryAngle",
                        label: "Time",
                        startAngleOffset: -90,
                        interval: 1
                    }, {
                        name: "radiusAxis",
                        type: "numericRadius",
                        innerRadiusExtentScale: .1,
                        radiusExtentScale: .8,
                        maximumValue: 95,
                        minimumValue: 75,
                        interval: 5,
                    }],
                    series: [{
                        name: "series1",
                        title: 'Philadelphia',
                        type: seriesType,
                        angleAxis: "angleAxis",
                        valueAxis: "radiusAxis",
                        valueMemberPath: "PhiladelphiaTemp",
                        thickness: thickness,
                        markerType: markerType
                    }, {
                        name: "series2",
                        title: 'New York City',
                        type: seriesType,
                        angleAxis: "angleAxis",
                        valueAxis: "radiusAxis",
                        valueMemberPath: "NewYorkCityTemp",
                        thickness: thickness,
                        markerType: markerType
                    }]
                });
            }

            CreateChart("#chartLine", "radialLine", "Radial Line", false);
            CreateChart("#chartColumn", "radialColumn", "Radial Column", true);
            CreateChart("#chartPie", "radialPie", "Radial Pie", false);
            CreateChart("#chartArea", "radialArea", "Radial Area", false);
        });
    </script>

    <style type="text/css">
        h2
        {
            width: 100%;
            text-align: center;
        }
        
        .chart
        {
            display: inline-block; 
        }
        .legend
        {
            display: inline-block; 
        }
    </style>

    <div>
        <h2>New York City vs. Philadelphia</h2>
        <div class="chartContainer">
            <div class="chart" id="chartLine"></div>
            <div class="chart" id="chartPie"></div>
            <div class="chart" id="chartArea"></div>
            <div class="chart" id="chartColumn"></div>
        </div>
        <div class="legend" id="legend"></div> 
        <div>
            <div>
                Weather data from:<br />
                <a href="http://www.noaa.gov/" target="_blank">NOAA</a>
            </div>
        </div>  
    </div>
    
</body>
</html>