Available in the Full Version

Data Chart - Charts - Scatter Series

This sample demonstrates the various Scatter Series available in the chart control.

U.S. Agricultural Production Per Year

Agricultural data from:
UNdata

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>Scatter 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>
    <!--loading agricultural data for charts-->
    <script type="text/javascript" src="/data-files/us-fao-gross-production.js"></script>
     
    <script type="text/javascript">

        $(function () {
            function CreateSeries(seriesType) { 

                var markerType = "none"; 
                if (seriesType == "scatterPoint" || seriesType == "scatterBubble") {
                    markerType = "circle";
                }

                var series = {
                    name: seriesType + "Series",
                    type: seriesType,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    xMemberPath: "Year",
                    yMemberPath: "Value",
                    markerType: markerType,
                    thickness: 2
                };

                // scatter bubble series requires additional settings:
                if (seriesType == "scatterBubble") { 
                    series.radiusMemberPath = "Population";
                    series.fillMemberPath = "Population";
                    series.labelMemberPath = "Population"; 
                    series.radiusScale = {
                        minimumValue: 5,
                        maximumValue: 30,
                        isLogarithmic: false
                    };
                    series.fillScale = {
                        type: "value",
                        brushes: ["#DFB4FC", "#D092FA", "#7604C3"],
                        minimumValue: 150,
                        maximumValue: 400
                    };
                }

                return series;
            }

            function CreateChart(selector, seriesType, title) {
                $(selector).igDataChart({
                    width: "250px",
                    height: "250px",
                    title: title, 
                    horizontalZoomable: true,
                    verticalZoomable: true,
                    windowResponse: "immediate",
                    dataSource: agriculturalData,
                    axes: [{
                        name: "xAxis",
                        type: "numericX",
                        interval: 10,
                        title: "Year",
                    }, {
                        name: "yAxis",
                        type: "numericY",
                        title: "Billions of USD",
                        maximumValue: 200000,
                        abbreviateLargeNumbers: true, 
                    }],
                    series: [
                        CreateSeries(seriesType), 
                    ]
                });
            } 

            CreateChart("#chartScatterPoint", "scatterPoint", "Scatter Point");
            CreateChart("#chartScatterBubble", "scatterBubble", "Scatter Bubble");
            CreateChart("#chartScatterLine", "scatterLine", "Scatter Line");
            CreateChart("#chartScatterSpline", "scatterSpline", "Scatter Spline");
        });
    </script>

    <style type="text/css">
        h4 {
            width: 100%;
            text-align: center;
        }

        .chart { 
            display: inline-block; 
        }
    </style>

    <div>
        <div class="chartContainer">
            <h4>U.S. Agricultural Production Per Year</h4>
            <div> 
                <div class="chart" id="chartScatterPoint"></div> 
                <div class="chart" id="chartScatterBubble"></div>
                <div class="chart" id="chartScatterLine"></div> 
                <div class="chart" id="chartScatterSpline"></div> 
            </div>
        </div>

        <div class="UNdata-attribution">
            Agricultural data from:<br />
            <a href="http://data.un.org/" target="_blank">UNdata</a>
        </div>

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