Available in the Full Version

Data Chart - Charts - Polar Series

This sample demonstrates how to use various Polar Series in the chart control.
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>Polar 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/wind.js"></script>

    <script type="text/javascript">
        $(function () {

            function CreateChart(selector, seriesType, title) {
                $(selector).igDataChart({
                    width: "250px",
                    height: "250px",
                    dataSource: data,
                    title: title,
                    subtitle: "Wind Speed vs. Wind Direction",
                    axes: [{
                        name: "angleAxis",
                        type: "numericAngle",
                        interval: 45,
                        minimumValue: 0,
                        maximumValue: 360,
                        startAngleOffset: -90,
                        formatLabel: function (value) { return value + "º"; }
                    },
                    {
                        name: "radiusAxis",
                        type: "numericRadius",
                        innerRadiusExtentScale: 0.1,
                        minimumValue: 0,
                        maximumValue: 10,
                        interval: 5
                    }],
                    series: [{
                        name: "series1", 
                        type: seriesType,
                        angleAxis: "angleAxis",
                        radiusAxis: "radiusAxis",
                        angleMemberPath: "WindDirection",
                        radiusMemberPath: "WindSpeed"
                    }],
                    horizontalZoomable: false,
                    verticalZoomable: false,
                    windowResponse: "immediate"
                });
            }

            CreateChart("#chartPolarScatter", "polarScatter", "Polar Scatter");
            CreateChart("#chartPolarLine", "polarLine", "Polar Line");
            CreateChart("#chartPolarArea", "polarArea", "Polar Area");
            CreateChart("#chartPolarSpline", "polarSpline", "Polar Spline");
            CreateChart("#chartPolarSplineArea", "polarSplineArea", "Polar Spline Area");
        });

    </script>

    <style type="text/css">  
        .chart
        {
            display: inline-block; 
        }
    </style>
    <div> 
        <div class="chartContainer">             
            <div class="chart" id="chartPolarScatter"></div>           
            <div class="chart" id="chartPolarLine"></div>           
            <div class="chart" id="chartPolarArea"></div>           
            <div class="chart" id="chartPolarSpline"></div>         
            <div class="chart" id="chartPolarSplineArea"></div>             
        </div>

        <div class="NOAAdata-attribution">
            Weather data from:<br />
            <a href="http://www.noaa.gov/" target="_blank">NOAA</a>
        </div>

    </div>
</body>
</html>